Tidy up chain selector & token list dropdown & simplify home page on mobile

src/components/chain-selector/ChainSelector.tsx

@@ -2,6 +2,7 @@ import Button from 'components/button'
 import Base from 'components/icons/logos/Base'
 import Ethereum from 'components/icons/logos/Ethereum'
 import Popup from 'components/popup'
+import { transition } from 'theme'
 import { useAtom, useAtomValue } from 'jotai'
 import { useState } from 'react'
 import { Check, ChevronDown, ChevronUp } from 'react-feather'
@@ -38,7 +39,7 @@ const ChainList = ({ onSelect }: { onSelect(chain: number): void }) => {
         maxHeight: 320,
         overflow: 'auto',
         backgroundColor: 'background',
-        borderRadius: '13px',
+        borderRadius: '12px',
       }}
     >
       {CHAIN_LIST.map((chain) => {
@@ -47,34 +48,42 @@ const ChainList = ({ onSelect }: { onSelect(chain: number): void }) => {
         return (
           <Box
             variant="layout.verticalAlign"
-            sx={{ cursor: 'pointer', position: 'relative' }}
+            sx={{
+              cursor: 'pointer',
+              position: 'relative',
+              backgroundColor:
+                selected === chain.id ? 'contentBackground' : 'background',
+              transition: transition,
+              ':hover': {
+                backgroundColor: 'contentBackground',
+                borderLeft: '2px solid',
+                borderColor: 'primary',
+              },
+            }}
             onClick={() => onSelect(chain.id)}
             key={chain.id}
           >
-            <Box
-              sx={{
-                backgroundColor:
-                  selected === chain.id ? 'primary' : 'background',
-                width: '3px',
-                height: '20px',
-              }}
-            />
-            <Box variant="layout.verticalAlign" p={3}>
+            <Box variant="layout.verticalAlign" p={3} mr={'auto'}>
               <Icon fontSize={20} />
               <Text ml={3}>{chain.label}</Text>
             </Box>
+            <Flex
+              mr={3}
+              mt={2}
+              sx={{
+                display: selected === chain.id ? 'block' : 'none',
+              }}
+            >
+              <Check size={16} />
+            </Flex>
           </Box>
         )
       })}
-      <Button
-        m={3}
-        variant="muted"
-        mt={0}
-        onClick={() => navigate(ROUTES.BRIDGE)}
-        small
-      >
-        Bridge assets
-      </Button>
+      <Box p={3} sx={{ borderTop: '1px solid', borderColor: 'darkBorder' }}>
+        <Button variant="muted" onClick={() => navigate(ROUTES.BRIDGE)}>
+          Bridge assets
+        </Button>
+      </Box>
     </Box>
   )
 }
