Tweak styles of WalletTypeLabel

src/renderer/components/AccountAddressSelector/AccountAddressSelector.styles.tsx

@@ -71,13 +71,13 @@ export const MenuItem = styled(MenuUI.Item)`
   margin: 0;
 `
 
-export const MenuItemWrapper = styled.div<{ highlighted: boolean }>`
+export const MenuItemWrapper = styled.div<{ selected: boolean }>`
   display: flex;
   flex-direction: row;
   align-items: center;
   font-size: 14px;
   padding: 5px;
-  background-color: ${(props) => (props.highlighted ? palette('background', 2) : 'inherit')};
+  background-color: ${({ selected }) => (selected ? palette('background', 2) : 'inherit')};
 
   &:hover,
   &:active {
@@ -89,6 +89,8 @@ export const AssetIcon = styled(AssetIconUI)`
   margin: 3px;
 `
 
-export const WalletTypeLabel = styled(WalletTypeLabelUI)`
-  line-height: 16px;
+export const WalletTypeLabel = styled(WalletTypeLabelUI)<{ selected: boolean }>`
+  line-height: 14px;
+
+  background: ${({ selected }) => (selected ? palette('gray', 1) : palette('gray', 0))};
 `

src/renderer/components/AccountAddressSelector/AccountAddressSelector.tsx

@@ -40,7 +40,7 @@ export const AccountAddressSelector: React.FC<Props> = (props) => {
   const intl = useIntl()
 
   const menu = useMemo(() => {
-    const highlight = (address: WalletAddress) =>
+    const isSelected = (address: WalletAddress) =>
       FP.pipe(
         oSelectedAddress,
         O.fold(
@@ -55,13 +55,14 @@ export const AccountAddressSelector: React.FC<Props> = (props) => {
           addresses,
           A.map((walletAddress) => {
             const { address, type, chain } = walletAddress
+            const selected = isSelected(walletAddress)
             return (
               <Styled.MenuItem key={address} onClick={() => onChangeAddress(walletAddress)}>
-                <Styled.MenuItemWrapper key={address} highlighted={highlight(walletAddress)}>
+                <Styled.MenuItemWrapper key={address} selected={selected}>
                   <Styled.AssetIcon asset={getChainAsset(chain)} size={size} network={network} />
                   <Styled.WalletAddress>{address}</Styled.WalletAddress>
                   {isLedgerWallet(type) && (
-                    <Styled.WalletTypeLabel>{walletTypeToI18n(type, intl)}</Styled.WalletTypeLabel>
+                    <Styled.WalletTypeLabel selected={selected}>{walletTypeToI18n(type, intl)}</Styled.WalletTypeLabel>
                   )}
                 </Styled.MenuItemWrapper>
               </Styled.MenuItem>

src/renderer/components/uielements/common/Common.styles.ts

@@ -18,9 +18,11 @@ export const WalletTypeLabel = styled(UILabel).attrs({
   size: 'small'
 })`
   font-family: 'MainFontRegular';
-  color: ${palette('color', 2)};
-  background: ${palette('gray', 1)};
+  color: ${palette('text', 2)};
+
+  background: ${palette('gray', 0)};
+  text-shadow: 1px 1px 1px ${palette('background', 1)};
   border-radius: 5px;
-  padding: 1px 3px;
+  padding: 1px 7px;
   width: auto;
 `

src/renderer/components/wallet/account/AccountSelector.styles.ts

@@ -24,33 +24,35 @@ export const AssetInfoWrapper = styled.div`
   margin-left: 16px;
 `
 
-export const AssetTitle = styled.p`
-  margin-bottom: 0;
+export const AssetTitleWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`
+export const AssetTitle = styled.div`
   font-size: 32px;
   font-family: 'MainFontRegular';
   color: ${palette('text', 0)};
-  line-height: 38px;
+  line-height: 34px;
   text-transform: uppercase;
 `
 
-export const AssetSubTitle = styled.p`
-  margin-bottom: 5px;
-  font-size: 18px;
+export const AssetSubTitle = styled.div`
+  font-size: 17px;
   font-family: 'MainFontRegular';
   color: ${palette('text', 2)};
-  line-height: 22px;
+  line-height: 21px;
   text-transform: uppercase;
 `
 
-export const Label = styled(UILabel).attrs({
+export const ChangeLabel = styled(UILabel).attrs({
   textTransform: 'uppercase',
   color: 'primary',
-  size: 'big'
+  size: 'normal'
 })`
   padding: 0;
   cursor: pointer;
 `
 
 export const WalletTypeLabel = styled(WalletTypeLabelUI)`
-  margin: -20px 0px 0px 10px;
+  margin-left: 10px;
 `

src/renderer/components/wallet/account/AccountSelector.tsx

@@ -80,7 +80,12 @@ export const AccountSelector: React.FC<Props> = (props): JSX.Element => {
       <Styled.AssetWrapper>
         <AssetIcon asset={selectedWallet.asset} size={size} network={network} />
         <Styled.AssetInfoWrapper>
-          <Styled.AssetTitle>{selectedWallet.asset.ticker}</Styled.AssetTitle>
+          <Styled.AssetTitleWrapper>
+            <Styled.AssetTitle>{selectedWallet.asset.ticker}</Styled.AssetTitle>
+            {isLedgerWallet(selectedWallet.walletType) && (
+              <Styled.WalletTypeLabel>{intl.formatMessage({ id: 'ledger.title' })}</Styled.WalletTypeLabel>
+            )}
+          </Styled.AssetTitleWrapper>
           <Styled.AssetSubTitle>{selectedWallet.asset.chain}</Styled.AssetSubTitle>
 
           {enableDropdown && (
@@ -90,14 +95,11 @@ export const AccountSelector: React.FC<Props> = (props): JSX.Element => {
                   such as "Function components cannot be given refs"
               */}
               <div>
-                <Styled.Label>{intl.formatMessage({ id: 'common.change' })}</Styled.Label>
+                <Styled.ChangeLabel>{intl.formatMessage({ id: 'common.change' })}</Styled.ChangeLabel>
               </div>
             </Dropdown>
           )}
         </Styled.AssetInfoWrapper>
-        {isLedgerWallet(selectedWallet.walletType) && (
-          <Styled.WalletTypeLabel>{intl.formatMessage({ id: 'ledger.title' })}</Styled.WalletTypeLabel>
-        )}
       </Styled.AssetWrapper>
     </Styled.Card>
   )

src/renderer/components/wallet/assets/AssetsTableCollapsable.styles.ts

@@ -5,6 +5,7 @@ import { palette } from 'styled-theme'
 
 import { Label as UILabel } from '../../../components/uielements/label'
 import { Button as UIButton } from '../../uielements/button'
+import { WalletTypeLabel as WalletTypeLabelUI } from '../../uielements/common/Common.styles'
 import { Table as UITable } from '../../uielements/table'
 
 export const Table = styled(UITable)`
@@ -145,3 +146,8 @@ export const UpgradeButton = styled(UIButton).attrs({
     margin-left: 10px;
   }
 `
+
+export const WalletTypeLabel = styled(WalletTypeLabelUI)`
+  background: ${palette('gray', 1)};
+  padding: 0 5px;
+`

src/renderer/components/wallet/assets/AssetsTableCollapsable.tsx

@@ -27,7 +27,6 @@ import { walletTypeToI18n } from '../../../services/wallet/util'
 import { PricePool } from '../../../views/pools/Pools.types'
 import { ErrorView } from '../../shared/error/'
 import { AssetIcon } from '../../uielements/assets/assetIcon'
-import { WalletTypeLabel } from '../../uielements/common/Common.styles'
 import { QRCodeModal } from '../../uielements/qrCodeModal/QRCodeModal'
 import * as Styled from './AssetsTableCollapsable.styles'
 
@@ -360,7 +359,9 @@ export const AssetsTableCollapsable: React.FC<Props> = (props): JSX.Element => {
               <Styled.HeaderLabel>{chainToString(chain)}</Styled.HeaderLabel>
               {
                 // show tag for NON keystore wallets only (e.g. Ledger)
-                !isKeystoreWallet(walletType) && <WalletTypeLabel>{walletTypeToI18n(walletType, intl)}</WalletTypeLabel>
+                !isKeystoreWallet(walletType) && (
+                  <Styled.WalletTypeLabel>{walletTypeToI18n(walletType, intl)}</Styled.WalletTypeLabel>
+                )
               }
             </Styled.HeaderChainContainer>
           </Col>

src/renderer/components/wallet/settings/WalletSettings.styles.ts

@@ -277,6 +277,11 @@ export const AddressToVerifyLabel = styled.span`
   text-transform: none;
 `
 
+export const AccountAddressWrapper = styled.div`
+  margin-top: 10px;
+`
+
 export const WalletTypeLabel = styled(WalletTypeLabelUI)`
-  margin: 15px 0px 0px 40px;
+  margin-left: 40px;
+  display: inline-block;
 `

src/renderer/components/wallet/settings/WalletSettings.tsx

@@ -232,10 +232,10 @@ export const WalletSettings: React.FC<Props> = (props): JSX.Element => {
                     {accounts.map((account, j) => {
                       const { type } = account
                       return (
-                        <>
+                        <Styled.AccountAddressWrapper key={type}>
                           <Styled.WalletTypeLabel>{walletTypeToI18n(type, intl)}</Styled.WalletTypeLabel>
                           <Styled.AccountContent key={j}>{renderAddress(chain, account)}</Styled.AccountContent>
-                        </>
+                        </Styled.AccountAddressWrapper>
                       )
                     })}
                   </Styled.ListItem>