refactor - wip

Emurgo · Apr 29, 2024 · 5af7ea1 · 5af7ea1
1 parent 7b166f5
commit 5af7ea1
Show file tree

Hide file tree

Showing 92 changed files with 250 additions and 294 deletions.
diff --git a/apps/wallet-mobile/.storybook/stories/Button/ExampleButton.js b/apps/wallet-mobile/.storybook/stories/Button/ExampleButton.js
@@ -13,8 +13,7 @@ export const ExampleButton = ({onPress, disabled, text}) => {
 }
 
 const useStyles = () => {
-  const {theme} = useTheme()
-  const {color, atoms} = theme
+  const {color, atoms} = useTheme()
   const styles = StyleSheet.create({
     container: {
       ...atoms.px_lg,

diff --git a/apps/wallet-mobile/src/Catalyst/QrCode.tsx b/apps/wallet-mobile/src/Catalyst/QrCode.tsx
@@ -130,8 +130,7 @@ const messages = defineMessages({
 })
 
 const useStyles = () => {
-  const {theme} = useTheme()
-  const {color, atoms} = theme
+  const {color, atoms} = useTheme()
   const styles = StyleSheet.create({
     safeAreaView: {
       flex: 1,

diff --git a/apps/wallet-mobile/src/Dashboard/Dashboard.tsx b/apps/wallet-mobile/src/Dashboard/Dashboard.tsx
@@ -244,8 +244,7 @@ const messages = defineMessages({
 })
 
 const useStyles = () => {
-  const {theme} = useTheme()
-  const {color} = theme
+  const {color} = useTheme()
 
   const styles = StyleSheet.create({
     root: {
@@ -257,7 +256,7 @@ const useStyles = () => {
     },
     scrollView: {
       flex: 1,
-      backgroundColor: color.gray.min,
+      backgroundColor: color.gray_cmin,
     },
     contentContainer: {
       paddingTop: 16,
@@ -269,13 +268,13 @@ const useStyles = () => {
     },
     actions: {
       flexDirection: 'row',
-      backgroundColor: color.gray.min,
+      backgroundColor: color.gray_cmin,
       padding: 16,
       borderTopLeftRadius: 8,
       borderTopRightRadius: 8,
       elevation: 1,
       shadowOpacity: 0.06,
-      shadowColor: color['black-static'],
+      shadowColor: color.black_static,
       shadowRadius: 6,
       shadowOffset: {width: 0, height: -8},
     },

diff --git a/apps/wallet-mobile/src/Dashboard/DashboardNavigator.tsx b/apps/wallet-mobile/src/Dashboard/DashboardNavigator.tsx
@@ -19,13 +19,13 @@ export const DashboardNavigator = () => {
   const wallet = useSelectedWallet()
   const walletName = useWalletName(wallet)
   const strings = useStrings()
-  const {theme} = useTheme()
+  const {color, atoms} = useTheme()
 
   const manager = useGovernanceManagerMaker()
 
   return (
     <GovernanceProvider manager={manager}>
-      <Stack.Navigator screenOptions={defaultStackNavigationOptions(theme)}>
+      <Stack.Navigator screenOptions={defaultStackNavigationOptions(atoms, color)}>
         <Stack.Screen
           name="staking-dashboard-main"
           component={Dashboard}

diff --git a/apps/wallet-mobile/src/Dashboard/EpochProgress.tsx b/apps/wallet-mobile/src/Dashboard/EpochProgress.tsx
@@ -68,8 +68,7 @@ const messages = defineMessages({
 })
 
 const useStyles = () => {
-  const {theme} = useTheme()
-  const {color, typography, padding} = theme
+  const {atoms, color} = useTheme()
   const styles = StyleSheet.create({
     wrapper: {},
     stats: {
@@ -87,7 +86,7 @@ const useStyles = () => {
     },
     label: {
       color: color.gray_c900,
-      ...padding['r-m'],
+      ...atoms.pr_md,
       ...atoms.body_2_md_regular,
     },
     value: {

diff --git a/apps/wallet-mobile/src/Dashboard/WithdrawStakingRewards/TransferSummary/TransferSummary.tsx b/apps/wallet-mobile/src/Dashboard/WithdrawStakingRewards/TransferSummary/TransferSummary.tsx
@@ -190,11 +190,10 @@ const messages = defineMessages({
 })
 
 const useStyles = () => {
-  const {theme} = useTheme()
-  const {color, typography, padding} = theme
+  const {atoms, color} = useTheme()
   const styles = StyleSheet.create({
     item: {
-      ...padding['b-xs'],
+      ...atoms.pb_xs,
     },
     balanceAmount: {
       color: color.secondary_c500,

diff --git a/apps/wallet-mobile/src/HW/LedgerConnect/DeviceItem/DeviceItem.tsx b/apps/wallet-mobile/src/HW/LedgerConnect/DeviceItem/DeviceItem.tsx
@@ -38,12 +38,11 @@ export const DeviceItem = ({device, onSelect, disabled}: Props) => {
 }
 
 const useStyles = () => {
-  const {theme} = useTheme()
-  const {color, padding, typography} = theme
+  const {atoms, color} = useTheme()
   const styles = StyleSheet.create({
     deviceItem: {
       ...atoms.py_lg,
-      ...padding['x-xxl'],
+      ...atoms.px__2xl,
       marginVertical: 8,
       marginHorizontal: 16,
       borderColor: color.secondary_c500,

diff --git a/apps/wallet-mobile/src/NftDetails/NftDetails.tsx b/apps/wallet-mobile/src/NftDetails/NftDetails.tsx
@@ -292,7 +292,7 @@ const useStyles = () => {
       flexDirection: 'row',
     },
     title: {
-      ...(atoms.body - 1 - lg - medium),
+      ...atoms.body_1_lg_medium,
     },
     name: {
       color: color.gray_c600,

diff --git a/apps/wallet-mobile/src/Staking/DelegationConfirmation/DelegationConfirmation.tsx b/apps/wallet-mobile/src/Staking/DelegationConfirmation/DelegationConfirmation.tsx
@@ -179,16 +179,15 @@ const approximateReward = (stakedQuantity: Balance.Quantity): Balance.Quantity =
 }
 
 const useStyles = () => {
-  const {theme} = useTheme()
-  const {color, padding, typography} = theme
+  const {atoms, color} = useTheme()
   const styles = StyleSheet.create({
     container: {
       flex: 1,
       backgroundColor: color.gray_cmin,
     },
     scrollView: {
       ...atoms.px_lg,
-      ...padding['b-xl'],
+      ...atoms.pb_xl,
       flex: 1,
     },
     itemBlock: {
@@ -203,7 +202,7 @@ const useStyles = () => {
     },
     rewards: {
       marginTop: 5,
-      ...(atoms.body - 1 - lg - medium),
+      ...atoms.body_1_lg_medium,
       color: color.primary_c600,
     },
     fees: {

diff --git a/apps/wallet-mobile/src/Staking/FailedTx/FailedTxScreen.tsx b/apps/wallet-mobile/src/Staking/FailedTx/FailedTxScreen.tsx
@@ -80,7 +80,7 @@ const useStyles = () => {
     title: {
       color: color.gray.max,
       ...typography['heading-3-medium'],
-      ...padding['x-s'],
+      ...atoms.px_xs,
       textAlign: 'center',
     },
     text: {
@@ -90,7 +90,7 @@ const useStyles = () => {
       maxWidth: 330,
     },
     button: {
-      ...padding['x-l'],
+      ...atoms.p_lg,
       ...typography['button-2-m'],
     },
     outlineText: {

diff --git a/apps/wallet-mobile/src/Staking/PoolDetails/PoolDetailScreen.tsx b/apps/wallet-mobile/src/Staking/PoolDetails/PoolDetailScreen.tsx
@@ -43,8 +43,7 @@ export const PoolDetailScreen = ({onPressDelegate, disabled = false}: Props) =>
 }
 
 const useStyles = () => {
-  const {theme} = useTheme()
-  const {color, padding, typography} = theme
+  const {atoms, color} = useTheme()
   const styles = StyleSheet.create({
     content: {
       flex: 1,

diff --git a/apps/wallet-mobile/src/Staking/PoolTransition/PoolTransitionModal.tsx b/apps/wallet-mobile/src/Staking/PoolTransition/PoolTransitionModal.tsx
@@ -209,7 +209,7 @@ const useStyles = () => {
     },
     details: {
       ...theme.typography['body-1-l-regular'],
-      color: theme.color.gray['900'],
+      color: theme.color.gray_c900,
       width: '100%',
     },
     outlineButton: {

diff --git a/apps/wallet-mobile/src/TxHistory/ActionsBanner.tsx b/apps/wallet-mobile/src/TxHistory/ActionsBanner.tsx
@@ -187,8 +187,7 @@ export const ActionsBanner = ({disabled = false}: {disabled: boolean}) => {
 }
 
 const useStyles = () => {
-  const {theme} = useTheme()
-  const {color, padding, typography} = theme
+  const {atoms, color} = useTheme()
   const styles = StyleSheet.create({
     centralized: {
       alignItems: 'center',
@@ -207,9 +206,9 @@ const useStyles = () => {
       backgroundColor: color.primary_c500,
     },
     actionLabel: {
-      ...padding['t-s'],
-      color: color.gray_cmax,
+      ...atoms.pt_sm,
       ...atoms.body_3_sm_medium,
+      color: color.gray_cmax,
     },
     disabled: {
       opacity: 0.5,

diff --git a/apps/wallet-mobile/src/TxHistory/AssetList/ChipButton/ChipButton.tsx b/apps/wallet-mobile/src/TxHistory/AssetList/ChipButton/ChipButton.tsx
@@ -20,8 +20,7 @@ export const ChipButton = ({label, onPress, disabled, selected}: Props) => {
 }
 
 const useStyles = () => {
-  const {theme} = useTheme()
-  const {color, padding, typography} = theme
+  const {atoms, color} = useTheme()
   const styles = StyleSheet.create({
     button: {
       justifyContent: 'center',
@@ -30,8 +29,8 @@ const useStyles = () => {
     },
     label: {
       color: color.gray_c600,
-      ...padding['x-m'],
-      ...padding['y-xs'],
+      ...atoms.px_md,
+      ...atoms.py_xs,
       ...atoms.body_2_md_regular,
     },
     selected: {

diff --git a/apps/wallet-mobile/src/TxHistory/BalanceBanner.tsx b/apps/wallet-mobile/src/TxHistory/BalanceBanner.tsx
@@ -82,7 +82,7 @@ const useStyles = () => {
       alignItems: 'center',
     },
     balanceText: {
-      ...(atoms.body - 1 - lg - medium),
+      ...atoms.body_1_lg_medium,
       color: color.gray_c900,
     },
     centered: {

diff --git a/apps/wallet-mobile/src/TxHistory/TxDetails/TxDetails.tsx b/apps/wallet-mobile/src/TxHistory/TxDetails/TxDetails.tsx
@@ -428,8 +428,7 @@ const messages = defineMessages({
 })
 
 const useStyles = () => {
-  const {theme} = useTheme()
-  const {color, padding, typography} = theme
+  const {atoms, color} = useTheme()
   const styles = StyleSheet.create({
     container: {
       flex: 1,
@@ -446,12 +445,12 @@ const useStyles = () => {
       fontWeight: '500',
     },
     label: {
-      ...padding['t-l'],
+      ...atoms.pt_lg,
       marginBottom: 8,
     },
     assetsExpandable: {
       ...atoms.pt_md,
-      ...padding['b-xl'],
+      ...atoms.pb_xl,
       flexDirection: 'row',
       justifyContent: 'space-between',
       alignContent: 'center',

diff --git a/apps/wallet-mobile/src/TxHistory/TxHistoryList/EmptyHistory.tsx b/apps/wallet-mobile/src/TxHistory/TxHistoryList/EmptyHistory.tsx
@@ -34,7 +34,7 @@ const useStyles = () => {
       alignItems: 'center',
     },
     emptyText: {
-      ...(atoms.body - 1 - lg - medium),
+      ...atoms.body_1_lg_medium,
       color: color.gray_c900,
       width: '55%',
       textAlign: 'center',

diff --git a/apps/wallet-mobile/src/TxHistory/TxHistoryList/TxHistoryList.tsx b/apps/wallet-mobile/src/TxHistory/TxHistoryList/TxHistoryList.tsx
@@ -117,7 +117,7 @@ const useStyles = () => {
       height: 'auto',
     },
     dayHeaderRoot: {
-      ...padding['b-xs'],
+      ...atoms.pb_xs,
       ...atoms.px_lg,
     },
   })

diff --git a/apps/wallet-mobile/src/components/SafeArea.tsx b/apps/wallet-mobile/src/components/SafeArea.tsx
@@ -14,11 +14,11 @@ export const SafeArea = ({children, ...rest}: SafeAreaViewProps) => {
 const safeAreaEdges = ['bottom', 'left', 'right', 'bottom'] as const
 
 const useStyles = () => {
-  const {theme} = useTheme()
+  const {color} = useTheme()
   const styles = StyleSheet.create({
     root: {
       flex: 1,
-      backgroundColor: theme.color['white-static'],
+      backgroundColor: color.white_static,
     },
   })
   return styles

diff --git a/apps/wallet-mobile/src/features/Claim/useCases/ShowSuccessScreen.tsx b/apps/wallet-mobile/src/features/Claim/useCases/ShowSuccessScreen.tsx
@@ -147,8 +147,7 @@ export const AmountList = ({amounts}: {amounts: Balance.Amounts}) => {
 }
 
 const useStyles = () => {
-  const {theme} = useTheme()
-  const {color, padding, typography} = theme
+  const {atoms, color} = useTheme()
   const styles = StyleSheet.create({
     header: {
       alignItems: 'center',
@@ -157,7 +156,7 @@ const useStyles = () => {
     title: {
       color: color.gray_cmax,
       ...atoms.heading_3_medium,
-      ...padding['xs'],
+      ...atoms.px_sm,
       textAlign: 'center',
     },
     message: {

diff --git a/apps/wallet-mobile/src/features/Discover/BrowserNavigator.tsx b/apps/wallet-mobile/src/features/Discover/BrowserNavigator.tsx
@@ -25,12 +25,12 @@ export const BrowserNavigator = () => {
 }
 
 const useStyles = () => {
-  const {theme} = useTheme()
+  const {color} = useTheme()
 
   const styles = StyleSheet.create({
     root: {
       flex: 1,
-      backgroundColor: theme.color.white_static,
+      backgroundColor: color.white_static,
     },
   })
 

diff --git a/apps/wallet-mobile/src/features/Discover/DiscoverNavigator.tsx b/apps/wallet-mobile/src/features/Discover/DiscoverNavigator.tsx
@@ -17,7 +17,7 @@ import {SelectDappFromListScreen} from './useCases/SelectDappFromList/SelectDapp
 const Stack = createStackNavigator<DiscoverRoutes>()
 
 export const DiscoverNavigator = () => {
-  const {theme} = useTheme()
+  const {atoms, color} = useTheme()
   const strings = useStrings()
 
   const appStorage = useAsyncStorage()
@@ -29,7 +29,7 @@ export const DiscoverNavigator = () => {
       <BrowserProvider>
         <Stack.Navigator
           screenOptions={{
-            ...defaultStackNavigationOptions(theme),
+            ...defaultStackNavigationOptions(atoms, color),
             headerLeft: () => null,
             detachPreviousScreen: false /* https://github.com/react-navigation/react-navigation/issues/9883 */,
             gestureEnabled: true,

diff --git a/apps/wallet-mobile/src/features/Discover/common/LabelCategoryDApp.tsx b/apps/wallet-mobile/src/features/Discover/common/LabelCategoryDApp.tsx
@@ -24,23 +24,22 @@ export const LabelCategoryDApp = ({category}: Props) => {
 }
 
 const useStyles = () => {
-  const {theme} = useTheme()
-  const {color, typography, padding} = theme
+  const {atoms, color} = useTheme()
 
   const styles = StyleSheet.create({
     labelGradientBox: {
       borderRadius: 999,
-      ...padding['xxs'],
+      ...atoms.p_2xs,
     },
     labelContainer: {
       backgroundColor: color.white_static,
-      ...padding['x-s'],
+      ...atoms.px_xs,
       paddingVertical: 3,
       borderRadius: 999,
     },
     labelText: {
       ...atoms.body_3_sm_medium,
-      color: color.primary['600'],
+      color: color.primary_c600,
     },
   })
 

diff --git a/apps/wallet-mobile/src/features/Discover/common/LabelConnected.tsx b/apps/wallet-mobile/src/features/Discover/common/LabelConnected.tsx
@@ -12,13 +12,12 @@ export const LabelConnected = () => {
 }
 
 const useStyles = () => {
-  const {theme} = useTheme()
-  const {color, padding, typography} = theme
+  const {atoms, color} = useTheme()
 
   const styles = StyleSheet.create({
     labelContainer: {
       backgroundColor: color.secondary_c600,
-      ...padding['x-s'],
+      ...atoms.px_sm,
       paddingVertical: 3,
       borderRadius: 999,
     },