From 724ce0fedd9b1381b3fc8dd5bb8bd4d8d2178667 Mon Sep 17 00:00:00 2001
From: Mahmoud Aboelenein <mahmoud@secretkeylabs.com>
Date: Wed, 21 Aug 2024 15:07:44 +0300
Subject: [PATCH] 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 <ngtere@live.com.sg>
---
 .../settings/changeNetwork/networkRow.tsx     | 14 +++++++++----
 .../preferences/fiatCurrency/currencyRow.tsx  |  4 +++-
 .../screens/settings/preferences/index.tsx    |  4 ++--
 .../settings/settingComponent/index.tsx       | 20 +++++++------------
 4 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/app/screens/settings/changeNetwork/networkRow.tsx b/src/app/screens/settings/changeNetwork/networkRow.tsx
index fc15ea49c..03356d38f 100644
--- 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
index 7310508b9..41b3cc968 100644
--- 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
index 88ff57fca..d3963f5be 100644
--- 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,6 +71,7 @@ function Preferences() {
         <SettingComponent
           text={t('PRIVACY_PREFERENCES.TITLE')}
           onClick={openPrivacyPreferencesScreen}
+          showDivider
         />
         <SettingComponent
           text={t('XVERSE_DEFAULT')}
@@ -78,7 +79,6 @@ function Preferences() {
           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
index 63ede3300..f2e237c08 100644
--- 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}
             />