Update selectors and badge styles (ChainSafe#235)

Co-authored-by: Thibaut Sardan <[email protected]>
Co-authored-by: Thibaut Sardan <[email protected]>

packages/ui/src/App.tsx

@@ -1,23 +1,32 @@
 import './styles/App.css'
+import { CssBaseline, GlobalStyles } from '@mui/material'
 import { AccountContextProvider } from './contexts/AccountsContext'
 import { ApiContextProvider } from './contexts/ApiContext'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { MultiProxyContextProvider } from './contexts/MultiProxyContext'
 import ToastContextProvider from './contexts/ToastContext'
 import { theme } from './styles/theme'
-import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles'
+import { css, ThemeProvider as MuiThemeProvider } from '@mui/material/styles'
 import { AccountNamesContextProvider } from './contexts/AccountNamesContext'
 import { NetworkContextProvider } from './contexts/NetworkContext'
 import MainLayout from './components/layout/Main'
 import { WatchedAddressesContextProvider } from './contexts/WatchedAddressesContext'
-import { CssBaseline } from '@mui/material'
+import { AutocompleteStyles } from './components/library/Autocomplete'
+
+const appGlobalStyles = css`
+  .MuiAutocomplete-popper {
+    margin-top: 0.75rem !important;
+    ${AutocompleteStyles}
+  }
+`
 
 const App = () => {
   const queryClient = new QueryClient()
 
   return (
     <MuiThemeProvider theme={theme}>
       <CssBaseline />
+      <GlobalStyles styles={appGlobalStyles} />
       <ToastContextProvider>
         <NetworkContextProvider>
           <QueryClientProvider client={queryClient}>

packages/ui/src/components/AccountDisplay.tsx

@@ -102,7 +102,8 @@ const AccountDisplay = ({
             <NameStyled>{localName || mainDisplay}</NameStyled>
           </NameWrapperStyled>
         )}
-        <AddressStyled>{getDisplayAddress(encodedAddress)}</AddressStyled>
+        {!withName ||
+          (encodedAddress && <AddressStyled>{getDisplayAddress(encodedAddress)}</AddressStyled>)}
         {withBalance && (
           <Box>
             <BalanceStyled>{balanceFormatted}</BalanceStyled>
@@ -113,28 +114,41 @@ const AccountDisplay = ({
   )
 }
 
+const BoxStyled = styled(Box)`
+  min-width: 0;
+  margin-left: 0.5rem;
+  display: grid !important;
+  justify-content: start;
+  justify-items: start;
+`
+
 const NameWrapperStyled = styled('div')`
-  display: flex;
+  display: grid;
+  grid-auto-flow: column;
   align-items: center;
+
+  svg {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
 `
 
 const AddressStyled = styled('div')(
   ({ theme }) => `
-    color: ${theme.custom.text.addressColorLightGray};
-    font-size: small;
+    color: ${theme.custom.text.primary};
+    font-size: 1rem;
+    font-weight: 400;
 `
 )
 
-const BoxStyled = styled(Box)`
+const NameStyled = styled('div')`
+  color: ${({ theme }) => theme.custom.text.primary};
+  font-size: 1rem;
+  font-weight: 500;
   min-width: 0;
-  margin-left: 0.5rem;
-`
-
-const NameStyled = styled('span')`
-  font-size: large;
-  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 `
 
 const BalanceStyled = styled('div')(

packages/ui/src/components/Drawer/DrawerMenu.tsx

@@ -8,8 +8,8 @@ import ListItemText from '@mui/material/ListItemText'
 import { useAccounts } from '../../contexts/AccountsContext'
 import { useMultiProxy } from '../../contexts/MultiProxyContext'
 import { styled } from '@mui/material/styles'
-import NetworkSelection from '../NetworkSelection'
-import MultiProxySelection from '../MultiProxySelection'
+import NetworkSelection from '../select/NetworkSelection'
+import MultiProxySelection from '../select/MultiProxySelection'
 import { ROUTES } from '../../pages/routes'
 import { isEmptyArray } from '../../utils'
 import { useMemo } from 'react'

packages/ui/src/components/EasySetup/BalancesTransfer.tsx

@@ -2,7 +2,7 @@ import { Box, InputAdornment } from '@mui/material'
 import { styled } from '@mui/material/styles'
 import { SubmittableExtrinsic } from '@polkadot/api/types'
 import { ISubmittableResult } from '@polkadot/types/types'
-import GenericAccountSelection, { AccountBaseInfo } from '../GenericAccountSelection'
+import GenericAccountSelection, { AccountBaseInfo } from '../select/GenericAccountSelection'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { useAccountBaseFromAccountList } from '../../hooks/useAccountBaseFromAccountList'
 import { useApi } from '../../contexts/ApiContext'
@@ -118,10 +118,10 @@ const BalancesTransfer = ({ className, onSetExtrinsic, onSetErrorMessage, from }
         onChange={onAddressDestChange}
         value={selected}
         label="to"
+        disablePortal={false}
         allowAnyAddressInput={true}
       />
       <TextFieldStyled
-        className="amount"
         label={`Amount`}
         onChange={onAmountChange}
         value={amountString}

packages/ui/src/components/EasySetup/ManualExtrinsic.tsx

@@ -330,7 +330,6 @@ const ManualExtrinsic = ({
             <MenuItem
               key={text}
               value={text}
-              sx={{}}
             >
               <div className="networkName">{text}</div>
             </MenuItem>

packages/ui/src/components/Header/index.tsx

@@ -1,16 +1,15 @@
 import { Box, IconButton, Toolbar } from '@mui/material'
-import { Button } from '../library'
+import { Button, RouterLink } from '../library'
 import { styled } from '@mui/material/styles'
 import { useMemo } from 'react'
 import MuiAppBar from '@mui/material/AppBar'
-import MultiProxySelection from '../MultiProxySelection'
+import MultiProxySelection from '../select/MultiProxySelection'
 import { useAccounts } from '../../contexts/AccountsContext'
 import { Menu as MenuIcon } from '@mui/icons-material'
 import { useMultiProxy } from '../../contexts/MultiProxyContext'
 import { ROUTES } from '../../pages/routes'
 import { isEmptyArray } from '../../utils'
-import NetworkSelection from '../NetworkSelection'
-import { RouterLink } from '../library'
+import NetworkSelection from '../select/NetworkSelection'
 import { multixlogo } from '../../logos/multixLogo'
 
 interface Props {
@@ -69,7 +68,9 @@ const Header = ({ handleDrawerOpen }: Props) => {
 const MuiAppBarStyled = styled(MuiAppBar)(
   ({ theme }) => `
   margin-bottom: 1rem;
-  background: ${theme.palette.primary.main}
+  height: 4.8125rem;
+  background: ${theme.palette.primary.main};
+  justify-content: center;
 `
 )
 

packages/ui/src/components/IdenticonBadge.tsx

@@ -25,23 +25,44 @@ export const IdenticonBadge = ({ className, badge, address }: Props) => {
   }
 
   return (
-    <Badge
+    <BadgeStyled
       className={`${className} ${appliedClass}`}
+      badgeType={badge}
       color="primary"
       badgeContent={badge}
       anchorOrigin={{ horizontal: 'left', vertical: 'top' }}
     >
       <AccountIcon />
-    </Badge>
+    </BadgeStyled>
   )
 }
 
-export default styled(IdenticonBadge)`
+const BadgeStyled = styled(Badge)<{ badgeType: AccountBadge }>`
+  padding-left: 1rem;
+
   .MuiBadge-badge {
-    box-shadow: ${({ theme }) => theme.custom.boxShadow};
-  }
+    max-width: 2.625rem;
+    padding: 0.25rem 0.5rem;
+    max-height: 1.3125rem;
+    font-size: 0.625rem;
+    font-weight: 500;
+    border-radius: 0.9375rem;
+    border: 1px solid ${({ theme }) => theme.custom.gray[400]};
+    transform: scale(1) translate(-20%, 0);
 
-  &.red > .MuiBadge-badge {
-    background-color: ${({ theme }) => theme.custom.identity.red};
-  }
+    ${({ theme, badgeType }) =>
+      badgeType === AccountBadge.PURE &&
+      `
+        color: ${theme.custom.gray[100]};
+        background-color: ${theme.custom.proxyBadge.pure} !important;
+      `};
+
+    ${({ theme, badgeType }) =>
+      badgeType === AccountBadge.MULTI &&
+      `
+        color: ${theme.custom.text.black};
+        background-color: ${theme.custom.proxyBadge.multi} !important;
+      `};
 `
+
+export default IdenticonBadge