added new UI for account switcher (#883)

Co-authored-by: ost-ptk <[email protected]>
make-software · Dec 7, 2023 · 99f6c43 · 99f6c43
1 parent ce52dd2
commit 99f6c43
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 51 deletions.
diff --git a/src/libs/ui/components/account-list/account-list.tsx b/src/libs/ui/components/account-list/account-list.tsx
@@ -7,7 +7,6 @@ import {
   AlignedFlexRow,
   CenteredFlexRow,
   FlexColumn,
-  FlexRow,
   LeftAlignedFlexColumn,
   SpacingSize
 } from '@libs/layout';
@@ -22,13 +21,12 @@ import { sortAccounts } from '@libs/ui/components/account-list/utils';
 import { getAccountHashFromPublicKey } from '@libs/entities/Account';
 import {
   AccountActionsMenuPopover,
+  Avatar,
   Button,
-  Checkbox,
   Hash,
   HashVariant,
   List,
-  Typography,
-  ConnectionStatusBadge
+  Typography
 } from '@libs/ui';
 import { RouterPath, useTypedNavigate } from '@popup/router';
 import { WindowApp } from '@background/create-open-window';
@@ -38,22 +36,16 @@ const ListItemContainer = styled(FlexColumn)`
   min-height: 68px;
   height: 100%;
 
-  padding: 12px 8px 12px 16px;
+  padding: 16px 8px 16px 16px;
 `;
 
-const ListItemClickableContainer = styled(FlexRow)`
+const ListItemClickableContainer = styled(AlignedFlexRow)`
   width: 100%;
   cursor: pointer;
 `;
 
 const AccountNameWithHashListItemContainer = styled(LeftAlignedFlexColumn)`
   width: 100%;
-
-  padding-left: 16px;
-`;
-
-const ConnectionStatusBadgeContainer = styled.div`
-  margin-left: 44px;
 `;
 
 const ButtonContainer = styled(CenteredFlexRow)`
@@ -91,17 +83,18 @@ export const AccountList = ({ closeModal }: AccountListProps) => {
     }));
 
     setAccountListRows(accountListRows);
