update design - add switch icon

Emurgo · Nov 11, 2024 · 2e5c30e · 2e5c30e
1 parent a12a7ee
commit 2e5c30e
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 30 deletions.
diff --git a/packages/yoroi-extension/app/UI/components/icons/Switch.tsx b/packages/yoroi-extension/app/UI/components/icons/Switch.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+export const Switch = () => {
+  return (
+    <svg width="20" height="14" viewBox="0 0 20 14" fill="none">
+      <path
+        d="M4.70711 0.292893C4.31658 -0.0976311 3.68342 -0.0976311 3.29289 0.292893L0.292893 3.29289C-0.0976311 3.68342 -0.0976311 4.31658 0.292893 4.70711C0.683418 5.09763 1.31658 5.09763 1.70711 4.70711L3 3.41421V11C3 11.7956 3.31607 12.5587 3.87868 13.1213C4.44129 13.6839 5.20435 14 6 14H10C10.5523 14 11 13.5523 11 13C11 12.4477 10.5523 12 10 12H6C5.73478 12 5.48043 11.8946 5.29289 11.7071C5.10536 11.5196 5 11.2652 5 11V3.41421L6.29289 4.70711C6.68342 5.09763 7.31658 5.09763 7.70711 4.70711C8.09763 4.31658 8.09763 3.68342 7.70711 3.29289L4.70711 0.292893Z"
+        fill="black"
+      />
+      <path
+        d="M12.2929 9.29289C12.6834 8.90237 13.3166 8.90237 13.7071 9.29289L15 10.5858V3C15 2.73478 14.8946 2.48043 14.7071 2.29289C14.5196 2.10536 14.2652 2 14 2H10C9.44771 2 9 1.55228 9 1C9 0.447715 9.44771 1.49012e-08 10 1.49012e-08H14C14.7956 1.49012e-08 15.5587 0.31607 16.1213 0.87868C16.6839 1.44129 17 2.20435 17 3V10.5858L18.2929 9.29289C18.6834 8.90237 19.3166 8.90237 19.7071 9.29289C20.0976 9.68342 20.0976 10.3166 19.7071 10.7071L16.7071 13.7071C16.3166 14.0976 15.6834 14.0976 15.2929 13.7071L12.2929 10.7071C11.9024 10.3166 11.9024 9.68342 12.2929 9.29289Z"
+        fill="black"
+      />
+    </svg>
+  );
+};
diff --git a/packages/yoroi-extension/app/UI/components/icons/index.ts b/packages/yoroi-extension/app/UI/components/icons/index.ts
@@ -1,17 +1,18 @@
+import { Cancel } from './Cancel';
+import { ChevronDown } from './ChevronDown';
+import { ChevronUp } from './ChevronUp';
+import { ChipArrowDown } from './ChipArrowDown';
+import { ChipArrowUp } from './ChipArrowUp';
 import { CloseIcon } from './CloseIcon';
-import { VisibilityOff } from './VisibilityOff';
-import { VisibilityOn } from './VisibilityOn';
-import { Copy } from './Copy';
 import { Copied } from './Copied';
-import { ChipArrowUp } from './ChipArrowUp';
-import { ChipArrowDown } from './ChipArrowDown';
-import { Send } from './Send';
-import { Cancel } from './Cancel';
-import { Staking } from './Staking';
+import { Copy } from './Copy';
 import { Expand } from './Expand';
-import { ChevronUp } from './ChevronUp';
-import { ChevronDown } from './ChevronDown';
 import { Search } from './Search';
+import { Send } from './Send';
+import { Staking } from './Staking';
+import { Switch } from './Switch';
+import { VisibilityOff } from './VisibilityOff';
+import { VisibilityOn } from './VisibilityOn';
 
 export const Icon = {
   CloseIcon,
@@ -28,4 +29,5 @@ export const Icon = {
   ChevronDown,
   ChevronUp,
   Search,
+  Switch,
 };
diff --git a/packages/yoroi-extension/app/UI/features/portfolio/common/components/PortfolioHeader.tsx b/packages/yoroi-extension/app/UI/features/portfolio/common/components/PortfolioHeader.tsx
@@ -1,8 +1,9 @@
-import { Box, Skeleton, Stack, Typography, useTheme } from '@mui/material';
+import { Box, IconButton, Skeleton, Stack, styled, Typography, useTheme } from '@mui/material';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 import LocalStorageApi from '../../../../../api/localStorage/index';
 import { SearchInput, Tooltip } from '../../../../components';
+import { Switch } from '../../../../components/icons/Switch';
 import { useCurrencyPairing } from '../../../../context/CurrencyContext';
 import { WalletBalance } from '../../../../types/currrentWallet';
 import { usePortfolio } from '../../module/PortfolioContextProvider';
@@ -13,6 +14,14 @@ import { useStrings } from '../hooks/useStrings';
 import { HeaderPrice } from './HeaderPrice';
 import PnlTag from './PlnTag';
 
+const IconWrapper: any = styled(IconButton)(({ theme }: any) => ({
+  '& svg': {
+    '& path': {
+      fill: theme.palette.ds.el_gray_medium,
+    },
+  },
+}));
+
 export function formatValue(value: BigNumber): string {
   if (value.isZero()) {
     return '0';
@@ -114,11 +123,7 @@ const PortfolioHeader = ({ walletBalance, setKeyword, isLoading, tooltipTitle }:
               {String(accountPair?.from.value)}
             </Typography>
           )}
-          <CurrencyDisplay
-            from={accountPair?.from?.name}
-            to={accountPair?.to?.name}
-            handleCurrencyChange={handleCurrencyChange}
-          />
+          <CurrencyDisplay from={accountPair?.from?.name} handleCurrencyChange={handleCurrencyChange} />
         </Stack>
 
         <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ marginTop: theme.spacing(1) }}>
@@ -157,22 +162,15 @@ const LoadingSkeleton = () => (
   </Stack>
 );
 
-const CurrencyDisplay = ({ from, to, handleCurrencyChange }) => (
-  <Typography variant="body2" fontWeight="500" color="ds.black_static" textAlign="center">
-    <Typography component="span" variant="body2" fontWeight="500" color="ds.text_gray_medium">
+const CurrencyDisplay = ({ from, handleCurrencyChange }) => (
+  <Stack direction="row" alignItems="flex-end" gap="4px" ml="2px">
+    <Typography component="span" variant="body1" fontWeight="500" color="ds.text_gray_medium">
       {from}
     </Typography>
-    <Typography
-      component="span"
-      variant="body2"
-      fontWeight="500"
-      color="ds.text_gray_low"
-      onClick={handleCurrencyChange}
-      sx={{ cursor: 'pointer', display: 'inline' }}
-    >
-      /{to}
-    </Typography>
-  </Typography>
+    <IconWrapper onClick={handleCurrencyChange}>
+      <Switch />
+    </IconWrapper>
+  </Stack>
 );
 
 const Skeletons = ({ theme }) => (