jollywhoppers.com
Bluesky app fork with some witchin' additions 💫
witchsky.app
bluesky
fork
client
Placeholder style tweaks (#9107)
* Align colors in loading placeholders
* Same for new skele components
* Increase opacity of disabled replies button slightly
authored by
Eric Bailey
and committed by
GitHub
a9efd949
6cd6a344
+1
-1
src/components/PostControls/index.tsx
+1
-1
src/components/PostControls/index.tsx
+3
-3
src/components/Skeleton.tsx
+3
-3
src/components/Skeleton.tsx
···
32
32
<View
33
33
style={[
34
34
a.rounded_md,
35
-
t.atoms.bg_contrast_25,
35
+
t.atoms.bg_contrast_50,
36
36
{
37
37
height: lineHeight * 0.7,
38
38
opacity: blend ? 0.6 : 1,
···
57
57
a.justify_center,
58
58
a.align_center,
59
59
a.rounded_full,
60
-
t.atoms.bg_contrast_25,
60
+
t.atoms.bg_contrast_50,
61
61
{
62
62
width: size,
63
63
height: size,
···
80
80
<View
81
81
style={[
82
82
a.rounded_full,
83
-
t.atoms.bg_contrast_25,
83
+
t.atoms.bg_contrast_50,
84
84
{
85
85
width: size * 1.618,
86
86
height: size,
+13
-20
src/view/com/util/LoadingPlaceholder.tsx
+13
-20
src/view/com/util/LoadingPlaceholder.tsx
···
7
7
type ViewStyle,
8
8
} from 'react-native'
9
9
10
-
import {usePalette} from '#/lib/hooks/usePalette'
11
10
import {s} from '#/lib/styles'
12
-
import {useTheme} from '#/lib/ThemeContext'
13
-
import {atoms as a, useTheme as useTheme_NEW} from '#/alf'
11
+
import {atoms as a, useTheme} from '#/alf'
14
12
import {Bubble_Stroke2_Corner2_Rounded as Bubble} from '#/components/icons/Bubble'
15
13
import {
16
14
Heart2_Filled_Stroke2_Corner0_Rounded as HeartIconFilled,
···
27
25
height: DimensionValue | undefined
28
26
style?: StyleProp<ViewStyle>
29
27
}) {
30
-
const theme = useTheme()
28
+
const t = useTheme()
31
29
return (
32
30
<View
33
31
style={[
···
35
33
{
36
34
width,
37
35
height,
38
-
backgroundColor: theme.palette.default.backgroundLight,
36
+
backgroundColor: t.palette.contrast_50,
39
37
},
40
38
style,
41
39
]}
···
48
46
}: {
49
47
style?: StyleProp<ViewStyle>
50
48
}) {
51
-
const t = useTheme_NEW()
52
-
const pal = usePalette('default')
49
+
const t = useTheme()
53
50
return (
54
-
<View style={[styles.post, pal.view, style]}>
51
+
<View style={[styles.post, style]}>
55
52
<LoadingPlaceholder
56
53
width={42}
57
54
height={42}
···
137
134
}: {
138
135
style?: StyleProp<ViewStyle>
139
136
}) {
140
-
const pal = usePalette('default')
137
+
const t = useTheme()
141
138
return (
142
-
<View style={[styles.notification, pal.view, style]}>
139
+
<View style={[styles.notification, style]}>
143
140
<View style={[{width: 60}, a.align_end, a.pr_sm, a.pt_2xs]}>
144
-
<HeartIconFilled
145
-
size="xl"
146
-
style={{color: pal.colors.backgroundLight}}
147
-
/>
141
+
<HeartIconFilled size="xl" style={{color: t.palette.contrast_50}} />
148
142
</View>
149
143
<View style={{flex: 1}}>
150
144
<View style={[a.flex_row, s.mb10]}>
···
184
178
}: {
185
179
style?: StyleProp<ViewStyle>
186
180
}) {
187
-
const pal = usePalette('default')
188
181
return (
189
-
<View style={[styles.profileCard, pal.view, style]}>
182
+
<View style={[styles.profileCard, style]}>
190
183
<LoadingPlaceholder
191
184
width={40}
192
185
height={40}
···
228
221
showTopBorder?: boolean
229
222
showLowerPlaceholder?: boolean
230
223
}) {
231
-
const pal = usePalette('default')
224
+
const t = useTheme()
232
225
return (
233
226
<View
234
227
style={[
···
236
229
padding: 16,
237
230
borderTopWidth: showTopBorder ? StyleSheet.hairlineWidth : 0,
238
231
},
239
-
pal.border,
232
+
t.atoms.border_contrast_low,
240
233
style,
241
234
]}>
242
-
<View style={[pal.view, {flexDirection: 'row'}]}>
235
+
<View style={[{flexDirection: 'row'}]}>
243
236
<LoadingPlaceholder
244
237
width={36}
245
238
height={36}
···
282
275
}: {
283
276
style?: StyleProp<ViewStyle>
284
277
}) {
285
-
const t = useTheme_NEW()
278
+
const t = useTheme()
286
279
const random = useMemo(() => Math.random(), [])
287
280
return (
288
281
<View style={[a.flex_row, a.gap_md, a.px_lg, a.mt_lg, t.atoms.bg, style]}>