-    // We need to sort the account list only on the component mount
+    // We need to sort the account list only on the component mount and when new accounts are added
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [accounts]);
 
   return (
     <List
       rows={accountListRows}
       contentTop={SpacingSize.None}
-      maxHeight={380}
+      maxHeight={402}
       renderRow={(account, index) => {
         const isConnected = connectedAccountNames.includes(account.name);
+        const isActiveAccount = activeAccountName === account.name;
 
         return (
           <ListItemContainer key={account.name}>
@@ -111,13 +104,15 @@ export const AccountList = ({ closeModal }: AccountListProps) => {
                   changeActiveAccount(account.name);
                   closeModal(event);
                 }}
+                gap={SpacingSize.Medium}
               >
-                <Checkbox
-                  checked={
-                    activeAccountName
-                      ? activeAccountName === account.name
-                      : false
-                  }
+                <Avatar
+                  size={38}
+                  publicKey={account.publicKey}
+                  withConnectedStatus
+                  isConnected={isConnected}
+                  displayContext="accountList"
+                  isActiveAccount={isActiveAccount}
                 />
                 <AccountNameWithHashListItemContainer>
                   <Typography
@@ -148,18 +143,10 @@ export const AccountList = ({ closeModal }: AccountListProps) => {
                 onClick={closeModal}
               />
             </AlignedFlexRow>
-            {isConnected && (
-              <ConnectionStatusBadgeContainer>
-                <ConnectionStatusBadge
-                  isConnected
-                  displayContext="accountList"
-                />
-              </ConnectionStatusBadgeContainer>
-            )}
           </ListItemContainer>
         );
       }}
-      marginLeftForItemSeparatorLine={60}
+      marginLeftForItemSeparatorLine={70}
       renderFooter={() => (
         <ButtonContainer gap={SpacingSize.Large}>
           <Button

diff --git a/src/libs/ui/components/avatar/avatar.tsx b/src/libs/ui/components/avatar/avatar.tsx
@@ -1,6 +1,7 @@
 import Identicon from 'react-identicons';
 import React from 'react';
 import styled, { DefaultTheme, useTheme } from 'styled-components';
+import { useSelector } from 'react-redux';
 
 import {
   SpacingSize,
@@ -9,23 +10,34 @@ import {
   CenteredFlexRow
 } from '@libs/layout';
 import { isValidAccountHash, isValidPublicKey } from '@src/utils';
-import { hexToRGBA, SvgIcon } from '@libs/ui';
-import { useSelector } from 'react-redux';
+import { SvgIcon } from '@libs/ui';
 import { selectDarkModeSetting } from '@background/redux/settings/selectors';
 
-const RoundedIdenticon = styled(Identicon)<{
-  displayContext?: 'header';
-  isDarkMode: boolean;
-}>`
-  border-radius: ${({ theme, displayContext }) =>
-    displayContext ? theme.borderRadius.base : theme.borderRadius.eight}px;
-  border: ${({ displayContext, isDarkMode, theme }) =>
-    displayContext
-      ? isDarkMode
-        ? `0.5px solid ${theme.color.contentDisabled}}`
-        : `0.5px solid ${hexToRGBA(theme.color.black, '0.16')}`
-      : 'none'};
-`;
+const RoundedIdenticon = styled(Identicon)(
+  ({
+    theme,
+    displayContext,
+    isActiveAccount,
+    isConnected
+  }: {
+    theme: DefaultTheme;
+    displayContext?: 'header' | 'accountList';
+    isActiveAccount?: boolean;
+    isConnected?: boolean;
+  }) => ({
+    borderRadius: theme.borderRadius.base,
+
+    ...(displayContext === 'accountList' && {
+      border: isActiveAccount
+        ? `3px solid ${
+            isConnected
+              ? theme.color.contentPositive
+              : theme.color.contentDisabled
+          }`
+        : `3px solid ${theme.color.backgroundPrimary}`
+    })
+  })
+);
 
 const IconHashWrapper = styled(CenteredFlexRow)(({ theme }) => ({
   color: theme.color.contentOnFill,
@@ -52,7 +64,8 @@ interface AvatarTypes {
   top?: SpacingSize;
   withConnectedStatus?: boolean;
   isConnected?: boolean;
-  displayContext?: 'header';
+  displayContext?: 'header' | 'accountList';
+  isActiveAccount?: boolean;
 }
 
 export const Avatar = ({
@@ -61,7 +74,8 @@ export const Avatar = ({
   top,
   withConnectedStatus,
   isConnected,
-  displayContext
+  displayContext,
+  isActiveAccount
 }: AvatarTypes) => {
   const theme = useTheme();
 
@@ -83,15 +97,30 @@ export const Avatar = ({
           size={size}
           bg={theme.color.contentOnFill}
           displayContext={displayContext}
-          isDarkMode={isDarkMode}
+          isActiveAccount={isActiveAccount}
+          isConnected={isConnected}
         />
         <SvgIcon
           src={connectIcon}
-          size={displayContext === 'header' ? 14 : 16}
+          size={
+            displayContext === 'header' || displayContext === 'accountList'
+              ? 12
+              : 16
+          }
           style={{
             position: 'absolute',
-            bottom: displayContext === 'header' ? '-4px' : '-5px',
-            right: displayContext === 'header' ? '-4px' : '-5px'
+            bottom:
+              displayContext === 'header'
+                ? '-4px'
+                : displayContext === 'accountList'
+                  ? '-2px'
+                  : '-5px',
+            right:
+              displayContext === 'header'
+                ? '-4px'
+                : displayContext === 'accountList'
+                  ? '-2px'
+                  : '-5px'
           }}
           color={isConnected ? 'contentPositive' : 'contentDisabled'}
         />