From 45c110514fc74b31563594d920f0d357d3713c28 Mon Sep 17 00:00:00 2001
From: Luis Perrone <peronif5@gmail.com>
Date: Mon, 23 Sep 2024 10:58:29 +0800
Subject: [PATCH] Fix some colors

---
 src/features/browser/BrowserWebViewScreen.tsx   | 17 +++++++++--------
 .../home/addNewAccount/AddNewAccountScreen.tsx  |  4 +++-
 src/features/ledger/DeviceScan.tsx              |  1 +
 src/features/ledger/LedgerConnectSteps.tsx      | 10 +++++++---
 src/features/ledger/LedgerModal.tsx             |  8 +++-----
 src/features/ledger/PairStart.tsx               |  5 +++--
 src/features/swaps/SwapItem.tsx                 |  2 +-
 7 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/src/features/browser/BrowserWebViewScreen.tsx b/src/features/browser/BrowserWebViewScreen.tsx
index 3dd8ae382..27ee92310 100644
--- a/src/features/browser/BrowserWebViewScreen.tsx
+++ b/src/features/browser/BrowserWebViewScreen.tsx
@@ -9,7 +9,7 @@ import {
   SolanaSignMessageInput,
 } from '@solana/wallet-standard-features'
 import { Transaction, VersionedTransaction } from '@solana/web3.js'
-import { useSpacing } from '@theme/themeHooks'
+import { useColors, useSpacing } from '@theme/themeHooks'
 import bs58 from 'bs58'
 import React, { useCallback, useMemo, useRef, useState } from 'react'
 import { Platform, StyleSheet } from 'react-native'
