From 4e66c9b806f622e51e4c07f16fd9db320845ea3d Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Fri, 16 Feb 2024 13:25:20 -0600
Subject: [PATCH] Fix default loader color (#2891)

---
 src/components/Loader.tsx            | 13 +++++++++++--
 src/view/screens/Storybook/Icons.tsx |  9 +++++++++
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/components/Loader.tsx b/src/components/Loader.tsx
index bbe4e2f7..b9f399f9 100644
--- a/src/components/Loader.tsx
+++ b/src/components/Loader.tsx
@@ -7,11 +7,12 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated'
 
-import {atoms as a} from '#/alf'
+import {atoms as a, useTheme, flatten} from '#/alf'
 import {Props, useCommonSVGProps} from '#/components/icons/common'
 import {Loader_Stroke2_Corner0_Rounded as Icon} from '#/components/icons/Loader'
 
 export function Loader(props: Props) {
+  const t = useTheme()
   const common = useCommonSVGProps(props)
   const rotation = useSharedValue(0)
 
@@ -35,7 +36,15 @@ export function Loader(props: Props) {
         {width: common.size, height: common.size},
         animatedStyles,
       ]}>
-      <Icon {...props} style={[a.absolute, a.inset_0, props.style]} />
+      <Icon
+        {...props}
+        style={[
+          a.absolute,
+          a.inset_0,
+          t.atoms.text_contrast_high,
+          flatten(props.style),
+        ]}
+      />
     </Animated.View>
   )
 }
diff --git a/src/view/screens/Storybook/Icons.tsx b/src/view/screens/Storybook/Icons.tsx
index 73466e07..9d7dc0aa 100644
--- a/src/view/screens/Storybook/Icons.tsx
+++ b/src/view/screens/Storybook/Icons.tsx
@@ -6,6 +6,7 @@ import {H1} from '#/components/Typography'
 import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe'
 import {ArrowTopRight_Stroke2_Corner0_Rounded as ArrowTopRight} from '#/components/icons/ArrowTopRight'
 import {CalendarDays_Stroke2_Corner0_Rounded as CalendarDays} from '#/components/icons/CalendarDays'
+import {Loader} from '#/components/Loader'
 
 export function Icons() {
   const t = useTheme()
@@ -36,6 +37,14 @@ export function Icons() {
         <CalendarDays size="lg" fill={t.atoms.text.color} />
         <CalendarDays size="xl" fill={t.atoms.text.color} />
       </View>
+
+      <View style={[a.flex_row, a.gap_xl]}>
+        <Loader size="xs" fill={t.atoms.text.color} />
+        <Loader size="sm" fill={t.atoms.text.color} />
+        <Loader size="md" fill={t.atoms.text.color} />
+        <Loader size="lg" fill={t.atoms.text.color} />
+        <Loader size="xl" fill={t.atoms.text.color} />
+      </View>
     </View>
   )
 }