Merge pull request #212 from lc-labs/base-css

Tidy up chain selector & token list dropdown & simplify home page on mobile
reserve-protocol · Oct 16, 2023 · 5b37218 · 5b37218
2 parents 84d9775 + b7da3e7
commit 5b37218
Show file tree

Hide file tree

Showing 15 changed files with 171 additions and 83 deletions.
diff --git a/src/components/account/index.tsx b/src/components/account/index.tsx
@@ -100,11 +100,11 @@ const Account = () => {
                     onClick={openConnectModal}
                   >
                     <Text sx={{ display: ['none', 'initial'] }}>
+                      <Trans>Connect Wallet</Trans>
+                    </Text>
+                    <Text sx={{ display: ['inline', 'none'] }}>
                       <Trans>Connect</Trans>
                     </Text>
-                    <Box sx={{ display: ['inline', 'none'] }}>
-                      <Power size={12} />
-                    </Box>
                   </SmallButton>
                 )
               }

diff --git a/src/components/chain-selector/ChainSelector.tsx b/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

diff --git a/src/components/icons/BackHomeIcon.tsx b/src/components/icons/BackHomeIcon.tsx
@@ -8,12 +8,35 @@ const BackHomeIcon = (props: SVGProps<SVGSVGElement>) => (
     fill="none"
     {...props}
   >
-    <path
-      fill="white"
-      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"
-    />
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle
+        cx="5.17241"
+        cy="5.17241"
+        r="2.17241"
+        fill="#878787"
+        fill-opacity="0.5"
+      />
+      <circle cx="12.0001" cy="5.17241" r="2.17241" fill="currentColor" />
+      <circle
+        cx="18.8277"
+        cy="5.17241"
+        r="2.17241"
+        fill="#878787"
+        fill-opacity="0.5"
+      />
+      <circle cx="5.17241" cy="11.9999" r="2.17241" fill="currentColor" />
+      <circle cx="12.0001" cy="11.9999" r="2.17241" fill="#E7AC3B" />
+      <circle cx="18.8277" cy="11.9999" r="2.17241" fill="currentColor" />
+      <circle cx="5.17241" cy="18.8277" r="2.17241" fill="currentColor" />
+      <circle cx="12.0001" cy="18.8277" r="2.17241" fill="#92C5FA" />
+      <circle cx="18.8277" cy="18.8277" r="2.17241" fill="currentColor" />
+    </svg>
   </svg>
 )
 

diff --git a/src/components/icons/logos/Ethereum.tsx b/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>
 )

diff --git a/src/components/info-box/index.tsx b/src/components/info-box/index.tsx
@@ -57,7 +57,7 @@ export const InfoHeading = ({ title, subtitle, help, ...props }: Props) => (
     sx={{
       justifyContent: 'space-between',
       alignItems: 'start',
-      minWidth: [0, 390],
+      minWidth: ['auto', 390],
       maxWidth: '100%',
       flexDirection: ['column', 'row'],
     }}

diff --git a/src/components/layout/header/AppHeader.tsx b/src/components/layout/header/AppHeader.tsx
@@ -89,12 +89,19 @@ const AppHeader = () => (
       </Box>
     </Box>
     <Divider />
-    <ThemeColorMode pt={1} mr={[3, 0]} />
+    <ThemeColorMode
+      sx={{
+        display: ['none', 'flex'],
+      }}
+      pt={1}
+      mr={[3, 0]}
+    />
     {/* <Box ml={4} sx={{ alignItems: 'center', display: 'flex' }}>
         <LanguageSelector />
       </Box> */}
     <Divider />
-    <ChainSelector mr={3} />
+    <ChainSelector mr={[3, 0]} />
+    <Divider />
     <Account />
   </Container>
 )

diff --git a/src/components/popup/index.tsx b/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 || {}),

diff --git a/src/components/rtoken-selector/SelectedToken.tsx b/src/components/rtoken-selector/SelectedToken.tsx
@@ -36,10 +36,29 @@ const SelectedToken = () => {
   if (!selectedAddress) {
     return (
       <Box variant="layout.verticalAlign">
-        <BasketCubeIcon />
-        <Text ml={2}>
+        <Box
+          sx={{
+            display: ['none', 'flex'],
+          }}
+        >
+          <BasketCubeIcon />
+        </Box>
+        <Text
+          ml={2}
+          sx={{
+            display: ['none', 'flex'],
+          }}
+        >
           <Trans>Select RToken</Trans>
         </Text>
+        <Text
+          ml={2}
+          sx={{
+            display: ['flex', 'none'],
+          }}
+        >
+          <Trans>RTokens</Trans>
+        </Text>
       </Box>
     )
   }

diff --git a/src/components/rtoken-selector/TokenList.tsx b/src/components/rtoken-selector/TokenList.tsx
@@ -16,7 +16,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);
   }
 `
 
@@ -39,10 +40,10 @@ const TokenList = memo(
       <Box
         sx={{
           maxHeight: 320,
-          minWidth: 200,
+          minWidth: 250,
           overflow: 'auto',
-          backgroundColor: 'black',
-          borderRadius: '13px',
+          backgroundColor: 'background',
+          borderRadius: '12px',
         }}
       >
         <Box>
@@ -51,27 +52,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}

diff --git a/src/components/token-item/index.tsx b/src/components/token-item/index.tsx
@@ -1,7 +1,7 @@
 import TokenLogo from 'components/icons/TokenLogo'
 import Base from 'components/icons/logos/Base'
 import Ethereum from 'components/icons/logos/Ethereum'
-import { Text, BoxProps, Box } from 'theme-ui'
+import { Text, BoxProps, Box, Flex } from 'theme-ui'
 
 interface Props extends BoxProps {
   symbol: string
@@ -16,14 +16,14 @@ const TokenItem = ({ symbol, logo, width = 20, chainId, ...props }: Props) => (
     sx={{
       display: 'flex',
       flexDirection: 'row',
-      width: "100%",
-      justifyContent: "space-between"
+      width: '100%',
+      justifyContent: 'space-between',
     }}
   >
-    <Box sx={{ display: 'flex', flexDirection: 'row' }}>
+    <Flex variant="layout.verticalAlign">
       <TokenLogo width={24} mr={2} symbol={symbol} src={logo} />
       <Text {...props}>{symbol}</Text>
-    </Box>
+    </Flex>
     <Box>
       {chainId === 1 && <Ethereum />}
       {chainId === 8453 && <Base />}

diff --git a/src/theme.ts b/src/theme.ts
@@ -84,7 +84,7 @@ export const colors = {
   contentLightBackground: 'rgba(249, 248, 244, 0.5)',
   primary: '#000000',
   success: '#11BB8D',
-  accentAction: '#6D3210',
+  accentAction: '#973700',
   accentBG: 'contentBackground',
   secondary: '#E8E8E8',
   rBlue: '#2150A9',
@@ -113,7 +113,7 @@ export const colors = {
       primary: '#6D3210',
       secondary: '#33261f',
       disabled: '#231f1f',
-      accentAction: '#6D3210',
+      accentAction: '#973700',
       accentBG: '#1A0D05',
       border: '#1A1A1A',
       darkBorder: '#241c19',
@@ -374,10 +374,11 @@ export const theme: Theme = {
     },
     accentAction: {
       ...baseButton,
-      backgroundColor: 'accentBG',
-      color: 'accentAction',
-      border: '2px solid',
+      backgroundColor: 'transparent',
+      border: '1px solid',
       borderColor: 'accentAction',
+      color: 'accentAction',
+
       '&:hover': {
         backgroundColor: 'accentAction',
         color: 'white',