fix: [ADN-387] Fix Advanced Options page

onbloc · Jan 30, 2024 · 4742d9e · 4742d9e
1 parent 0dffd2e
commit 4742d9e
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 22 deletions.
diff --git a/packages/adena-extension/src/components/atoms/web-button/index.tsx b/packages/adena-extension/src/components/atoms/web-button/index.tsx
@@ -1,7 +1,7 @@
 import React, { ButtonHTMLAttributes, ReactElement, ReactNode } from 'react';
 import styled from 'styled-components';
 
-import { WebFontType } from '@styles/theme';
+import { getTheme, WebFontType } from '@styles/theme';
 import IconRight from '@assets/web/chevron-right.svg';
 
 import { WebImg } from '../web-img';
@@ -13,18 +13,18 @@ type WebButtonProps = {
   textType?: WebFontType;
   figure: 'primary' | 'secondary' | 'tertiary' | 'quaternary';
 } & (
-  | { text: string; rightIcon?: 'chevronRight' }
-  | {
+    | { text: string; rightIcon?: 'chevronRight' }
+    | {
       children: ReactNode;
     }
-) &
+  ) &
   ButtonHTMLAttributes<HTMLButtonElement>;
 
 const StyledButtonBase = styled.button<{ size: 'full' | 'large' | 'small' }>`
   cursor: pointer;
   border: transparent;
   border-radius: 14px;
-  padding: ${({ size }): string => (size === 'large' ? '12px 16px 16px' : '8px 24px')};
+  padding: ${({ size }): string => (size === 'large' ? '12px 16px 16px' : '8px 16px')};
   display: flex;
   flex-direction: row;
   width: ${({ size }): string => (size === 'full' ? '100%' : 'auto')};
@@ -37,17 +37,20 @@ const StyledButtonBase = styled.button<{ size: 'full' | 'large' | 'small' }>`
 `;
 
 const StyledButtonPrimary = styled(StyledButtonBase)`
+  color ${getTheme('webNeutral', '_100')};
   outline: 1px solid rgba(255, 255, 255, 0.4);
   background: linear-gradient(180deg, #0059ff 0%, #004bd6 100%);
 
   :hover {
+    color ${getTheme('webNeutral', '_100')};
     outline: 2px solid rgba(255, 255, 255, 0.4);
     background: linear-gradient(180deg, #0059ff 0%, #004bd6 100%);
     box-shadow: 0px 0px 24px 0px rgba(0, 89, 255, 0.32), 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
       0px 1px 2px 0px rgba(0, 0, 0, 0.06);
   }
 
   :active {
+    color ${getTheme('webNeutral', '_100')};
     outline: 2px solid rgba(255, 255, 255, 0.4);
     background: linear-gradient(180deg, #0059ff 0%, #004bd6 100%);
     box-shadow: 0px 0px 24px 0px rgba(0, 89, 255, 0.32), 0px 0px 0px 3px rgba(0, 89, 255, 0.16),
@@ -56,31 +59,37 @@ const StyledButtonPrimary = styled(StyledButtonBase)`
 `;
 
 const StyledButtonSecondary = styled(StyledButtonBase)`
+  color: #ADCAFF;
   outline: 1px solid rgba(122, 169, 255, 0.24);
   background: rgba(0, 89, 255, 0.16);
 
   :hover {
+    color: #ADCAFF;
     outline: 2px solid rgba(122, 169, 255, 0.24);
     background: rgba(0, 89, 255, 0.2);
     box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
   }
 
   :active {
+    color: #7AA9FF;
     outline: 2px solid rgba(122, 169, 255, 0.24);
     background: rgba(0, 89, 255, 0.2);
   }
 `;
 
 const StyledButtonTertiary = styled(StyledButtonBase)`
+  color ${getTheme('webNeutral', '_300')};
   outline: 1px solid rgba(188, 197, 214, 0.16);
   background: rgba(188, 197, 214, 0.04);
 
   :hover {
+    color ${getTheme('webNeutral', '_300')};
     outline: 2px solid rgba(188, 197, 214, 0.16);
     background: rgba(188, 197, 214, 0.06);
   }
 
   :active {
+    color ${getTheme('webNeutral', '_100')};
     outline: 1px solid rgba(188, 197, 214, 0.24);
     background: rgba(188, 197, 214, 0.04);
     box-shadow: 0px 0px 16px 0px rgba(255, 255, 255, 0.04),

diff --git a/packages/adena-extension/src/components/atoms/web-text/index.tsx b/packages/adena-extension/src/components/atoms/web-text/index.tsx
@@ -1,18 +1,18 @@
-import React, { ReactElement } from 'react';
+import React, { CSSProperties, ReactElement } from 'react';
 import styled, { FlattenSimpleInterpolation } from 'styled-components';
 
-import { WebFontType, getTheme, webFonts } from '@styles/theme';
+import { WebFontType, webFonts } from '@styles/theme';
 
 type FormTextProps = {
   type: WebFontType;
   children: string | number;
-  color?: string;
+  color?: CSSProperties['color'];
   style?: React.CSSProperties;
   textCenter?: boolean;
 };
 
-const StyledContainer = styled.div<{ type: WebFontType }>`
-  color: ${getTheme('webNeutral', '_100')};
+const StyledContainer = styled.div<{ type: WebFontType, color?: CSSProperties['color']; }>`
+  color: ${({ color }): CSSProperties['color'] => color ? color : '#FAFCFF'};
   ${({ type }): FlattenSimpleInterpolation => webFonts[type]}
   white-space: pre-wrap;
 `;

diff --git a/packages/adena-extension/src/pages/web/advanced-option-screen/index.tsx b/packages/adena-extension/src/pages/web/advanced-option-screen/index.tsx
@@ -58,9 +58,9 @@ const AdvancedOptionScreen = (): ReactElement => {
           }}
           style={{ width: 176 }}
         >
-          <View style={{ height: 74, justifyContent: 'space-between' }}>
+          <View style={{ width: 144, height: 74, justifyContent: 'space-between' }}>
             <WebImg src={IconCreate} size={24} />
-            <WebText type='title5'>Create New Wallet</WebText>
+            <WebText type='title5' color='inherit'>Create New Wallet</WebText>
           </View>
         </WebButton>
         <WebButton
@@ -75,9 +75,9 @@ const AdvancedOptionScreen = (): ReactElement => {
             }
           }}
         >
-          <View style={{ height: 74, justifyContent: 'space-between' }}>
+          <View style={{ width: 144, height: 74, justifyContent: 'space-between' }}>
             <WebImg src={IconImport} size={24} />
-            <WebText type='title5'>Import Existing Wallet</WebText>
+            <WebText type='title5' color='inherit'>Import Existing Wallet</WebText>
           </View>
         </WebButton>
         <WebButton
@@ -88,9 +88,9 @@ const AdvancedOptionScreen = (): ReactElement => {
             navigate(RoutePath.WebGoogleLogin);
           }}
         >
