Mahmoud/eng 4948 UI fixes for settings page (#509)

* style fixes * fix default extension toggle flicker * Update src/app/screens/settings/settingComponent/index.tsx * touchup * fix type * fix divider in preference settings --------- Co-authored-by: Terence Ng <[email protected]>
secretkeylabs · Aug 21, 2024 · 724ce0f · 724ce0f
1 parent 3d9db04
commit 724ce0f
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 20 deletions.
diff --git a/src/app/screens/settings/changeNetwork/networkRow.tsx b/src/app/screens/settings/changeNetwork/networkRow.tsx
@@ -3,7 +3,8 @@ import type { SettingsNetwork } from '@secretkeylabs/xverse-core';
 import styled, { useTheme } from 'styled-components';
 
 interface TitleProps {
-  color: string;
+  isActive: boolean;
+  variant: React.CSSProperties;
 }
 
 interface ButtonProps {
@@ -20,8 +21,8 @@ const Button = styled.button<ButtonProps>((props) => ({
 }));
 
 const Text = styled.h1<TitleProps>((props) => ({
-  ...props.theme.typography.body_medium_m,
-  color: props.color,
+  ...props.variant,
+  color: props.isActive ? props.theme.colors.white_0 : props.theme.colors.white_0,
   flex: 1,
   textAlign: 'left',
 }));
@@ -44,7 +45,12 @@ function NetworkRow({ network, isSelected, onNetworkSelected, showDivider }: Pro
       onClick={onClick}
       border={showDivider ? `1px solid ${theme.colors.white_900}` : 'transparent'}
     >
-      <Text color={isSelected ? theme.colors.white_0 : theme.colors.white_400}>{network.type}</Text>
+      <Text
+        isActive={isSelected}
+        variant={isSelected ? theme.typography.body_bold_m : theme.typography.body_m}
+      >
+        {network.type}
+      </Text>
       {isSelected && <img src={TickIcon} alt="tick" />}
     </Button>
   );

diff --git a/src/app/screens/settings/preferences/fiatCurrency/currencyRow.tsx b/src/app/screens/settings/preferences/fiatCurrency/currencyRow.tsx
@@ -6,8 +6,9 @@ import styled, { useTheme } from 'styled-components';
 const Button = styled.button<{
   $border: string;
   $color: string;
+  $variant: React.CSSProperties;
 }>((props) => ({
-  ...props.theme.typography.body_medium_m,
+  ...props.$variant,
   color: props.$color,
   display: 'flex',
   alignItems: 'center',
@@ -50,6 +51,7 @@ function CurrencyRow({ currency, isSelected, onCurrencySelected, showDivider }:
       onClick={onClick}
       $border={showDivider ? `1px solid ${theme.colors.white_900}` : 'transparent'}
       $color={isSelected ? theme.colors.white_0 : theme.colors.white_400}
+      $variant={isSelected ? theme.typography.body_bold_l : theme.typography.body_medium_l}
     >
       <CurrencyWrapper>
         <StyledImg src={currency.flag} alt="flag" />

diff --git a/src/app/screens/settings/preferences/index.tsx b/src/app/screens/settings/preferences/index.tsx
@@ -26,7 +26,7 @@ function Preferences() {
   const { t } = useTranslation('translation', { keyPrefix: 'SETTING_SCREEN' });
   const { fiatCurrency, walletLockPeriod } = useWalletSelector();
   const navigate = useNavigate();
-  const [isPriorityWallet, setIsPriorityWallet] = useChromeLocalStorage<boolean>(
+  const [isPriorityWallet, setIsPriorityWallet] = useChromeLocalStorage<boolean | undefined>(
     chromeLocalStorageKeys.isPriorityWallet,
     true,
   );
@@ -71,14 +71,14 @@ function Preferences() {
         <SettingComponent
           text={t('PRIVACY_PREFERENCES.TITLE')}
           onClick={openPrivacyPreferencesScreen}
+          showDivider
         />
         <SettingComponent
           text={t('XVERSE_DEFAULT')}
           description={t('XVERSE_DEFAULT_DESCRIPTION')}
           toggle
           toggleFunction={switchIsPriorityWallet}
           toggleValue={isPriorityWallet}
-          showDivider
         />
       </Container>
     </>

diff --git a/src/app/screens/settings/settingComponent/index.tsx b/src/app/screens/settings/settingComponent/index.tsx
@@ -45,7 +45,8 @@ const ComponentText = styled.h1<{
 
 const ComponentDescriptionText = styled.h1((props) => ({
   ...props.theme.typography.body_medium_l,
-  color: props.theme.colors.white_200,
+  marginRight: props.theme.space.xxs,
+  color: props.theme.colors.white_0,
 }));
 
 const DescriptionText = styled.p((props) => ({
@@ -107,12 +108,10 @@ function SettingComponent({
   toggleFunction,
 }: SettingComponentProps) {
   const theme = useTheme();
-
   return (
     <Wrapper>
       <ColumnContainer>
         {title && <TitleText>{title}</TitleText>}
-
         <Button
           onClick={onClick}
           border={showDivider ? `1px solid ${theme.colors.elevation2}` : 'transparent'}
@@ -126,19 +125,14 @@ function SettingComponent({
             {description && <DescriptionText>{description}</DescriptionText>}
           </Column>
           {textDetail && <ComponentDescriptionText>{textDetail}</ComponentDescriptionText>}
-          {!toggle ? (
-            link ? (
-              <ArrowUpRight color={theme.colors.white_0} size={16} />
-            ) : (
-              <CaretRight color={theme.colors.white_0} size={16} />
-            )
-          ) : null}
-          {toggle && toggleFunction && (
+          {!toggle && link && <ArrowUpRight color={theme.colors.white_0} size={16} weight="bold" />}
+          {!toggle && !link && <CaretRight color={theme.colors.white_0} size={16} weight="bold" />}
+          {toggle && toggleFunction && toggleValue !== undefined && (
             <CustomSwitch
-              onColor={theme.colors.orange_main}
+              onColor={theme.colors.tangerine}
               offColor={theme.colors.elevation3}
               onChange={toggleFunction}
-              checked={toggleValue ?? false}
+              checked={toggleValue}
               uncheckedIcon={false}
               checkedIcon={false}
             />