@@ -67,6 +67,7 @@ const BrowserWebViewScreen = () => {
   const isAndroid = useMemo(() => Platform.OS === 'android', [])
   const spacing = useSpacing()
   const [isScriptInjected, setIsScriptInjected] = useState(false)
+  const { primaryText } = useColors()
 
   const isFavorite = useMemo(() => {
     return favorites.some((favorite) => favorite === currentUrl)
@@ -458,11 +459,11 @@ const BrowserWebViewScreen = () => {
           </Text>
         </Box>
         <TouchableOpacityBox onPress={closeModal} paddingHorizontal="4">
-          <Close color="primaryText" width={14} height={14} />
+          <Close color={primaryText} width={14} height={14} />
         </TouchableOpacityBox>
       </Box>
     )
-  }, [currentUrl, closeModal, spacing])
+  }, [currentUrl, closeModal, spacing, primaryText])
 
   const onBack = useCallback(() => {
     webview.current?.goBack()
@@ -485,20 +486,20 @@ const BrowserWebViewScreen = () => {
       <Box padding="4" flexDirection="row" backgroundColor="base.black">
         <Box flexGrow={1} alignItems="center">
           <TouchableOpacityBox onPress={onBack}>
-            <BackArrow width={20} height={20} />
+            <BackArrow width={20} height={20} color={primaryText} />
           </TouchableOpacityBox>
         </Box>
         <Box flexGrow={1} alignItems="center">
           <TouchableOpacityBox style={styles.rotatedArrow} onPress={onForward}>
-            <BackArrow width={20} height={20} />
+            <BackArrow width={20} height={20} color={primaryText} />
           </TouchableOpacityBox>
         </Box>
         <Box flexGrow={1} alignItems="center">
           <TouchableOpacityBox onPress={onFavorite}>
             {isFavorite ? (
-              <BookmarkFilled color="primaryText" width={20} height={20} />
+              <BookmarkFilled color={primaryText} width={20} height={20} />
             ) : (
-              <Bookmark color="primaryText" width={20} height={20} />
+              <Bookmark color={primaryText} width={20} height={20} />
             )}
           </TouchableOpacityBox>
         </Box>
@@ -509,7 +510,7 @@ const BrowserWebViewScreen = () => {
         </Box>
       </Box>
     )
-  }, [onBack, onForward, isFavorite, onFavorite, onRefresh])
+  }, [onBack, onForward, isFavorite, onFavorite, onRefresh, primaryText])
 
   return (
     <Box position="absolute" top={0} left={0} right={0} bottom={0}>
diff --git a/src/features/home/addNewAccount/AddNewAccountScreen.tsx b/src/features/home/addNewAccount/AddNewAccountScreen.tsx
index 58571887a..2fafd2635 100644
--- a/src/features/home/addNewAccount/AddNewAccountScreen.tsx
+++ b/src/features/home/addNewAccount/AddNewAccountScreen.tsx
@@ -50,7 +50,9 @@ const AddNewAccountScreen = () => {
       <Box backgroundColor="bg.tertiary">
         <Box flexDirection="row" paddingVertical="4">
           <Box flex={1} />
-          <Text variant="textXlMedium">{t('addNewAccount.title')}</Text>
+          <Text variant="textXlMedium" color="primaryText">
+            {t('addNewAccount.title')}
+          </Text>
           <Box flex={1} />
         </Box>
         <TabBar
diff --git a/src/features/ledger/DeviceScan.tsx b/src/features/ledger/DeviceScan.tsx
index fa944e622..270861023 100644
--- a/src/features/ledger/DeviceScan.tsx
+++ b/src/features/ledger/DeviceScan.tsx
@@ -153,6 +153,7 @@ const DeviceScan = () => {
             marginVertical="6"
             textAlign="center"
             lineHeight={38}
+            color="primaryText"
           >
             {t('ledger.scan.title')}
           </Text>
diff --git a/src/features/ledger/LedgerConnectSteps.tsx b/src/features/ledger/LedgerConnectSteps.tsx
index 61efd2499..6ece8dd74 100644
--- a/src/features/ledger/LedgerConnectSteps.tsx
+++ b/src/features/ledger/LedgerConnectSteps.tsx
@@ -39,7 +39,7 @@ const LedgerConnectSteps = ({ onLayout, onRetry }: Props) => {
           alignItems="center"
         >
           <Check color={primaryText} height={24} width={24} />
-          <Text variant="textXlMedium" marginLeft="3">
+          <Text variant="textXlMedium" marginLeft="3" color="primaryText">
             {step}
           </Text>
         </Box>
@@ -48,11 +48,15 @@ const LedgerConnectSteps = ({ onLayout, onRetry }: Props) => {
         marginTop="2"
         marginBottom="6"
         onPress={onRetry}
-        backgroundColor="cardBackground"
+        backgroundColor="primaryText"
         padding="6"
         borderRadius="full"
       >
-        <Text variant="textXlMedium" textAlign="center">
+        <Text
+          variant="textXlMedium"
+          textAlign="center"
+          color="primaryBackground"
+        >
           {t('generic.tryAgain')}
         </Text>
       </TouchableOpacityBox>
diff --git a/src/features/ledger/LedgerModal.tsx b/src/features/ledger/LedgerModal.tsx
index b070486bd..c89b42f4a 100644
--- a/src/features/ledger/LedgerModal.tsx
+++ b/src/features/ledger/LedgerModal.tsx
@@ -56,7 +56,7 @@ const LedgerModal = forwardRef(
     const bottomSheetModalRef = useRef<BottomSheetModal>(null)
     const { backgroundStyle } = useOpacity('bg.tertiary', 1)
     const { setIsShowing } = useBackHandler(bottomSheetModalRef)
-    const { secondaryText } = useColors()
+    const { primaryText } = useColors()
     const { t } = useTranslation()
     const { getTransport, openSolanaApp } = useLedger()
     const [transactionBuffer, setTransactionBuffer] = useState<Buffer>()
@@ -216,9 +216,9 @@ const LedgerModal = forwardRef(
 
     const handleIndicatorStyle = useMemo(() => {
       return {
-        backgroundColor: secondaryText,
+        backgroundColor: primaryText,
       }
-    }, [secondaryText])
+    }, [primaryText])
 
     const deviceModelId = useMemo(() => {
       let model = DeviceModelId.nanoX
@@ -335,13 +335,11 @@ const LedgerModal = forwardRef(
     return (
       <Box flex={1}>
         <BottomSheetModalProvider>
-          {/* <Box flex={1} {...boxProps}> */}
           <BottomSheetModal
             ref={bottomSheetModalRef}
             index={0}
             backgroundStyle={backgroundStyle}
             backdropComponent={renderBackdrop}
-            // onDismiss={handleModalDismiss}
             handleIndicatorStyle={handleIndicatorStyle}
             contentHeight={animatedContentHeight}
             enableDynamicSizing
diff --git a/src/features/ledger/PairStart.tsx b/src/features/ledger/PairStart.tsx
index c2e4fdabe..ef0297253 100644
--- a/src/features/ledger/PairStart.tsx
+++ b/src/features/ledger/PairStart.tsx
@@ -34,10 +34,11 @@ const PairStart = () => {
             variant="displayLgRegular"
             textAlign="center"
             marginVertical="6"
+            color="primaryText"
           >
             {t('ledger.pairStart.title')}
           </Text>
-          <Text variant="textXlMedium" textAlign="center">
+          <Text variant="textXlMedium" textAlign="center" color="secondaryText">
             {t('ledger.pairStart.subtitle')}
           </Text>
         </Box>
@@ -62,7 +63,7 @@ const PairStart = () => {
         backgroundColorDisabled="bg.tertiary"
         backgroundColorDisabledOpacity={0.5}
         titleColorDisabled="gray.800"
-        titleColor="primaryText"
+        titleColor="primaryBackground"
         fontWeight="500"
         title={t('ledger.pairStart.pair')}
         marginBottom="6"
diff --git a/src/features/swaps/SwapItem.tsx b/src/features/swaps/SwapItem.tsx
index 9819a7fc3..c5fe2ca13 100644
--- a/src/features/swaps/SwapItem.tsx
+++ b/src/features/swaps/SwapItem.tsx
@@ -70,7 +70,7 @@ const SwapItem = ({
               {isPaying ? t('swapsScreen.youPay') : t('swapsScreen.youReceive')}
             </Text>
             <Box flexDirection="row">
-              <Text marginEnd="2" variant="textXlRegular">
+              <Text marginEnd="2" variant="textXlRegular" color="primaryText">
                 {!loading ? amount.toString() : t('generic.loading')}
               </Text>
               <Text