US-2150: Developers need an easy way to change the colors of the wallet

package.json

@@ -86,7 +86,7 @@
     "react-native-screens": "^3.29.0",
     "react-native-screenshot-prevent": "^1.1.9",
     "react-native-ssl-public-key-pinning": "^1.1.3",
-    "react-native-svg": "^14.1.0",
+    "react-native-svg": "13.4.0",
     "react-native-vector-icons": "^10.0.3",
     "react-native-vision-camera": "^3.9.0",
     "react-redux": "^8.0.5",

src/components/BarButtonGroup/BarButtonGroup.tsx

@@ -24,7 +24,11 @@ export const BarButtonGroupIcon = ({
     onPress={onPress}
     style={styles.iconContainerStyle}
     accessibilityLabel={iconName}>
-    <IconComponent name={iconName} color="white" size={size} />
+    <IconComponent
+      name={iconName}
+      color={sharedColors.text.primary}
+      size={size}
+    />
   </AppTouchable>
 )
 

src/components/BasicRow/BasicRowWithContact.tsx

@@ -1,6 +1,8 @@
 import { BasicRow, BasicRowProps } from 'components/BasicRow/index'
 import { Contact } from 'shared/types'
 
+import UserIcon from '../icons/UserIcon'
+
 export interface BasicRowWithContact extends BasicRowProps {
   contact: Contact | undefined
 }
@@ -13,7 +15,7 @@ export const BasicRowWithContact = ({
     {...props}
     avatar={{
       name: contact?.name,
-      imageSource: contact ? undefined : require('src/images/user.png'),
+      icon: contact ? undefined : <UserIcon />,
     }}
   />
 )

src/components/BasicRow/index.tsx

@@ -153,7 +153,7 @@ const styles = StyleSheet.create({
   container: castStyle.view({
     marginTop: 10,
     paddingVertical: 10,
-    backgroundColor: sharedColors.black,
+    backgroundColor: sharedColors.background.primary,
     height: 'auto',
     flexDirection: 'row',
   }),
@@ -181,7 +181,7 @@ const styles = StyleSheet.create({
   usdText: {
     textAlign: 'right',
     flex: 1,
-    color: sharedColors.labelLight,
+    color: sharedColors.text.label,
   },
   horizontalPadding: {
     paddingRight: 1,

src/components/GlobalErrorHandler/GlobalErrorHandlerView.tsx

@@ -6,7 +6,6 @@ import { useTranslation } from 'react-i18next'
 import { sharedColors, sharedStyles } from 'src/shared/constants'
 import { castStyle } from 'shared/utils'
 
-import { colors } from '../../styles'
 import ContentCopyMaterialIcon from '../icons/ContentCopyMaterialIcon'
 import { Typography } from '../typography'
 import { useGlobalErrorContext } from './GlobalErrorHandlerContext'
@@ -21,13 +20,14 @@ const GlobalErrorHandlerView: React.FC<GlobalErrorHandlerViewType> = ({
 }) => {
   const { handleReload, globalError } = useGlobalErrorContext()
   const { t } = useTranslation()
-  const messageToShow: string = message || globalError || ''
+  const messageToShow = message || globalError || ''
 
   const onCopyError = React.useCallback(() => {
     Clipboard.setString(messageToShow)
   }, [messageToShow])
+
   return (
-    <View style={styles.container}>
+    <View style={sharedStyles.screen}>
       <View style={styles.firstView}>
         <Image
           source={require('../../images/error-image.png')}
@@ -48,7 +48,7 @@ const GlobalErrorHandlerView: React.FC<GlobalErrorHandlerViewType> = ({
           <View style={sharedStyles.flex}>
             <Typography
               type={'body2'}
-              color={sharedColors.white}
+              color={sharedColors.text.primary}
               style={styles.errorDetailsText}>
               {t('global_error_details_title')}
             </Typography>
@@ -58,11 +58,14 @@ const GlobalErrorHandlerView: React.FC<GlobalErrorHandlerViewType> = ({
               onPress={onCopyError}>
               <Typography
                 type={'body3'}
-                color={sharedColors.white}
+                color={sharedColors.text.primary}
                 style={sharedStyles.flex}>
                 {t(messageToShow)}
               </Typography>
-              <ContentCopyMaterialIcon color={sharedColors.white} size={25} />
+              <ContentCopyMaterialIcon
+                color={sharedColors.text.primary}
+                size={25}
+              />
             </TouchableOpacity>
           </View>
         )}
@@ -71,7 +74,8 @@ const GlobalErrorHandlerView: React.FC<GlobalErrorHandlerViewType> = ({
             title={'reload'}
             accessibilityLabel={'reload'}
             onPress={handleReload}
-            style={styles.reload}
+            color={sharedColors.button.primaryBackground}
+            textColor={sharedColors.button.primaryText}
           />
         </View>
       </View>
@@ -80,14 +84,6 @@ const GlobalErrorHandlerView: React.FC<GlobalErrorHandlerViewType> = ({
 }
 
 const styles = StyleSheet.create({
-  container: castStyle.view({
-    width: '100%',
-    height: '100%',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: colors.darkPurple3,
-    paddingHorizontal: 40,
-  }),
   firstView: castStyle.view({
     flex: 0.8,
     justifyContent: 'flex-end',
@@ -96,10 +92,6 @@ const styles = StyleSheet.create({
     flex: 1,
     width: '100%',
   }),
-  imageView: castStyle.view({
-    flex: 3,
-    justifyContent: 'flex-end',
-  }),
   textView: castStyle.view({
     flex: 1,
     justifyContent: 'center',
@@ -109,12 +101,12 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   }),
   text: castStyle.text({
-    color: sharedColors.white,
+    color: sharedColors.text.primary,
     marginBottom: 10,
     textAlign: 'center',
   }),
   errorDetailsTouch: castStyle.view({
-    backgroundColor: colors.darkPurple5,
+    backgroundColor: sharedColors.background.secondary,
     height: 65,
     borderRadius: 17,
     padding: 10,
@@ -127,18 +119,11 @@ const styles = StyleSheet.create({
     fontSize: 10,
     marginBottom: 4,
   }),
-  exclamation: castStyle.text({
-    fontSize: 32,
-  }),
   imageStyle: castStyle.image({
     width: '100%',
     height: undefined,
     aspectRatio: 1,
   }),
-  reload: castStyle.view({
-    backgroundColor: colors.background.bustyBlue,
-    width: 150,
-  }),
 })
 
 export default GlobalErrorHandlerView

src/components/InfoBox/index.tsx

@@ -4,16 +4,16 @@ import { useCallback, useState } from 'react'
 import { Typography } from 'components/typography'
 import { AppTouchable } from 'components/appTouchable'
 import { Avatar } from 'components/avatar'
-import { sharedColors } from 'shared/constants'
+import { sharedColors, sharedStyles } from 'shared/constants'
 import { castStyle } from 'shared/utils'
-import { sharedStyles } from 'shared/styles'
 
 interface InfoBoxProps {
   avatar?: string
   title?: string
   description?: string
   buttonText?: string
   onPress?: () => void
+  textColor?: string
   backgroundColor?: string
   avatarBackgroundColor?: string
 }
@@ -24,8 +24,9 @@ export const InfoBox = ({
   description,
   buttonText,
   onPress,
-  backgroundColor = sharedColors.inputInactive,
-  avatarBackgroundColor = sharedColors.qrColor,
+  textColor = sharedColors.text.primary,
+  backgroundColor = sharedColors.primary,
+  avatarBackgroundColor = sharedColors.text.secondary,
 }: InfoBoxProps) => {
   const [shouldHide, setShouldHide] = useState(false)
   const handleOnPress = useCallback(() => {
@@ -47,22 +48,31 @@ export const InfoBox = ({
             sharedStyles.marginBottom,
             { backgroundColor: avatarBackgroundColor },
           ]}
+          letterColor={textColor}
           name={avatar}
           size={80}
         />
       ) : null}
 
       {title ? (
-        <Typography style={sharedStyles.marginBottom} type={'h3'}>
+        <Typography
+          style={sharedStyles.marginBottom}
+          type={'h3'}
+          color={textColor}>
           {title}
         </Typography>
       ) : null}
       {description ? (
-        <Typography type={'body3'}>{description}</Typography>
+        <Typography type={'body3'} color={textColor}>
+          {description}
+        </Typography>
       ) : null}
       {buttonText ? (
         <AppTouchable style={styles.button} onPress={handleOnPress} width={50}>
-          <Typography style={styles.buttonText} type={'body2'}>
+          <Typography
+            style={styles.buttonText}
+            type={'body2'}
+            color={textColor}>
             {buttonText}
           </Typography>
         </AppTouchable>

src/components/Porfolio/PortfolioCard.tsx

@@ -134,7 +134,7 @@ const styles = StyleSheet.create({
     borderRadius: 10,
     margin: 5,
     padding: 12,
-    backgroundColor: sharedColors.inputInactive,
+    backgroundColor: sharedColors.background.secondary,
   },
 })
 
@@ -152,7 +152,7 @@ const selectedCardStyles = StyleSheet.create({
     width: 20,
   }),
   primaryText: castStyle.text({
-    color: sharedColors.white,
+    color: sharedColors.text.primary,
     fontSize: 22,
     paddingTop: 3,
   }),
@@ -179,11 +179,11 @@ const nonSelectedCardStyles = StyleSheet.create({
     marginRight: 3,
   }),
   primaryText: castStyle.text({
-    color: sharedColors.white,
+    color: sharedColors.text.primary,
     fontSize: 16,
   }),
   secondaryText: castStyle.text({
-    color: sharedColors.white,
+    color: sharedColors.text.primary,
     fontSize: 16,
     right: 0,
   }),

src/components/QRCodeScanner/useCheckCameraPermissions.ts

@@ -5,7 +5,7 @@ import { Alert, Linking } from 'react-native'
 import { navigationContainerRef } from 'core/Core'
 
 const checkCameraPermissions = async (t: (text: string) => string) => {
-  const cameraPermission = await Camera.getCameraPermissionStatus()
+  const cameraPermission = Camera.getCameraPermissionStatus()
   if (cameraPermission === 'not-determined') {
     const cameraStatus = await Camera.requestCameraPermission()
     cameraStatus === 'denied' && navigationContainerRef.goBack()

src/components/QRGenerator/QRGenerator.tsx

@@ -19,13 +19,13 @@ interface QRGeneratorProps {
   value: string
   iconProps?: QRIconProps
   imageSource?: ImageSourcePropType
+  containerViewStyle?: ViewStyle
+  testID?: string
   qrWidth?: number
-  qrBackgroundColor?: string
-  qrColor?: string
   qrMargin?: number
+  qrColor?: string
+  qrBackgroundColor?: string
   logoBackgroundColor?: string
-  containerViewStyle?: ViewStyle
-  testID?: string
   accessibilityLabel?: string
 }
 
@@ -45,16 +45,16 @@ interface QRGeneratorProps {
  */
 export const QRGenerator = ({
   value,
-  qrWidth = 248,
   iconProps,
   imageSource,
-  qrBackgroundColor = sharedColors.black,
-  qrColor = sharedColors.white,
-  qrMargin = 10,
   containerViewStyle,
-  logoBackgroundColor,
   testID,
   accessibilityLabel,
+  qrWidth = 248,
+  qrMargin = 10,
+  qrColor = sharedColors.text.primary,
+  qrBackgroundColor = sharedColors.text.secondary,
+  logoBackgroundColor = sharedColors.text.primary,
 }: QRGeneratorProps) => {
   const [width, setWidth] = useState(qrWidth)
   const [iconSource, setIconSource] = useState(imageSource)