SD-98: UI Improvements

Author: rAskVAL

src/domains/chains/components/ChainSelector.tsx

@@ -56,18 +56,15 @@ const ChainSelector = () => {
         ) : (
           '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;
@@ -80,7 +77,9 @@ const StyledSelectBox = styled(SelectBox)`
 
 const StyledButton = styled(Button)`
   display: flex;
-
+  position: relative;
+  overflow: hidden;
+  
   align-items: center;
   justify-content: space-between;
   gap: ${vars('--spacing-s')};
@@ -110,3 +109,12 @@ 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

@@ -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

@@ -89,8 +89,8 @@ const SignatureModal = () => {
               To create a Shielded account, a one-time signature is required.
               Approve message in your wallet to automatically continue or disconnect.
             </Text>
-            <LearnMore>
-              <a href={KEY_GENERATION_PROCESS_LINK} target="_blank" rel="noopener noreferrer">Learn more</a>
+            <LearnMore href={KEY_GENERATION_PROCESS_LINK} target="_blank" rel="noopener noreferrer">
+              <p>Learn more</p>
               <CIcon icon="Open" size={20} />
             </LearnMore>
             <Buttons>
@@ -139,7 +139,7 @@ const Buttons = styled.div`
   width: 100%;
 `;
 
-const LearnMore = styled.div`
+const LearnMore = styled.a`
   display: flex;
   gap: ${vars('--spacing-xs')};
   ${typography.web.body1};