update header row

make-software · Jul 17, 2024 · 97dc6ac · 97dc6ac
1 parent 48c31a6
commit 97dc6ac
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 39 deletions.
diff --git a/src/assets/icons/connected-dark.svg b/src/assets/icons/connected-dark.svg
diff --git a/src/assets/icons/connected-light.svg b/src/assets/icons/connected-light.svg
diff --git a/src/libs/layout/header/header-connection-status.tsx b/src/libs/layout/header/header-connection-status.tsx
@@ -12,11 +12,12 @@ import {
   Modal,
   SvgIcon
 } from '@libs/ui/components';
+import { hexToRGBA } from '@libs/ui/utils';
 
 const ConnectionStatusContainer = styled(AlignedFlexRow)`
   width: fit-content;
 
-  background-color: rgb(0, 0, 0, 0.16);
+  background-color: ${({ theme }) => hexToRGBA(theme.color.black, '0.24')};
   padding: 6px 8px 6px 14px;
   border-top-right-radius: ${({ theme }) => theme.borderRadius.hundred}px;
   border-bottom-right-radius: ${({ theme }) => theme.borderRadius.hundred}px;

diff --git a/src/libs/layout/header/header-network-switcher.tsx b/src/libs/layout/header/header-network-switcher.tsx
@@ -13,7 +13,7 @@ import { Modal, SvgIcon, Typography } from '@libs/ui/components';
 import { hexToRGBA } from '@libs/ui/utils';
 
 const NetworkSwitcherContainer = styled(AlignedFlexRow)`
-  background-color: ${({ theme }) => hexToRGBA(theme.color.black, '0.16')};
+  background-color: ${({ theme }) => hexToRGBA(theme.color.black, '0.24')};
   padding: 6px 8px;
   border-radius: ${({ theme }) => theme.borderRadius.hundred}px;
 `;
@@ -106,8 +106,12 @@ export const HeaderNetworkSwitcher = () => {
           <SvgIcon
             src="assets/icons/network.svg"
             size={16}
-            color="contentOnFill"
             dataTestId="network-switcher"
+            color={
+              activeNetwork === NetworkSetting.Testnet
+                ? 'contentLightBlue'
+                : 'contentLightRed'
+            }
           />
           <Typography type="listSubtext" color="contentOnFill">
             {activeNetwork}

diff --git a/src/libs/ui/components/avatar/avatar.tsx b/src/libs/ui/components/avatar/avatar.tsx
@@ -32,6 +32,34 @@ export const BackgroundWrapper = styled.div(
   })
 );
 
+const ConnectIcon = styled(SvgIcon)<{
+  displayContext?: 'header' | 'accountList';
+  isDarkMode: boolean;
+  color: string;
+}>`
+  position: absolute;
+  bottom: ${({ displayContext }) =>
+    displayContext === 'header'
+      ? '-4px'
+      : displayContext === 'accountList'
+        ? '-2px'
+        : '-5px'};
+  right: ${({ displayContext }) =>
+    displayContext === 'header'
+      ? '-4px'
+      : displayContext === 'accountList'
+        ? '-2px'
+        : '-5px'};
+  svg > circle {
+    stroke: ${({ isDarkMode, displayContext, theme }) =>
+      displayContext === 'header'
+        ? isDarkMode
+          ? '#A30D18'
+          : '#CF111F'
+        : theme.color.backgroundPrimary};
+  }
+`;
+
 interface AvatarTypes {
   publicKey: string;
   size: number;
@@ -78,28 +106,15 @@ export const Avatar = ({
           isConnected={isConnected}
           borderRadius={borderRadius}
         />
-        <SvgIcon
+        <ConnectIcon
           src={connectIcon}
           size={
             displayContext === 'header' || displayContext === 'accountList'
               ? 12
               : 16
           }
-          style={{
-            position: 'absolute',
-            bottom:
-              displayContext === 'header'
-                ? '-4px'
-                : displayContext === 'accountList'
-                  ? '-2px'
-                  : '-5px',
-            right:
-              displayContext === 'header'
-                ? '-4px'
-                : displayContext === 'accountList'
-                  ? '-2px'
-                  : '-5px'
-          }}
+          isDarkMode={isDarkMode}
+          displayContext={displayContext}
           color={isConnected ? 'contentPositive' : 'contentDisabled'}
         />
       </ConnectionStatusBadgeContainer>

diff --git a/src/libs/ui/theme-config.ts b/src/libs/ui/theme-config.ts
@@ -48,9 +48,9 @@ export const lightTheme = {
     backgroundPrimary: '#FFFFFF',
     backgroundSecondary: '#F5F6F7',
     backgroundRed: {
-      deg: '148deg',
-      from: '#E93240 6.78%',
-      to: '#C2000E 71.85%'
+      deg: '180deg',
+      from: 'rgb(232.69, 50.42, 63.73) 0%',
+      to: 'rgb(194, 0, 14) 100%'
     },
 
     contentPrimary: '#1A1919',
@@ -63,6 +63,7 @@ export const lightTheme = {
     contentPositive: '#2DDC88',
     contentGreenStatus: '#77FFBE',
     contentLightBlue: '#7490FF',
+    contentLightRed: '#FF404E',
 
     fillPrimary: '#0A2EBF',
     fillPrimaryHover: '#001C8C',
@@ -104,9 +105,9 @@ export const darkTheme = {
     backgroundPrimary: '#262730',
     backgroundSecondary: '#18181F',
     backgroundRed: {
-      deg: '148deg',
-      from: '#B82832 6.78%',
-      to: '#99000B 71.85%'
+      deg: '180deg',
+      from: 'rgb(183.6, 39.78, 50.28) 0%',
+      to: 'rgb(153, 0, 11.04) 100%'
     },
 
     contentPrimary: '#FFFFFF',
@@ -119,6 +120,7 @@ export const darkTheme = {
     contentPositive: '#2DDC88',
     contentGreenStatus: '#77FFBE',
     contentLightBlue: '#7490FF',
+    contentLightRed: '#FF404E',
 
     fillPrimary: '#153CD6',
     fillPrimaryHover: '#0929AC',

diff --git a/src/libs/ui/utils/get-color-from-theme.ts b/src/libs/ui/utils/get-color-from-theme.ts
@@ -12,6 +12,7 @@ export type ContentColor =
   | 'contentPositive'
   | 'contentGreenStatus'
   | 'contentLightBlue'
+  | 'contentLightRed'
   | 'brandRed'
   | 'black';
 
@@ -48,6 +49,7 @@ export function getColorFromTheme(theme: DefaultTheme, color: Color) {
     contentGreenStatus: theme.color.contentGreenStatus,
     contentWarning: theme.color.contentWarning,
     contentLightBlue: theme.color.contentLightBlue,
+    contentLightRed: theme.color.contentLightRed,
     brandRed: theme.color.brandRed,
     fillPrimary: theme.color.fillPrimary,
     fillCritical: theme.color.fillCritical,