SD-98: UI Improvements

Author: rAskVAL

src/domains/chains/components/ChainIcon.tsx

@@ -1,20 +1,23 @@
 import styled, { css } from 'styled-components';
 
+import supportedChains from 'src/domains/chains/utils/supportedChains';
 import useChain from 'src/domains/chains/utils/useChain';
 import vars from 'src/domains/styling/utils/vars';
 
 type Props = {
   chainId: number | string,
   size?: number,
   className?: string,
-  isTestnet?: boolean,
 };
-const ChainIcon = ({ chainId, size = 16, className, isTestnet }: Props) => {
+const { testnet } = supportedChains;
+
+const ChainIcon = ({ chainId, size = 16, className }: Props) => {
   const { ChainIcon } = useChain(chainId) ?? {};
+  const isTestnet = testnet.some(c => c.id === chainId);
 
   return (
     <Container
-      $isTestnet={!!isTestnet}
+      $isTestnet={isTestnet}
       style={{ height: size, width: size, borderRadius: size * 0.25 }}
       className={className}
     >

src/domains/chains/components/ChainSelector.tsx

@@ -21,23 +21,18 @@ const ChainSelector = () => {
   const chainConfig = useChain();
   const isLargeScreen = useMediaQuery(`(min-width: ${BREAKPOINTS.sm})`);
   const { switchNetwork } = useAppKitNetwork();
-  const isSelectedChainTestnet = testnet.some(c => c.id === chainConfig?.id);
 
-  const renderOption = (chain: Definition) => {
-    const isTestnet = testnet.some(c => c.id === chain.id);
-
-    return {
-      onClick: () => void switchNetwork(chain),
-      text:
+  const renderOption = (chain: Definition) => ({
+    onClick: () => void switchNetwork(chain),
+    text:
       (
         <Option>
-          <ChainIcon size={20} chainId={chain.id} isTestnet={isTestnet} />
+          <ChainIcon size={20} chainId={chain.id} />
           <p>{chain.name}</p>
           {chainConfig?.id === chain.id && <CIcon size={20} icon="CheckmarkRegular" />}
         </Option>
       ),
-    };
-  };
+  });
 
   return (
     <StyledSelectBox
@@ -50,24 +45,21 @@ const ChainSelector = () => {
       <StyledButton variant="secondary">
         {chainConfig ? (
           <ButtonLeftContent>
-            <ChainIcon chainId={chainConfig.id} size={24} isTestnet={isSelectedChainTestnet} />
+            <ChainIcon chainId={chainConfig.id} size={24} />
             {isLargeScreen && chainConfig.name}
           </ButtonLeftContent>
         ) : (
           'Select Network'
         )}
-        <ChevronIcon icon="ChevronLeft" />
+        <CIcon icon="Chevron" color={vars('--color-neutral-foreground-3-rest')} />
+        <UnderLine />
       </StyledButton>
     </StyledSelectBox>
   );
 };
 
 export default ChainSelector;
 
-const ChevronIcon = styled(CIcon)`
-  transform: rotate(180deg);
-`;
-
 const ButtonLeftContent = styled.div`
   display: flex;
   align-items: center;
@@ -81,6 +73,8 @@ const StyledSelectBox = styled(SelectBox)`
 const StyledButton = styled(Button)`
   display: flex;
 
+  position: relative;
+
   align-items: center;
   justify-content: space-between;
   gap: ${vars('--spacing-s')};
@@ -90,6 +84,7 @@ const StyledButton = styled(Button)`
 
   background: ${vars('--color-neutral-background-1-rest')};
   border-color: ${vars('--color-neutral-stroke-2-rest')};
+  overflow: hidden;
 
   ${typography.web.body1};
 
@@ -110,3 +105,14 @@ const Option = styled.div`
     margin-left: auto;
   }
 `;
+
+const UnderLine = styled.div`
+  position: absolute;
+  left: 0;
+  bottom: 0;
+
+  height: 1px;
+  width: 100%;
+
+  background: ${vars('--color-neutral-stroke-2-rest')};
+`;

src/domains/misc/components/CIcon/icons.ts

@@ -23,6 +23,7 @@ import ChatHelp from './icons/chatHelp.svg?react';
 import CheckmarkCircle from './icons/checkmarkCircle.svg?react';
 import CheckmarkRegular from './icons/checkmarkRegular.svg?react';
 import CheckmarkStarburst from './icons/checkmarkStarburst.svg?react';
+import Chevron from './icons/chevron.svg?react';
 import ChevronDoubleDownRegular from './icons/chevronDoubleDownRegular.svg?react';
 import ChevronLeft from './icons/chevronLeft.svg?react';
 import ClipboardPaste from './icons/clipboardPaste.svg?react';
@@ -94,6 +95,7 @@ export const icons = {
   CheckmarkCircle,
   CheckmarkRegular,
   CheckmarkStarburst,
+  Chevron,
   ChevronDoubleDownRegular,
   ChevronLeft,
   ClipboardPaste,

src/domains/misc/components/CIcon/icons/chevron.svg

@@ -7,7 +7,7 @@ const tabsConfig = [
   {
     key: 'shield',
     label: 'Shielded Account',
-    routeNames: ['Shielded-Account'],
+    routeNames: ['Shielded-Account', 'Shielded-Account-With-Chain'],
     onClick: () => void router.push('Shielded-Account'),
   },
   {
@@ -25,7 +25,7 @@ type Props = {
 };
 
 const Navigation = (props: Props) => {
-  const route = router.useRoute(['Shielded-Account']);
+  const route = router.useRoute(['Shielded-Account', 'Shielded-Account-With-Chain']);
 
   const selectedTab = tabsConfig.find(tabConfig => tabConfig.routeNames.includes(route?.name as never));
 

src/domains/misc/components/Layout/Navigation.tsx

@@ -108,6 +108,7 @@ export const UserCanvas = styled(Canvas)`
   padding-inline: ${vars('--spacing-s')};
   border: 1px solid transparent;
   transition: all ${transitionTime};
+  height: 100%;
 
   @media (width <= ${BREAKPOINTS.lg}) { /* stylelint-disable-line media-query-no-invalid */
     border-bottom-left-radius: ${vars('--spacing-l')};

src/domains/misc/components/Layout/TopBar/NavBox.tsx

@@ -35,16 +35,17 @@ const TopBar = () => {
         {isConnected ? (
           <AccountManager>
             <ChainSelector />
+            <Divider />
             <AccountDetails>
               <AccountIcon />
               {address && formatAddress(address)}
-              <Button
+              <PowerButton
                 variant="transparent"
                 leftIcon="Power"
                 size="small"
                 onClick={() => void disconnect()}
               >
-              </Button>
+              </PowerButton>
             </AccountDetails>
           </AccountManager>
         ) : (
@@ -93,3 +94,13 @@ const AccountManager = styled.div`
 const AccountIcon = styled(UserIcon)`
   margin-right: ${vars('--spacing-s')};
 `;
+
+const Divider = styled.div`
+  width: 1px;
+  background: ${vars('--color-neutral-stroke-2-rest')};
+  height: 54px;
+`;
+
+const PowerButton = styled(Button)`
+  color: ${vars('--color-neutral-foreground-2-rest')};
+`;

src/domains/misc/components/Layout/TopBar/TopBar.tsx

@@ -100,10 +100,10 @@ const BalanceName = styled.div`
   background: inherit;
 `;
 
-const AdditionalInfo = styled.p`
+const AdditionalInfo = styled.div`
   display: flex;
   align-items: center;
-  padding-right: ${vars('--spacing-l')};
+  padding-right: ${vars('--spacing-xs')};
 `;
 
 const Checked = styled(CheckmarkChecked)`

src/domains/shielder/components/AccountTypeSelector/AccountTypeSelector.tsx

@@ -34,7 +34,7 @@ const Activity = () => {
       const timestamp = tx.submitTimestamp ?? tx.completedTimestamp;
       if (!timestamp) return acc;
 
-      const dateString = dayjs(Number(timestamp)).format('MMM D');
+      const dateString = dayjs(Number(timestamp)).format('MMM, DD');
 
       const existingTransactions = acc[dateString] ?? [];
 

src/domains/shielder/components/Activity/Activity.tsx

@@ -98,10 +98,12 @@ useState<keyof typeof TABS>('tokens');
         ) : (
           <>
             {selectedAccountType === 'public' && (
-              <InfoBox>
-                <CIcon icon="Info" size={20} />
-                <p>Tokens that can be moved to shielded account:</p>
-              </InfoBox>
+              <WithPadding>
+                <InfoBox>
+                  <CIcon icon="Info" size={20} />
+                  <p>Tokens that can be moved to shielded account:</p>
+                </InfoBox>
+              </WithPadding>
             )}
             <TokensWrapper>
               <TokenList tokens={tokens} />
@@ -167,7 +169,7 @@ const InfoBox = styled.div`
   display: flex;
   align-items: center;
   gap: ${vars('--spacing-s')};
-  padding-left: ${vars('--spacing-s')};
+  padding-left: ${vars('--spacing-xs')};
   color: ${vars('--color-neutral-foreground-3-rest')};
   ${typography.web.body1Strong};
 `;