Enable light color mode for insufficient funds page (#435)

cartridge-gg · Jul 2, 2024 · ddc063e · ddc063e
1 parent bf403ee
commit ddc063e
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 15 deletions.
diff --git a/packages/keychain/src/components/Execute/InsufficientFunds.tsx b/packages/keychain/src/components/Execute/InsufficientFunds.tsx
@@ -20,23 +20,25 @@ export function InsufficientFunds({
       description="You'll need more gas to complete this transaction. Send some ETH to your controller address."
     >
       <Content>
-        <VStack w="full" align="flex-start" fontSize="14px">
-          <Text color="darkGray.400" fontSize="11px">
+        <VStack w="full" align="flex-start" fontSize="sm" borderRadius="sm" spacing="1px">
+          <Text color="text.secondary" fontSize="11px" w="full" bg="solid.primary" as="b" p={3}>
             BALANCE
           </Text>
+
           <HStack
             h="40px"
             w="full"
             borderRadius="4px"
             overflow="hidden"
-            spacing="3px"
+            spacing="1px"
           >
-            <HStack bgColor="darkGray.900" boxSize="full" flex="2" px="10px">
-              <EthereumIcon boxSize="24px" color="red.400" />{" "}
-              <Text color="red.400">{balance}</Text>
+            <HStack boxSize="full" flex="2" px="10px" bg="solid.primary" color="text.error">
+              <EthereumIcon boxSize="24px" color="inherit" />{" "}
+              <Text color="inherit">{balance}</Text>
             </HStack>
+
             <HStack
-              bgColor="darkGray.900"
+              bg="solid.primary"
               boxSize="full"
               flex="1"
               justify="center"
@@ -46,25 +48,26 @@ export function InsufficientFunds({
           </HStack>
         </VStack>
 
-        <VStack w="full" align="flex-start" fontSize="14px">
-          <Text color="darkGray.400" fontSize="11px">
+        <VStack w="full" align="flex-start" fontSize="sm" borderRadius="sm" spacing="1px">
+          <Text color="text.secondary" fontSize="11px" w="full" bg="solid.primary" as="b" p={3}>
             ADDRESS
           </Text>
+
           <HStack
             h="40px"
             w="full"
             borderRadius="4px"
             overflow="hidden"
-            spacing="3px"
+            spacing="1px"
           >
             <HStack
-              bgColor="darkGray.900"
+              bg="solid.primary"
               boxSize="full"
               flex="2"
               px="10px"
               cursor="pointer"
               _hover={{
-                color: "darkGray.100",
+                opacity: 0.8
               }}
               onClick={() => {
                 navigator.clipboard.writeText(address.toString());
@@ -78,7 +81,7 @@ export function InsufficientFunds({
           </HStack>
           {copied && (
             <HStack w="full" justify="center">
-              <Text color="darkGray.200" fontSize="12px">
+              <Text color="text.secondary" fontSize="12px">
                 COPIED
               </Text>
             </HStack>

diff --git a/packages/keychain/src/components/layout/Container/Header/Banner.tsx b/packages/keychain/src/components/layout/Container/Header/Banner.tsx
@@ -114,7 +114,7 @@ export function Banner({ Icon, icon, title, description }: BannerProps) {
                 {icon}
               </Square>
             ) : (
-              <Image src={theme.icon} boxSize={11} alt="Controller Icon" />
+              <Image src={theme.icon} boxSize="44px" alt="Controller Icon" />
             )}
 
             <VStack align="flex-start" gap={1}>
@@ -123,7 +123,7 @@ export function Banner({ Icon, icon, title, description }: BannerProps) {
               </Text>
 
               {description && (
-                <Text fontSize="xs" color="text.secondary" whiteSpace="nowrap">
+                <Text fontSize="xs" color="text.secondary">
                   {description}
                 </Text>
               )}