-          <View style={{ height: 74, justifyContent: 'space-between' }}>
+          <View style={{ width: 144, height: 74, justifyContent: 'space-between' }}>
             <WebImg src={IconGoogle} size={24} />
-            <WebText type='title5'>Sign In With Google</WebText>
+            <WebText type='title5' color='inherit'>Sign In With Google</WebText>
           </View>
         </WebButton>
       </Row>

diff --git a/packages/adena-extension/src/pages/web/landing-screen/index.tsx b/packages/adena-extension/src/pages/web/landing-screen/index.tsx
@@ -56,9 +56,9 @@ const LandingScreen = (): ReactElement => {
           }}
           style={{ width: 204 }}
         >
-          <View style={{ height: 74, justifyContent: 'space-between' }}>
+          <View style={{ width: 172, height: 74, justifyContent: 'space-between' }}>
             <WebImg src={hardWallet} size={24} />
-            <WebText type='title5'>Connect Hardware Wallet</WebText>
+            <WebText type='title5' color='inherit'>Connect Hardware Wallet</WebText>
           </View>
         </WebButton>
         <WebButton
@@ -67,9 +67,9 @@ const LandingScreen = (): ReactElement => {
           style={{ width: 204 }}
           onClick={moveSetupAirgapScreen}
         >
-          <View style={{ height: 74, justifyContent: 'space-between' }}>
+          <View style={{ width: 172, height: 74, justifyContent: 'space-between' }}>
             <WebImg src={airgap} size={24} />
-            <WebText type='title5'>Set Up Airgap Account</WebText>
+            <WebText type='title5' color='inherit'>Set Up Airgap Account</WebText>
           </View>
         </WebButton>
         <WebButton
@@ -80,9 +80,9 @@ const LandingScreen = (): ReactElement => {
           }}
           style={{ width: 204 }}
         >
-          <View style={{ height: 74, justifyContent: 'space-between' }}>
+          <View style={{ width: 172, height: 74, justifyContent: 'space-between' }}>
             <WebImg src={thunder} size={24} />
-            <WebText type='title5'>Advanced Options</WebText>
+            <WebText type='title5' color='inherit'>Advanced Options</WebText>
           </View>
         </WebButton>
       </Row>