refactor - wip

Emurgo · Apr 29, 2024 · 2e19934 · 2e19934
1 parent 5af7ea1
commit 2e19934
Show file tree

Hide file tree

Showing 89 changed files with 348 additions and 392 deletions.
diff --git a/apps/wallet-mobile/src/NftDetails/NftDetails.tsx b/apps/wallet-mobile/src/NftDetails/NftDetails.tsx
@@ -237,8 +237,7 @@ const IMAGE_PADDING = 16
 const IMAGE_WIDTH = Dimensions.get('window').width - IMAGE_PADDING * 2
 
 const useStyles = () => {
-  const {theme} = useTheme()
-  const {color, typography} = theme
+  const {atoms, color} = useTheme()
   const styles = StyleSheet.create({
     copyButton: {
       flex: 1,

diff --git a/apps/wallet-mobile/src/NftDetails/NftDetailsNavigator.tsx b/apps/wallet-mobile/src/NftDetails/NftDetailsNavigator.tsx
@@ -13,12 +13,12 @@ const Stack = createStackNavigator<NftRoutes>()
 export const NftDetailsNavigator = () => {
   const strings = useStrings()
   const {track} = useMetrics()
-  const {theme} = useTheme()
+  const {atoms, color} = useTheme()
 
   return (
     <Stack.Navigator
       screenOptions={{
-        ...defaultStackNavigationOptions(theme),
+        ...defaultStackNavigationOptions(atoms, color),
         headerTitleContainerStyle: {alignItems: 'center'},
       }}
       initialRouteName="nft-details"

diff --git a/apps/wallet-mobile/src/Nfts/NftsNavigator.tsx b/apps/wallet-mobile/src/Nfts/NftsNavigator.tsx
@@ -8,9 +8,9 @@ import {Nfts} from './Nfts'
 const Stack = createStackNavigator<NftRoutes>()
 
 export const NftsNavigator = () => {
-  const {theme} = useTheme()
+  const {atoms, color} = useTheme()
   return (
-    <Stack.Navigator screenOptions={defaultStackNavigationOptions(theme)}>
+    <Stack.Navigator screenOptions={defaultStackNavigationOptions(atoms, color)}>
       <Stack.Screen name="nft-gallery" component={Nfts} />
     </Stack.Navigator>
   )

diff --git a/apps/wallet-mobile/src/Search/SearchContext.tsx b/apps/wallet-mobile/src/Search/SearchContext.tsx
@@ -104,8 +104,8 @@ export const useSearchOnNavBar = ({
   isChild?: boolean
 }) => {
   const navigation = useNavigation()
-  const {theme} = useTheme()
-  const defaultNavigationOptions = React.useMemo(() => defaultStackNavigationOptions(theme), [theme])
+  const {atoms, color} = useTheme()
+  const defaultNavigationOptions = React.useMemo(() => defaultStackNavigationOptions(atoms, color), [atoms, color])
 
   const {search, visible, showSearch, hideSearch, clearSearch} = useSearch()
 
@@ -177,24 +177,24 @@ export const useDisableSearchOnBar = ({
   onBack?: () => void
 }) => {
   const navigation = useNavigation()
-  const {theme} = useTheme()
+  const {atoms, color} = useTheme()
 
   useFocusEffect(
     React.useCallback(() => {
       if (isChild)
         navigation.getParent()?.setOptions({
-          ...defaultStackNavigationOptions(theme),
+          ...defaultStackNavigationOptions(atoms, color),
           headerLeft: onBack ? () => <BackButton onPress={onBack} /> : undefined,
           headerRight: undefined,
           title,
         })
-    }, [isChild, navigation, onBack, theme, title]),
+    }, [isChild, navigation, onBack, atoms, color, title]),
   )
 
   React.useLayoutEffect(() => {
     if (!isChild)
       navigation.setOptions({
-        ...defaultStackNavigationOptions(theme),
+        ...defaultStackNavigationOptions(atoms, color),
         headerLeft: onBack ? () => <BackButton onPress={onBack} /> : undefined,
         headerRight: undefined,
         title,
@@ -234,11 +234,11 @@ const EraseButton = (props: TouchableOpacityProps) => (
 )
 
 const BackButton = (props: TouchableOpacityProps) => {
-  const {theme} = useTheme()
+  const {color} = useTheme()
 
   return (
     <TouchableOpacity testID="buttonBack" {...props}>
-      <Icon.Chevron direction="left" color={theme.color.gray_cmax} />
+      <Icon.Chevron direction="left" color={color.gray_cmax} />
     </TouchableOpacity>
   )
 }
diff --git a/apps/wallet-mobile/src/Staking/FailedTx/FailedTxScreen.tsx b/apps/wallet-mobile/src/Staking/FailedTx/FailedTxScreen.tsx
@@ -68,33 +68,32 @@ const useNavigateTo = () => {
 }
 
 const useStyles = () => {
-  const {theme} = useTheme()
-  const {color, typography, padding} = theme
+  const {atoms, color} = useTheme()
   const styles = StyleSheet.create({
     container: {
       flex: 1,
       alignItems: 'center',
       justifyContent: 'center',
-      ...padding['l'],
+      ...atoms.p_lg,
     },
     title: {
-      color: color.gray.max,
-      ...typography['heading-3-medium'],
+      color: color.gray_cmax,
+      ...atoms.heading_3_medium,
       ...atoms.px_xs,
       textAlign: 'center',
     },
     text: {
-      color: color.gray[600],
-      ...typography['body-2-m-regular'],
+      color: color.gray_c600,
+      ...atoms.body_2_md_regular,
       textAlign: 'center',
       maxWidth: 330,
     },
     button: {
       ...atoms.p_lg,
-      ...typography['button-2-m'],
+      ...atoms.button_2_md,
     },
     outlineText: {
-      color: theme.color.primary[500],
+      color: color.primary_c500,
     },
   })
   return styles

diff --git a/apps/wallet-mobile/src/Staking/PoolTransition/PoolTransitionModal.tsx b/apps/wallet-mobile/src/Staking/PoolTransition/PoolTransitionModal.tsx
@@ -136,64 +136,64 @@ export const PoolTransitionModal = ({
 }
 
 const useStyles = () => {
-  const {theme} = useTheme()
+  const {atoms, color} = useTheme()
 
   const styles = StyleSheet.create({
     modal: {
-      backgroundColor: theme.color['bottom-sheet-background'],
+      backgroundColor: color.web_overlay,
       alignItems: 'center',
       flex: 1,
       justifyContent: 'flex-end',
     },
     card: {
       borderRadius: 8,
       gap: 8,
-      ...theme.padding.l,
+      ...atoms.p_lg,
       width: '100%',
       overflow: 'hidden',
     },
     border: {
       borderWidth: 1,
-      borderColor: theme.color.gray['300'],
+      borderColor: color.gray_c300,
     },
     warningBorder: {
       borderWidth: 1,
-      borderColor: theme.color.magenta['500'],
+      borderColor: color.sys_magenta_c500,
     },
     poolTicker: {
       alignItems: 'center',
       flexDirection: 'row',
       gap: 8,
     },
     poolTickerText: {
-      ...theme.typography['body-1-l-regular'],
-      color: theme.color.primary[600],
+      ...atoms.body_1_lg_regular,
+      color: color.primary_c600,
     },
     pic: {
       width: 24,
       height: 24,
       borderRadius: 100,
     },
     label: {
-      ...theme.typography['body-1-l-regular'],
-      color: theme.color.gray['600'],
+      ...atoms.body_1_lg_regular,
+      color: color.gray_c600,
     },
     currentValue: {
-      ...theme.typography['body-1-l-regular'],
-      color: theme.color.gray['max'],
+      ...atoms.body_1_lg_regular,
+      color: color.gray_cmax,
     },
     suggestedValue: {
-      ...theme.typography['body-1-l-medium'],
-      color: theme.color.gray['max'],
+      ...atoms.body_1_lg_medium,
+      color: color.gray_cmax,
     },
     warning: {
-      color: theme.color.magenta['500'],
+      color: color.sys_magenta_c500,
     },
     warningText: {
-      ...theme.typography['body-1-l-regular'],
+      ...atoms.body_1_lg_regular,
     },
     warningTimer: {
-      ...theme.typography['body-1-l-medium'],
+      ...atoms.body_1_lg_medium,
     },
     row: {
       width: '100%',
@@ -204,25 +204,27 @@ const useStyles = () => {
     },
     actions: {
       alignSelf: 'stretch',
-      backgroundColor: theme.color.gray.min,
+      backgroundColor: color.gray_cmin,
       gap: 4,
     },
     details: {
-      ...theme.typography['body-1-l-regular'],
-      color: theme.color.gray_c900,
+      ...atoms.body_1_lg_regular,
+      color: color.gray_c900,
       width: '100%',
     },
     outlineButton: {
-      color: theme.color.gray[900],
-      ...theme.typography['button-2-m'],
+      color: color.gray_c900,
+      ...atoms.button_2_md,
+      textTransform: 'none',
     },
     button: {
-      ...theme.typography['button-1-l'],
+      ...atoms.button_1_lg,
+      textTransform: 'none',
     },
   })
 
   const colors = {
-    backgroundGradientCard: theme.color.gradients['blue-green'],
+    backgroundGradientCard: color.bg_gradient_1,
   }
 
   return {styles, colors} as const

diff --git a/apps/wallet-mobile/src/Staking/PoolTransition/PoolTransitionNotice.tsx b/apps/wallet-mobile/src/Staking/PoolTransition/PoolTransitionNotice.tsx
@@ -19,7 +19,7 @@ export const PoolTransitionNotice = () => {
   return (
     <View style={styles.notice}>
       <Row>
-        <Icon.Warning size={20} color={color.magenta[500]} />
+        <Icon.Warning size={20} color={color.sys_magenta_c500} />
       </Row>
 
       <Text style={styles.text}>
@@ -44,28 +44,27 @@ export const PoolTransitionNotice = () => {
 }
 
 const useStyles = () => {
-  const {theme} = useTheme()
-  const {color, typography} = theme
+  const {color, atoms} = useTheme()
 
   const styles = StyleSheet.create({
     notice: {
       flex: 1,
       padding: 16,
       gap: 12,
-      backgroundColor: color.magenta[100],
+      backgroundColor: color.sys_magenta_c100,
       borderRadius: 8,
     },
     text: {
-      color: color.gray.max,
-      ...typography['body-2-m-regular'],
+      color: color.gray_cmax,
+      ...atoms.body_2_md_regular,
     },
     bold: {
-      ...typography['body-2-m-medium'],
+      ...atoms.body_2_md_medium,
     },
     noticeButton: {
       flexGrow: 0,
-      backgroundColor: color.magenta[500],
-      ...typography['button-2-m'],
+      backgroundColor: color.sys_magenta_c500,
+      ...atoms.button_2_md,
     },
     actions: {
       flexDirection: 'row',

diff --git a/apps/wallet-mobile/src/Staking/PoolWarningModal/PoolWarningModal.tsx b/apps/wallet-mobile/src/Staking/PoolWarningModal/PoolWarningModal.tsx
@@ -82,8 +82,7 @@ const BulletPointItem = ({textRow, style}: BulletPointProps) => {
 }
 
 const useStyles = () => {
-  const {theme} = useTheme()
-  const {padding, typography} = theme
+  const {atoms} = useTheme()
   const styles = StyleSheet.create({
     scrollView: {
       ...atoms.pr_sm,

diff --git a/apps/wallet-mobile/src/TxHistory/BalanceBanner.tsx b/apps/wallet-mobile/src/TxHistory/BalanceBanner.tsx
@@ -68,8 +68,7 @@ const Row = ({children}: {children: React.ReactNode}) => {
 }
 
 const useStyles = () => {
-  const {theme} = useTheme()
-  const {color, typography} = theme
+  const {atoms, color} = useTheme()
   const styles = StyleSheet.create({
     walletIcon: {
       height: 40,

diff --git a/apps/wallet-mobile/src/TxHistory/LockedDeposit.tsx b/apps/wallet-mobile/src/TxHistory/LockedDeposit.tsx
@@ -71,8 +71,7 @@ const useStrings = () => {
 }
 
 const useStyles = () => {
-  const {theme} = useTheme()
-  const {color, typography} = theme
+  const {atoms, color} = useTheme()
   const styles = StyleSheet.create({
     root: {
       flexDirection: 'row',

diff --git a/apps/wallet-mobile/src/TxHistory/TxDetails/AssetListSend.style.ts b/apps/wallet-mobile/src/TxHistory/TxDetails/AssetListSend.style.ts
@@ -2,8 +2,7 @@ import {useTheme} from '@yoroi/theme'
 import {StyleSheet} from 'react-native'
 
 export const useSendStyles = () => {
-  const {theme} = useTheme()
-  const {color, typography, padding} = theme
+  const {atoms, color} = useTheme()
   const styles = StyleSheet.create({
     assetHeading: {
       color: color.gray_cmax,

diff --git a/apps/wallet-mobile/src/TxHistory/TxDetails/AssetListTransaction.style.ts b/apps/wallet-mobile/src/TxHistory/TxDetails/AssetListTransaction.style.ts
@@ -2,8 +2,7 @@ import {useTheme} from '@yoroi/theme'
 import {StyleSheet} from 'react-native'
 
 export const useAssetListStyles = () => {
-  const {theme} = useTheme()
-  const {color, typography} = theme
+  const {atoms, color} = useTheme()
   const styles = StyleSheet.create({
     assetHeading: {
       color: color.gray_cmax,

diff --git a/apps/wallet-mobile/src/TxHistory/TxDetails/Base.style.ts b/apps/wallet-mobile/src/TxHistory/TxDetails/Base.style.ts
@@ -2,8 +2,7 @@ import {useTheme} from '@yoroi/theme'
 import {StyleSheet} from 'react-native'
 
 export const useBaseStyles = () => {
-  const {theme} = useTheme()
-  const {color, typography} = theme
+  const {atoms, color} = useTheme()
 
   const styles = StyleSheet.create({
     assetHeading: {

diff --git a/apps/wallet-mobile/src/TxHistory/TxHistoryList/EmptyHistory.tsx b/apps/wallet-mobile/src/TxHistory/TxHistoryList/EmptyHistory.tsx
@@ -26,8 +26,7 @@ export const EmptyHistory = () => {
 }
 
 const useStyles = () => {
-  const {theme} = useTheme()
-  const {color, typography} = theme
+  const {atoms, color} = useTheme()
   const styles = StyleSheet.create({
     empty: {
       justifyContent: 'center',

diff --git a/apps/wallet-mobile/src/TxHistory/TxHistoryList/TxHistoryList.tsx b/apps/wallet-mobile/src/TxHistory/TxHistoryList/TxHistoryList.tsx
@@ -105,8 +105,7 @@ const getTransactionsByDate = (transactions: Record<string, TransactionInfo>) =>
     .value()
 
 const useStyles = () => {
-  const {theme} = useTheme()
-  const {padding} = theme
+  const {atoms} = useTheme()
   const styles = StyleSheet.create({
     container: {
       flex: 1,