@@ -107,7 +116,7 @@ const ChainSelector = (props: BoxProps) => {
       onDismiss={() => setVisible(false)}
       content={<ChainList onSelect={handleSelect} />}
       containerProps={{
-        sx: { border: '2px solid', borderColor: 'primary' },
+        sx: { border: '2px solid', borderColor: 'darkBorder' },
       }}
     >
       <Flex

src/components/icons/BackHomeIcon.tsx

@@ -9,7 +9,7 @@ const BackHomeIcon = (props: SVGProps<SVGSVGElement>) => (
     {...props}
   >
     <path
-      fill="white"
+      fill="currentColor"
       fillRule="evenodd"
       d="M4.355 19.1V9.092L12 3.146l7.645 5.946V19.1a.995.995 0 0 1-.995.995h-3.801V11.5h-5.7v8.595H5.35a.995.995 0 0 1-.995-.995ZM9.149 21H18.65a1.9 1.9 0 0 0 1.9-1.9V8.65L12 2 3.45 8.65V19.1a1.9 1.9 0 0 0 1.9 1.9h3.8Zm4.795-.905h-3.89v-7.69h3.89v7.69Z"
       clipRule="evenodd"

src/components/icons/logos/Ethereum.tsx

@@ -9,24 +9,42 @@ const Ethereum = (props: SVGProps<SVGSVGElement>) => (
     imageRendering="optimizeQuality"
     shapeRendering="geometricPrecision"
     textRendering="geometricPrecision"
-    viewBox="0 0 784.37 1277.39"
+    viewBox="0 0 20 20"
     width="1em"
     height="1em"
     {...props}
   >
-    <g fillRule="nonzero">
+    <g clipPath="url(#clip0_7718_4308)">
       <path
-        fill="#343434"
-        d="m392.07 0-8.57 29.11v844.63l8.57 8.55 392.06-231.75z"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10 20C15.508 20 20 15.508 20 10C20 4.493 15.508 0 10 0C4.493 0 1.66894e-07 4.493 1.66894e-07 10C-0.000999833 15.508 4.492 20 10 20Z"
+        fill="#627EEA"
       />
-      <path fill="#8C8C8C" d="M392.07 0 0 650.54l392.07 231.75V472.33z" />
       <path
-        fill="#3C3C3B"
-        d="m392.07 956.52-4.83 5.89v300.87l4.83 14.1 392.3-552.49z"
+        d="M9.99907 2.5L9.89844 2.84184V12.7602L9.99907 12.8606L14.603 10.1392L9.99907 2.5Z"
+        fill="#C1CCF6"
+      />
+      <path
+        d="M9.99857 2.5L5.39453 10.1392L9.99857 12.8606V8.04652V2.5Z"
+        fill="white"
+      />
+      <path
+        d="M9.9991 13.7322L9.94238 13.8014V17.3345L9.9991 17.5L14.6058 11.0122L9.9991 13.7322Z"
+        fill="#C1CCF6"
+      />
+      <path
+        d="M9.99881 17.5V13.7322L5.39478 11.0122L9.99881 17.5Z"
+        fill="white"
+      />
+      <path
+        d="M9.99878 12.8605L14.6027 10.1391L9.99878 8.04639V12.8605Z"
+        fill="#8198EE"
+      />
+      <path
+        d="M5.39478 10.1391L9.99881 12.8605V8.04639L5.39478 10.1391Z"
+        fill="#C1CCF6"
       />
-      <path fill="#8C8C8C" d="M392.07 1277.38V956.52L0 724.89z" />
-      <path fill="#141414" d="m392.07 882.29 392.06-231.75-392.06-178.21z" />
-      <path fill="#393939" d="m0 650.54 392.07 231.75V472.33z" />
     </g>
   </svg>
 )

src/components/layout/header/AppHeader.tsx

@@ -94,7 +94,8 @@ const AppHeader = () => (
         <LanguageSelector />
       </Box> */}
     <Divider />
-    <ChainSelector mr={3} />
+    <ChainSelector mr={[3, 0]} />
+    <Divider />
     <Account />
   </Container>
 )

src/components/popup/index.tsx

@@ -10,8 +10,8 @@ const Popup = ({ content, containerProps = {}, ...props }: PopoverProps) => {
           {...containerProps}
           sx={{
             backgroundCcolor: 'contentBackground',
-            border: '1px solid',
-            borderColor: 'invertedText',
+            border: '2px solid',
+            borderColor: 'darkBorder',
             borderRadius: '14px',
             boxShadow: '0px 10px 25px rgba(0, 0, 0, 0.2)',
             ...(containerProps.sx || {}),

src/components/rtoken-selector/TokenList.tsx

@@ -17,7 +17,8 @@ const ActionItem = styled(Flex)`
   cursor: pointer;
 
   &:hover {
-    background-color: #6d3210;
+    background-color: var(--theme-ui-colors-contentBackground);
+    border-left: 2px solid var(--theme-ui-colors-primary);
   }
 `
 
@@ -40,10 +41,10 @@ const TokenList = memo(
       <Box
         sx={{
           maxHeight: 320,
-          minWidth: 200,
+          minWidth: 250,
           overflow: 'auto',
-          backgroundColor: 'black',
-          borderRadius: '13px',
+          backgroundColor: 'background',
+          borderRadius: '12px',
         }}
       >
         <Box>
@@ -52,27 +53,29 @@ const TokenList = memo(
             onClick={onHome}
           >
             <BackHomeIcon />
-            <Text ml={2} sx={{ color: 'invertedText' }}>
+            <Text ml={2} sx={{ color: 'text' }}>
               <Trans>Dashboard</Trans>
             </Text>
           </ActionItem>
         </Box>
         {!!Object.values(tokens).length && (
           <Divider
-            sx={{ border: '1px dashed', borderColor: 'invertedText' }}
+            sx={{ border: '1px dashed', borderColor: 'darkBorder' }}
             my={0}
           />
         )}
         {Object.values(tokens).map(({ address, logo, symbol, chainId }) => (
-          <ActionItem key={address} onClick={async () => {
-
-            if (currentChainId !== chainId && switchNetwork) {
-              switchNetwork(chainId!)
-            }
-            onSelect(address)
-          }}>
+          <ActionItem
+            key={address}
+            onClick={async () => {
+              if (currentChainId !== chainId && switchNetwork) {
+                switchNetwork(chainId!)
+              }
+              onSelect(address)
+            }}
+          >
             <TokenItem
-              sx={{ color: 'invertedText' }}
+              sx={{ color: 'text' }}
               symbol={symbol}
               logo={logo}
               chainId={chainId}