feat: new Home page design (Dark mode) (#1697)

---------

Co-authored-by: Nick <[email protected]>

package.json

@@ -68,7 +68,7 @@
     "@polkadot/types-support": "^14.3.1",
     "@polkadot/util": "^13.2.3",
     "@polkadot/util-crypto": "^13.2.3",
-    "@polkagate/apps-config": "^0.140.7",
+    "@polkagate/apps-config": "^0.140.9",
     "@substrate/connect": "^0.7.32",
     "@vaadin/icons": "^23.2.3",
     "babel-plugin-transform-import-meta": "^2.1.1",

packages/extension-base/src/background/types.ts

@@ -1,4 +1,4 @@
-// Copyright 2019-2024 @polkadot/extension authors & contributors
+// Copyright 2019-2025 @polkadot/extension authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
 /* eslint-disable no-use-before-define */
@@ -58,6 +58,7 @@ export interface AccountJson extends KeyringPair$Meta {
   profile?: string;
   stakingAccount?: string;
   addedTime?: number; // for DApp authorization check
+  selected?: boolean
 }
 
 export type AccountWithChildren = AccountJson & {

packages/extension-polkagate/src/assets/icons/index.ts

@@ -21,6 +21,7 @@ export { default as pastCrowdloanBlack } from './pastCrowdloanBlack.svg';
 export { default as pastCrowdloanRed } from './pastCrowdloanRed.svg';
 export { default as pastCrowdloanWhite } from './pastCrowdloanWhite.svg';
 export { default as riot } from './riot.svg';
+export { default as SafeBox } from './SafeBox.svg';
 export { default as soloSettingBlack } from './soloSettingBlack.svg';
 export { default as soloSettingWhite } from './soloSettingWhite.svg';
 export { default as stakingClose } from './stakingClose.svg';

packages/extension-polkagate/src/assets/logos/index.ts

@@ -2,9 +2,12 @@
 // SPDX-License-Identifier: Apache-2.0
 
 //@ts-nocheck
+export { default as BackgroundLogo } from './BackgroundLogo.png';
 export { default as logoMotionDark } from './logoMotionDark.gif';
 export { default as logoMotionLight } from './logoMotionLight.gif';
 export { default as logoBlack } from './pg-b.svg';
 export { default as logoPink } from './pg-p.svg';
 export { default as logoTransparent } from './pg-t.svg';
+export { default as logoBlackBirdTransparent } from './pg-t-b.svg';
+export { default as logoWhiteTransparent } from './pg-t-w.svg';
 export { default as logoWhite } from './pg-w.svg';

packages/extension-polkagate/src/components/AccountsTable.tsx

@@ -27,7 +27,7 @@ interface Props {
   manageConnectedAccounts?: boolean;
 }
 
-const sortAccounts = (accountA: AccountJson, accountB: AccountJson, selectedList: string[]): number => {
+export const sortAccounts = (accountA: AccountJson, accountB: AccountJson, selectedList: string[]): number => {
   const isASelected = selectedList.includes(accountA.address);
   const isBSelected = selectedList.includes(accountB.address);
 

packages/extension-polkagate/src/components/ActionButton.tsx

@@ -28,12 +28,10 @@ export default function ActionButton ({ StartIcon, contentPlacement = 'start', d
   const toggleHover = useCallback(() => setHovered(!hovered), [hovered]);
 
   const ButtonFontStyle = useMemo(() => ({
-    fontFamily: 'Inter',
-    fontSize: '14px',
-    fontWeight: 600,
+    ...theme.typography['B-2'],
     justifyContent: { center: 'center', end: 'flex-end', start: 'flex-start' }[contentPlacement],
     textTransform: 'none'
-  } as React.CSSProperties), [contentPlacement]);
+  } as React.CSSProperties), [contentPlacement, theme.typography]);
 
   const GeneralButtonStyle = {
     '&:hover': {

packages/extension-polkagate/src/components/ActionCard.tsx

@@ -85,12 +85,12 @@ function ActionCard ({ Icon, description, iconWithBackground, logoIcon, onClick,
       }
       <Grid container item>
         <Grid alignItems='center' container item>
-          <Typography color={hovered ? '#AA83DC' : theme.palette.text.primary} fontFamily='Inter' fontSize='14px' fontWeight={600} sx={{ transition: 'all 250ms ease-out' }}>
+          <Typography color={hovered ? '#AA83DC' : theme.palette.text.primary} sx={{ transition: 'all 250ms ease-out' }} variant='B-2'>
             {title}
           </Typography>
           <ArrowRight2 color={hovered ? '#AA83DC' : theme.palette.text.primary} size='12' style={chevronStyle} />
         </Grid>
-        <Typography color={theme.palette.text.secondary} fontFamily='Inter' fontSize='12px' fontWeight={500}>
+        <Typography color={theme.palette.text.secondary} textAlign='left' variant='B-4'>
           {description}
         </Typography>
       </Grid>

packages/extension-polkagate/src/components/AmountWithOptions.tsx

@@ -7,7 +7,7 @@ import { Grid, type SxProps, type Theme, Typography, useTheme } from '@mui/mater
 import React, { useCallback } from 'react';
 
 import { MAX_AMOUNT_LENGTH } from '../util/constants';
-import { fixFloatingPoint } from '../util/utils';
+import { formatDecimal } from '../util/utils';
 import InputWithLabel from './InputWithLabel';
 
 interface Props {
@@ -28,7 +28,7 @@ interface Props {
 export default function AmountWithOptions ({ disabled, inputWidth, label, labelFontSize = '14px', onChangeAmount, onPrimary, onSecondary, primaryBtnText, secondaryBtnText, style, textSpace = '10px', value }: Props): React.ReactElement {
   const theme = useTheme();
   const _onChange = useCallback((value: string) => {
-    onChangeAmount(fixFloatingPoint(value));
+    onChangeAmount(formatDecimal(value));
   }, [onChangeAmount]);
 
   const disabledFunction = useCallback(() => null, []);

packages/extension-polkagate/src/components/AssetDualLogo.tsx

@@ -3,27 +3,31 @@
 
 /* eslint-disable react/jsx-max-props-per-line */
 
-import { Avatar, Grid } from '@mui/material';
+import { Avatar, Grid, useTheme } from '@mui/material';
 import React from 'react';
 
 interface Props {
   asset: string;
   baseLogo: string;
   assetSize?: string;
   baseLogoSize?: string;
+  baseLogoPosition?: string;
+  logoRoundness?: string;
 }
 
-export default function AssetDualLogo ({ asset, assetSize = '40px', baseLogo, baseLogoSize = '20px' }: Props): React.ReactElement {
+export default function AssetDualLogo ({ asset, assetSize = '40px', baseLogo, baseLogoPosition, baseLogoSize = '20px', logoRoundness = '50%' }: Props): React.ReactElement {
+  const theme = useTheme();
+
   return (
     <Grid container sx={{ position: 'relative', width: 'fit-content' }}>
       <Avatar
         src={asset}
-        sx={{ borderRadius: '50%', height: assetSize, width: assetSize }}
+        sx={{ borderRadius: logoRoundness, height: assetSize, width: assetSize }}
         variant='square'
       />
       <Avatar
         src={baseLogo}
-        sx={{ '> img': { borderRadius: '50%' }, bgcolor: 'white', borderRadius: '50%', height: baseLogoSize, inset: 'auto -5px -5px auto', p: '1px', position: 'absolute', width: baseLogoSize }}
+        sx={{ '> img': { borderRadius: logoRoundness }, bgcolor: theme.palette.mode === 'light' ? '#fff' : '#000', borderRadius: '50%', height: baseLogoSize, inset: baseLogoPosition ?? 'auto -5px -5px auto', p: '1px', position: 'absolute', width: baseLogoSize }}
         variant='square'
       />
     </Grid>

packages/extension-polkagate/src/components/AssetLogo.tsx

@@ -15,9 +15,11 @@ interface Props {
   genesisHash?: string | undefined;
   logo?: string | undefined;
   subLogo: string | undefined;
+  subLogoPosition?: string;
+  logoRoundness?: string;
 }
 
-function AssetLogo ({ assetSize = '25px', baseTokenSize, chainName, genesisHash, logo, subLogo }: Props): React.ReactElement<Props> {
+function AssetLogo ({ assetSize = '25px', baseTokenSize, chainName, genesisHash, logo, logoRoundness, subLogo, subLogoPosition }: Props): React.ReactElement<Props> {
   const options = useContext(GenesisHashOptionsContext);
 
   const foundChainName = options.find((chain) => chain.value === genesisHash)?.text;
@@ -30,12 +32,15 @@ function AssetLogo ({ assetSize = '25px', baseTokenSize, chainName, genesisHash,
           asset={logo}
           assetSize={assetSize}
           baseLogo={subLogo}
+          baseLogoPosition={subLogoPosition}
           baseLogoSize={baseTokenSize}
+          logoRoundness={logoRoundness}
         />
         : <ChainLogo
           chainName={_chainName}
           genesisHash={genesisHash}
           logo={logo || subLogo}
+          logoRoundness={logoRoundness}
           size={Number(assetSize.replace('px', ''))}
         />
       }