custom theming fixes

0xsequence · Nov 23, 2023 · e04858c · e04858c
1 parent 11193f4
commit e04858c
Show file tree

Hide file tree

Showing 10 changed files with 23 additions and 5 deletions.
diff --git a/examples/react/src/App.tsx b/examples/react/src/App.tsx
@@ -55,7 +55,7 @@ function App() {
 
   const kitConfig: KitConfig = {
     projectAccessKey: 'iK0DPkHRt0IFo8o4M3fZIIOAAAAAAAAAA',
-    defaultTheme: THEMES.dark,
+    defaultTheme: 'dark',
     signIn: {
       projectName: 'Skyweaver',
       // logoUrl: 'sw-logo-white.svg',

diff --git a/packages/wallet/src/shared/WalletHeader/components/AccountInformation.tsx b/packages/wallet/src/shared/WalletHeader/components/AccountInformation.tsx
@@ -39,7 +39,7 @@ export const AccountInformation = forwardRef(({
           <Text color="text100" fontWeight="medium" variant="normal">
             {formatAddress(address || '')}
           </Text>
-          <ChevronDownIcon />
+          <ChevronDownIcon color="text100" />
         </Box>
       </Box>
     </Box>

diff --git a/packages/wallet/src/shared/WalletHeader/components/WalletDropdownContent.tsx b/packages/wallet/src/shared/WalletHeader/components/WalletDropdownContent.tsx
@@ -63,6 +63,17 @@ export const WalletDropdownContent = forwardRef((
     disconnect()
   }
 
+  const getDropdownBackgroundColor = () => {
+    switch(theme) {
+      case 'dark':
+        return 'rgba(38, 38, 38, 0.85)'
+      case 'light':
+        return 'rgba(217, 217, 217, 0.85)'
+      default:
+        return vars.colors.transparent
+    }
+  }
+
   return (
     <Box
       padding="3"
@@ -76,7 +87,7 @@ export const WalletDropdownContent = forwardRef((
         backdropFilter: 'blur(12.5px)',
         top: '16px',
         left: '15px',
-        background: theme === 'dark' ? "rgba(38, 38, 38, 0.85)" : "rgba(217, 217, 217, 0.85)" 
+        background: getDropdownBackgroundColor() 
       }}
 
     >
@@ -109,6 +120,7 @@ export const WalletDropdownContent = forwardRef((
       </Box>
       <Box gap="2" marginTop="3" flexDirection="column">
         <Button
+          variant="glass"
           style={{ borderRadius: vars.radii.md }}
           width="full"
           leftIcon={QrCodeIcon}

diff --git a/packages/wallet/src/views/CoinDetails/Skeleton.tsx b/packages/wallet/src/views/CoinDetails/Skeleton.tsx
@@ -37,6 +37,7 @@ export const CoinDetailsSkeleton = ({
           </Box>
         </Box>
         <Button
+          color="text100"
           marginTop="4"
           marginBottom="10"
           width="full"

diff --git a/packages/wallet/src/views/CoinDetails/index.tsx b/packages/wallet/src/views/CoinDetails/index.tsx
@@ -143,6 +143,7 @@ export const CoinDetails = ({
           width="full"
           variant="primary"
           leftIcon={SendIcon}
+          color="text100"
           label="Send"
           onClick={onClickSend}
         />

diff --git a/packages/wallet/src/views/CollectibleDetails/Skeleton.tsx b/packages/wallet/src/views/CollectibleDetails/Skeleton.tsx
@@ -37,6 +37,7 @@ export const CollectibleDetailsSkeleton = () => {
             </Box>
           </Box>
           <Button
+            color="text100"
             marginTop="4"
             width="full"
             variant="primary"

diff --git a/packages/wallet/src/views/CollectibleDetails/index.tsx b/packages/wallet/src/views/CollectibleDetails/index.tsx
@@ -175,6 +175,7 @@ export const CollectibleDetails = ({
             </Box>
           </Box>
           <Button
+            color="text100"
             marginTop="4"
             width="full"
             variant="primary"

diff --git a/packages/wallet/src/views/SendCoin.tsx b/packages/wallet/src/views/SendCoin.tsx
@@ -290,6 +290,7 @@ export const SendCoin = ({
       }
 
       <Button
+        color="text100"
         marginTop="3"
         width="full"
         variant="primary"

diff --git a/packages/wallet/src/views/SendCollectible.tsx b/packages/wallet/src/views/SendCollectible.tsx
@@ -289,6 +289,7 @@ export const SendCollectible = ({
       }
 
       <Button
+        color="text100"
         marginTop="3"
         width="full"
         variant="primary"

diff --git a/packages/wallet/src/views/Settings/General.tsx b/packages/wallet/src/views/Settings/General.tsx
@@ -29,7 +29,7 @@ export const SettingsGeneral = () => {
   return (
     <Box style={{ paddingTop: HEADER_HEIGHT }}>
       <Box gap="2" padding="5" paddingTop="3" flexDirection="column">
-        <Card
+        {/* <Card
           flexDirection="row"
           justifyContent="space-between"
           alignItems="center"
@@ -41,7 +41,7 @@ export const SettingsGeneral = () => {
             checked={theme === 'dark'}
             onCheckedChange={onChangeTheme}
           />
-        </Card>
+        </Card> */}
         <Card
           flexDirection="row"
           justifyContent="space-between"