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