style: minimal dark theme

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

@@ -108,7 +108,8 @@ function FormatPrice ({ amount, commify, decimalPoint = 2, decimals, fontSize, f
         : <Skeleton
           animation='wave'
           height={skeletonHeight}
-          sx={{ display: 'inline-block', fontWeight: 'bold', transform: 'none', width }}
+          sx={{ fontWeight: 'bold', transform: 'none', width }}
+          variant='text'
         />
       }
     </Grid>

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

@@ -39,8 +39,8 @@ export default function TwoButtons ({ disabled = false, isBusy = false, ml = '6%
           onClick={onSecondaryClick}
           startIcon={secondaryBtnStartIcon}
           sx={{
-            borderColor: 'secondary.main',
-            color: variant === 'text' ? 'secondary.main' : 'text.primary',
+            borderColor: 'secondary.light',
+            color: variant === 'text' ? 'secondary.light' : 'text.primary',
             fontSize: '18px',
             fontWeight: 400,
             height: '36px',

packages/extension-polkagate/src/fullscreen/accountDetails/components/AOC.tsx

@@ -81,7 +81,7 @@ const AssetsBoxes = ({ api, asset, hideNumbers, mode, onclick, pricesInCurrencie
       // eslint-disable-next-line react/jsx-no-bind
       alignItems='center' container item justifyContent='center' onClick={() => _assetToShow ? onclick(_assetToShow) : null}
       sx={{
-        border: _assetToShow ? `${isAssetSelected ? '2px' : '1px'} solid` : 'none',
+        border: _assetToShow ? `${isAssetSelected ? '1.1px' : '1px'} solid` : 'none',
         borderColor: isAssetSelected
           ? 'secondary.light'
           : theme.palette.mode === 'dark'
@@ -139,7 +139,7 @@ function AOC ({ accountAssets, address, hideNumbers, mode = 'Detail', onclick, s
 
   return (
     <Grid container item>
-      <Typography fontSize='18px' fontWeight={400} mt='13px' px='10px' width='fit-content'>
+      <Typography color='secondary.contrastText' fontSize='18px' fontWeight={400} mt='13px' px='10px' width='fit-content'>
         {t('Assets')}
       </Typography>
       <Grid alignItems='center' container item xs>

packages/extension-polkagate/src/fullscreen/accountDetails/components/AccountInformationForDetails.tsx

@@ -32,7 +32,7 @@ const Price = ({ balanceToShow, isPriceOutdated, price }: PriceJSXType) => (
   <FormatPrice
     amount={getValue('total', balanceToShow)}
     decimals={balanceToShow?.decimal}
-    fontSize='28px'
+    fontSize='21px'
     fontWeight= { 400 }
     price={price}
     skeletonHeight={22}
@@ -78,7 +78,7 @@ interface BalanceRowJSXType {
 }
 
 const BalanceRow = ({ balanceToShow, isBalanceOutdated, isPriceOutdated, price }: BalanceRowJSXType) => (
-  <Grid alignItems='center' container fontSize='26px' item xs>
+  <Grid alignItems='center' container fontSize='21px' item xs>
     <Balance balanceToShow={balanceToShow} isBalanceOutdated={isBalanceOutdated} />
     <Divider orientation='vertical' sx={{ backgroundColor: 'divider', height: '30px', mx: '10px', my: 'auto' }} />
     <Price balanceToShow={balanceToShow} isPriceOutdated={isPriceOutdated} price={price} />
@@ -104,9 +104,9 @@ const SelectedAssetBox = ({ balanceToShow, genesisHash, isBalanceOutdated, isPri
       {genesisHash
         ? <>
           <Grid item pl='7px'>
-            <AssetLogo assetSize='42px' baseTokenSize='20px' genesisHash={balanceToShow?.genesisHash} logo={logoInfo?.logo} subLogo={logoInfo?.subLogo} />
+            <AssetLogo assetSize='32px' baseTokenSize='20px' genesisHash={balanceToShow?.genesisHash} logo={logoInfo?.logo} subLogo={logoInfo?.subLogo} />
           </Grid>
-          <Grid item sx={{ ml: '5px' }}>
+          <Grid item sx={{ ml: '10px' }}>
             <BalanceRow balanceToShow={balanceToShow} isBalanceOutdated={isBalanceOutdated} isPriceOutdated={isPriceOutdated} price={price} />
           </Grid>
         </>

packages/extension-polkagate/src/fullscreen/accountDetails/components/LockedInReferendaFS.tsx

@@ -67,7 +67,6 @@ export default function LockedInReferendaFS ({ address, price, refreshNeeded, se
               decimals={decimal}
               fontSize= '22px'
               fontWeight={ 400}
-              mt={!totalLocked ? '5px' : undefined}
               price={price}
               skeletonHeight={20}
             />

packages/extension-polkagate/src/fullscreen/accountDetails/components/TotalChart.tsx

@@ -132,20 +132,20 @@ export default function TotalChart ({ accountAssets, pricesInCurrency }: Props):
     <Grid alignItems='center' container direction='column' item justifyContent='center' sx={{ bgcolor: 'background.paper', borderRadius: '5px', boxShadow: '2px 3px 4px 0px rgba(0, 0, 0, 0.1)', p: '10px 15px', width: 'inherit' }}>
       <Grid alignItems='flex-start' container item justifyContent='space-between' mb='10px'>
         <Grid alignItems='center' item>
-          <Typography sx={{ fontSize: '22px', fontVariant: 'small-caps', fontWeight: 400 }}>
+          <Typography sx={{ fontSize: '20px', fontVariant: 'small-caps', fontWeight: 400 }}>
             {t('Total')}
           </Typography>
         </Grid>
         <Grid alignItems='center' item justifyItems='flex-end'>
           <FormatPrice
             commify
-            fontSize='28px'
+            fontSize='26px'
             fontWeight={600}
             num={totalWorth}
             skeletonHeight={22}
             withCountUp
           />
-          <Typography sx={{ color: !totalChange ? 'secondary.contrastText' : totalChange > 0 ? 'success.main' : 'warning.main', fontSize: '16px', fontWeight: 500 }}>
+          <Typography sx={{ color: !totalChange ? 'secondary.contrastText' : totalChange > 0 ? 'success.main' : 'warning.main', fontSize: '15px', fontWeight: 500, mt: '10px' }}>
             <CountUp
               decimals={countDecimalPlaces(accountBalanceTotalChange) || PORTFOLIO_CHANGE_DECIMAL}
               duration={1}

packages/extension-polkagate/src/fullscreen/accountDetails/index.tsx

@@ -166,7 +166,7 @@ export default function AccountDetails (): React.ReactElement {
         <Grid container item sx={{ display: 'block', px: '5%' }}>
           <Bread />
           <Title
-            height='70px'
+            height='60px'
             icon={faFileInvoice}
             padding='0px'
             text={t('Account Details')}

packages/extension-polkagate/src/fullscreen/addNewChain/index.tsx

@@ -193,7 +193,7 @@ export default function AddNewChain (): React.ReactElement {
         <Bread />
         <Title
           height='100px'
-          logo={<VaadinIcon icon='vaadin:globe-wire' style={{ color: `${theme.palette.text.primary}`, fontSize: '23px' }} />}
+          logo={<VaadinIcon icon='vaadin:globe-wire' style={{ color: `${theme.palette.text.primary}`, fontSize: '20px' }} />}
           text={t('Add New Chain')}
         />
         <Typography fontSize='14px' fontWeight={400} mb={2}>

packages/extension-polkagate/src/fullscreen/governance/SupportUs.tsx

@@ -19,7 +19,7 @@ import { openOrFocusTab } from '../accountDetails/components/CommonTasks';
 import { ENDED_STATUSES } from './utils/consts';
 
 const PROPOSAL_NO = 1264;
-const STORAGE_LABEL = `supportUs0000_${PROPOSAL_NO}`;
+const STORAGE_LABEL = `supportUs_${PROPOSAL_NO}`;
 
 const StyledPaper = styled(Paper)(({ theme }: { theme: Theme }) => ({
   background: theme.palette.background.default,

packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountBodyFs.tsx

@@ -51,7 +51,7 @@ function AccountBodyFs ({ address, goToDetails = noop, gridSize }: Props): React
           chain={chain}
           noIdenticon
           onClick={goToDetails}
-          style={{ width: 'calc(100% - 40px)' }}
+          style={{ fontSize: '22px', width: 'calc(100% - 40px)' }}
           subIdOnly
         />
         <Grid item width='40px'>

packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountInformationForHome.tsx

@@ -86,15 +86,15 @@ const AccountTotal = ({ hideNumbers, totalBalance }: { hideNumbers: boolean | un
   return (
     <Grid alignItems='center' container item xs>
       <Grid alignItems='center' container gap='15px' item justifyContent='center' width='fit-content'>
-        <Typography fontSize='16px' fontWeight={400} pl='15px'>
+        <Typography color='secondary.contrastText' fontSize='16px' fontWeight={400} pl='15px'>
           {t('Total')}:
         </Typography>
         {
           hideNumbers || hideNumbers === undefined
             ? <Box component='img' src={(theme.palette.mode === 'dark' ? stars6White : stars6Black) as string} sx={{ height: '36px', width: '154px' }} />
             : <FormatPrice
               commify
-              fontSize='24px'
+              fontSize='21px'
               fontWeight={700}
               num={totalBalance}
               skeletonHeight={28}

packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountItem.tsx

@@ -54,7 +54,7 @@ function AccountItem ({ account, hideNumbers, id, quickActionOpen, setQuickActio
   return (
     <div ref={id ? setNodeRef : null} style={{ transform: CSS.Transform.toString(transform), transition }}>
       <Grid container {...attributes} item ref={containerRef} sx={{ borderRadius: '5px', boxShadow: '2px 3px 4px 0px rgba(0, 0, 0, 0.1)', overflow: 'hidden', position: 'relative' }} width='760px'>
-        <DragIndicatorIcon {...listeners} sx={{ ':active': { cursor: 'grabbing' }, color: 'secondary.contrastText', cursor: 'grab', fontSize: '25px', position: 'absolute', right: '5px', top: '5px' }} />
+        <DragIndicatorIcon {...listeners} sx={{ ':active': { cursor: 'grabbing' }, color: 'secondary.contrastText', cursor: 'grab', fontSize: '25px', position: 'absolute', right: '5px', top: '5px', opacity: 0.5 }} />
         <AccountLabel
           account={account}
           ml='30px'

packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/FullScreenAccountMenu.tsx

@@ -199,7 +199,7 @@ function FullScreenAccountMenu ({ address, baseButton, setDisplayPopup }: Props)
       </Grid>
       <Popover
         PaperProps={{
-          sx: { backgroundImage: 'none', bgcolor: 'background.paper', border: '1px solid', borderColor: theme.palette.mode === 'dark' ? 'secondary.main' : 'transparent', borderRadius: '7px', boxShadow: theme.palette.mode === 'dark' ? '0px 4px 4px rgba(255, 255, 255, 0.25)' : '0px 0px 25px 0px rgba(0, 0, 0, 0.50)' }
+          sx: { backgroundImage: 'none', bgcolor: 'background.paper', border: '1px solid', borderColor: theme.palette.mode === 'dark' ? 'secondary.light' : 'transparent', borderRadius: '7px', boxShadow: theme.palette.mode === 'dark' ? '0px 4px 4px rgba(255, 255, 255, 0.25)' : '0px 0px 25px 0px rgba(0, 0, 0, 0.50)' }
         }}
         anchorEl={anchorEl}
         anchorOrigin={{

packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/HomeMenu.tsx

@@ -36,7 +36,7 @@ export const TaskButton = ({ children, disabled, extra, hasChildren, icon, isSub
 
   return (
     <>
-      <Grid alignItems='center' container item justifyContent='space-between' onClick={disabled ? noop : onClick} sx={{ '&:hover': { bgcolor: disabled ? 'transparent' : 'divider' }, borderRadius: '5px', cursor: disabled ? 'default' : 'pointer', minHeight: isSubMenu ? '40px' : '45px', p: '5px 0px 5px 10px', my: '5px' }}>
+      <Grid alignItems='center' container item justifyContent='space-between' onClick={disabled ? noop : onClick} sx={{ '&:hover': { bgcolor: disabled ? 'transparent' : 'divider' }, borderRadius: '5px', cursor: disabled ? 'default' : 'pointer', minHeight: isSubMenu ? '40px' : '41px', p: '5px 0px 5px 10px', my: '5px' }}>
         <Grid container item xs={2}>
           {icon}
         </Grid>
@@ -102,7 +102,7 @@ export default function HomeMenu(): React.ReactElement {
       <Grid alignItems='center' container direction='column' display='block' item justifyContent='center' sx={{ pb: '40px' }}>
         <TaskButton
           icon={
-            <VaadinIcon icon='vaadin:plus-circle' style={{ height: '30px', color: `${theme.palette.text.primary}`, width: '30px' }} />
+            <VaadinIcon icon='vaadin:plus-circle' style={{ height: '25px', color: `${theme.palette.text.primary}`, width: '25px' }} />
           }
           onClick={onCreate}
           secondaryIconType='page'
@@ -111,7 +111,7 @@ export default function HomeMenu(): React.ReactElement {
         <TaskButton
           disabled={areAllExternalAccounts}
           icon={
-            <VaadinIcon icon='vaadin:road-branch' style={{ height: '30px', color: `${theme.palette.text.primary}`, width: '30px' }} />
+            <VaadinIcon icon='vaadin:road-branch' style={{ height: '25px', color: `${theme.palette.text.primary}`, width: '25px' }} />
           }
           onClick={onDeriveFromAccounts}
           secondaryIconType='page'
@@ -120,7 +120,7 @@ export default function HomeMenu(): React.ReactElement {
         <TaskButton
           hasChildren
           icon={
-            <VaadinIcon float={showImport} icon='vaadin:upload-alt' style={{ height: '30px', color: `${theme.palette.text.primary}`, width: '30px' }} />
+            <VaadinIcon float={showImport} icon='vaadin:upload-alt' style={{ height: '25px', color: `${theme.palette.text.primary}`, width: '25px' }} />
           }
           onClick={onImportClick}
           secondaryIconType='page'
@@ -132,7 +132,7 @@ export default function HomeMenu(): React.ReactElement {
         <TaskButton
           disabled={areAllExternalAccounts}
           icon={
-            <VaadinIcon icon='vaadin:download' style={{ height: '30px', color: `${theme.palette.text.primary}`, width: '30px' }} />
+            <VaadinIcon icon='vaadin:download' style={{ height: '25px', color: `${theme.palette.text.primary}`, width: '25px' }} />
           }
           onClick={onExportAll}
           secondaryIconType='popup'
@@ -141,7 +141,7 @@ export default function HomeMenu(): React.ReactElement {
         <TaskButton
           hasChildren
           icon={
-            <VaadinIcon icon='vaadin:cog' spin ={showSetting} style={{ height: '30px', color: `${theme.palette.text.primary}`, width: '30px' }} />
+            <VaadinIcon icon='vaadin:cog' spin ={showSetting} style={{ height: '25px', color: `${theme.palette.text.primary}`, width: '25px' }} />
           }
           noBorderButton
           onClick={onSettingClick}

packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/ImportAccSubMenuFullScreen.tsx

@@ -81,7 +81,7 @@ function ImportAccSubMenuFullScreen ({ show, toggleSettingSubMenu }: Props): Rea
           />
           <TaskButton
             icon={
-              <VaadinIcon icon='vaadin:sitemap' style={{ height: '25px', color: `${theme.palette.text.primary}`, width: '25px', transform: 'rotate(180deg)' }} />
+              <VaadinIcon icon='vaadin:cluster' style={{ height: '25px', color: `${theme.palette.text.primary}`, width: '25px' }} />
             }
             isSubMenu
             onClick={onImportProxiedFullScreen}

packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/ProfileTabFullScreen.tsx

@@ -121,7 +121,7 @@ export default function ProfileTabFullScreen ({ index, isHovered, orderedAccount
       >
         <VaadinIcon icon={'vaadin:check'} style={{ height: '13px', visibility: isSelected ? 'visible' : 'hidden', width: '15px' }} />
         <Typography
-          color={'text.primary'} display='block' fontSize='16px' fontWeight={isSelected ? 500 : 400}
+          color={'text.primary'} display='block' fontSize='16px' fontWeight={400}
           sx={{
             maxWidth: '100px',
             overflow: 'hidden',