forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Fix default loader color (#2891)
authored by
Eric Bailey
and committed by
GitHub
4e66c9b8
1d729721
+20
-2
+11
-2
src/components/Loader.tsx
+11
-2
src/components/Loader.tsx
···
7
7
withTiming,
8
8
} from 'react-native-reanimated'
9
9
10
-
import {atoms as a} from '#/alf'
10
+
import {atoms as a, useTheme, flatten} from '#/alf'
11
11
import {Props, useCommonSVGProps} from '#/components/icons/common'
12
12
import {Loader_Stroke2_Corner0_Rounded as Icon} from '#/components/icons/Loader'
13
13
14
14
export function Loader(props: Props) {
15
+
const t = useTheme()
15
16
const common = useCommonSVGProps(props)
16
17
const rotation = useSharedValue(0)
17
18
···
35
36
{width: common.size, height: common.size},
36
37
animatedStyles,
37
38
]}>
38
-
<Icon {...props} style={[a.absolute, a.inset_0, props.style]} />
39
+
<Icon
40
+
{...props}
41
+
style={[
42
+
a.absolute,
43
+
a.inset_0,
44
+
t.atoms.text_contrast_high,
45
+
flatten(props.style),
46
+
]}
47
+
/>
39
48
</Animated.View>
40
49
)
41
50
}
+9
src/view/screens/Storybook/Icons.tsx
+9
src/view/screens/Storybook/Icons.tsx
···
6
6
import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe'
7
7
import {ArrowTopRight_Stroke2_Corner0_Rounded as ArrowTopRight} from '#/components/icons/ArrowTopRight'
8
8
import {CalendarDays_Stroke2_Corner0_Rounded as CalendarDays} from '#/components/icons/CalendarDays'
9
+
import {Loader} from '#/components/Loader'
9
10
10
11
export function Icons() {
11
12
const t = useTheme()
···
35
36
<CalendarDays size="md" fill={t.atoms.text.color} />
36
37
<CalendarDays size="lg" fill={t.atoms.text.color} />
37
38
<CalendarDays size="xl" fill={t.atoms.text.color} />
39
+
</View>
40
+
41
+
<View style={[a.flex_row, a.gap_xl]}>
42
+
<Loader size="xs" fill={t.atoms.text.color} />
43
+
<Loader size="sm" fill={t.atoms.text.color} />
44
+
<Loader size="md" fill={t.atoms.text.color} />
45
+
<Loader size="lg" fill={t.atoms.text.color} />
46
+
<Loader size="xl" fill={t.atoms.text.color} />
38
47
</View>
39
48
</View>
40
49
)