move shared colors to a separate file

Author: rodrigoncalves

src/core/config.ts

@@ -6,7 +6,7 @@ import { constants } from 'ethers'
 
 import { ChainID } from 'lib/eoaWallet'
 
-import { chainTypesById } from 'shared/constants/chainConstants'
+import { chainTypesById } from 'shared/constants'
 import { SETTINGS } from 'core/types'
 import { TokenSymbol } from 'screens/home/TokenImage'
 import { rbtcMap } from 'shared/utils'

src/screens/createKeys/import/ImportMasterKeyScreen.tsx

@@ -48,7 +48,7 @@ const StatusIcon = ({ status }: { status: StatusActions }) => {
     backgroundColor:
       status === StatusActions.SUCCESS
         ? sharedColors.successLight
-        : sharedColors.errorBackground,
+        : sharedColors.error,
     borderRadius: 50,
   }
   switch (status) {

src/screens/settings/SettingsScreen.tsx

@@ -17,7 +17,7 @@ import { castStyle } from 'shared/utils'
 import { selectChainId } from 'store/slices/settingsSlice'
 import { selectPin } from 'store/slices/persistentDataSlice'
 import { useAppSelector } from 'store/storeUtils'
-import { ChainTypeEnum, chainTypesById } from 'shared/constants/chainConstants'
+import { ChainTypeEnum, chainTypesById } from 'shared/constants'
 import { GlobalErrorHandlerContext } from 'components/GlobalErrorHandler/GlobalErrorHandlerContext'
 import { getCurrentChainId, setCurrentChainId } from 'storage/ChainStorage'
 import { WalletContext } from 'shared/wallet'

src/shared/constants/colors.ts

@@ -0,0 +1,51 @@
+export const sharedColors = {
+  primary: '#4B5CF0',
+  primaryDark: '#4250CC', // used over the primary color
+  secondary: '#121212',
+  success: '#79C600',
+  successLight: '#59FF9C',
+  connected: '#01CB9F',
+  warning: '#FF9100',
+  danger: '#E94141',
+  dangerLight: '#ED6060',
+  error: '#FF3559',
+  black: '#000000',
+  white: '#FFFFFF',
+  borderColor: '#575757',
+  background: {
+    primary: '#000',
+    secondary: '#252525',
+    accent: '#3A3A3A',
+    highlight: '#575757',
+    light: '#FBFBFB',
+  },
+  input: {
+    active: '#3A3A3A',
+    inactive: '#252525',
+  },
+  text: {
+    primary: '#fff',
+    secondary: '#000',
+    label: '#B8B8B8',
+    placeholder: '#FBFBFB',
+    link: '#4152E6',
+  },
+  button: {
+    primaryBackground: '#fff',
+    primaryText: '#000',
+    secondaryBackground: '#252525',
+    secondaryText: '#fff',
+  },
+  stepper: {
+    active: '#4B5CF0',
+    inactive: '#3A3A3A',
+  },
+}
+
+export const tokenColors = {
+  rbtc: '#71BD35',
+  btc: '#EB7D00',
+  rif: '#4152E6',
+  rdoc: '#11B55C',
+  generic: '#252525',
+}

src/shared/constants/index.ts

@@ -1,6 +1,8 @@
-import { Dimensions, StyleSheet } from 'react-native'
+import { Dimensions } from 'react-native'
 
-import { castStyle } from '../utils'
+export { ChainTypeEnum, chainTypesById } from './chainConstants'
+export { sharedColors, tokenColors } from './colors'
+export { sharedStyles } from './styles'
 
 export const testIDs = {
   wordInput: 'input.wordInput',
@@ -14,189 +16,10 @@ export const testIDs = {
   newContact: 'newContact',
 }
 
-export const sharedColors = {
-  primary: '#4B5CF0',
-  primaryDark: '#4250CC', // used over the primary color
-  secondary: '#121212',
-  success: '#79C600',
-  successLight: '#59FF9C',
-  connected: '#01CB9F',
-  warning: '#FF9100',
-  danger: '#E94141',
-  dangerLight: '#ED6060',
-  white: '#FFFFFF',
-  borderColor: '#575757',
-  // subTitle: '#FBFBFB',
-  // tokenBackground: '#1E1E1E',
-  black: '#000000',
-  // qrColor: '#DBE3FF',
-  errorBackground: '#FF3559',
-  // lightPurple: '#DAE2FF',
-  // blue: '#6053F8',
-
-  background: {
-    primary: '#000',
-    secondary: '#252525',
-    accent: '#3A3A3A',
-    highlight: '#575757',
-    light: '#FBFBFB',
-  },
-
-  input: {
-    active: '#3A3A3A',
-    inactive: '#252525',
-  },
-
-  text: {
-    primary: '#fff',
-    secondary: '#000',
-    label: '#B8B8B8',
-    placeholder: '#FBFBFB',
-    link: '#4152E6',
-  },
-
-  button: {
-    primaryBackground: '#fff',
-    primaryText: '#000',
-    secondaryBackground: '#252525',
-    secondaryText: '#fff',
-  },
-
-  stepper: {
-    active: '#4B5CF0',
-    inactive: '#3A3A3A',
-  },
-}
-
-export const tokenColors = {
-  rbtc: '#71BD35',
-  btc: '#EB7D00',
-  rif: '#4152E6',
-  rdoc: '#11B55C',
-  generic: '#252525',
-}
 export const defaultFontSize = 16
 export const defaultIconSize = 16
 export const noop = () => {}
 
-export const sharedStyles = StyleSheet.create({
-  displayNone: castStyle.view({
-    display: 'none',
-  }),
-  flex: castStyle.view({
-    flex: 1,
-  }),
-  flexGrow: castStyle.view({
-    flexGrow: 1,
-  }),
-  flexAlignEnd: castStyle.view({
-    alignSelf: 'flex-end',
-  }),
-  row: castStyle.view({
-    flexDirection: 'row',
-  }),
-  textCenter: castStyle.text({
-    textAlign: 'center',
-  }),
-  textLeft: castStyle.text({
-    textAlign: 'left',
-  }),
-  textRight: castStyle.text({
-    textAlign: 'right',
-  }),
-  contentCenter: castStyle.view({
-    justifyContent: 'center',
-    alignItems: 'center',
-  }),
-  alignCenter: castStyle.view({
-    alignItems: 'center',
-  }),
-  marginLeft24: castStyle.view({ marginLeft: 24 }),
-  marginTop40: castStyle.view({ marginTop: 40 }),
-  marginRight24: castStyle.view({ marginRight: 24 }),
-  paddingHorizontal24: castStyle.view({
-    paddingHorizontal: 24,
-  }),
-  screen: castStyle.view({
-    flex: 1,
-    backgroundColor: sharedColors.background.primary,
-    paddingHorizontal: 24,
-  }),
-  noPadding: castStyle.view({ padding: 0 }),
-  selfCenter: castStyle.view({
-    alignSelf: 'center',
-  }),
-  widthHalfWidth: castStyle.view({
-    width: '50%',
-  }),
-  widthFullWidth: castStyle.view({
-    width: '100%',
-  }),
-  fontBoldText: castStyle.text({
-    fontWeight: 'bold',
-  }),
-  appButtonBottom: castStyle.view({
-    position: 'absolute',
-    bottom: 30,
-    left: 24,
-    right: 24,
-  }),
-  /* GRID */
-  column12: {
-    display: 'flex',
-    width: '100%',
-  },
-  column10: {
-    display: 'flex',
-    width: '83.333%',
-  },
-  column9: {
-    display: 'flex',
-    width: '75%',
-  },
-  column8: {
-    display: 'flex',
-    width: '66.667%',
-  },
-  column7: {
-    display: 'flex',
-    width: '56.667%',
-  },
-  column6: {
-    display: 'flex',
-    width: '50%',
-  },
-  column5: {
-    display: 'flex',
-    width: '41.667%',
-  },
-  column4: {
-    display: 'flex',
-    width: '33%',
-  },
-  column3: {
-    display: 'flex',
-    width: '25%',
-  },
-  column2: {
-    display: 'flex',
-    width: '16.667%',
-  },
-  column1: {
-    display: 'flex',
-    width: '8.333%',
-  },
-  column: {
-    display: 'flex',
-  },
-
-  offset1: {
-    marginLeft: '8.3%',
-  },
-  offset3: {
-    marginLeft: '25%',
-  },
-})
 export const WINDOW_WIDTH = Dimensions.get('window').width
 export const WINDOW_HEIGHT = Dimensions.get('window').height
 export const SLIDER_WIDTH = Math.round(WINDOW_WIDTH * 0.8)