style: reduce icons size in home extension mode

Author: Nick-1979

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

@@ -24,7 +24,7 @@ interface Props {
   withHoverEffect?: boolean;
 }
 
-export default function MenuItem({ children, disabled = false, fontSize, icon, iconComponent, onClick, pl = '0', py = '8px', showChevron, showSubMenu = false, text, withHoverEffect }: Props): React.ReactElement<Props> {
+export default function MenuItem ({ children, disabled = false, fontSize, icon, iconComponent, onClick, pl = '0', py = '8px', showChevron, showSubMenu = false, text, withHoverEffect }: Props): React.ReactElement<Props> {
   const hoverEffectStyles: SxProps<Theme> = {
     '&:hover': { bgcolor: disabled ? 'none' : 'divider' },
     borderRadius: '5px',

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

@@ -1,20 +1,20 @@
 // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
 // SPDX-License-Identifier: Apache-2.0
-// @ts-nocheck
 
 /* eslint-disable react/jsx-max-props-per-line */
 
 import { Grid, Popover, useTheme } from '@mui/material';
 import React, { useCallback, useMemo, useState } from 'react';
 
-import OptionalCopyPopup from '../partials/OptionalCopyPopup';
 import { VaadinIcon } from '../components';
+import OptionalCopyPopup from '../partials/OptionalCopyPopup';
 
 interface Props {
   address: string | undefined;
+  iconWidth?: number;
 }
 
-function OptionalCopyButton({ address }: Props): React.ReactElement {
+function OptionalCopyButton ({ address, iconWidth = 20 }: Props): React.ReactElement {
   const theme = useTheme();
 
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
@@ -35,7 +35,7 @@ function OptionalCopyButton({ address }: Props): React.ReactElement {
   return (
     <>
       <Grid alignItems='center' aria-describedby={id} component='button' container direction='column' item justifyContent='center' onClick={onCopyIconClick} sx={{ bgcolor: 'transparent', border: 'none', cursor: 'pointer', p: '2px 6px', position: 'relative', width: '35px' }}>
-        <VaadinIcon icon='vaadin:copy-o' style={{ color: `${theme.palette.secondary.light}`, width: '20px' }} />
+        <VaadinIcon icon='vaadin:copy-o' style={{ color: `${theme.palette.secondary.light}`, width: `${iconWidth}px` }} />
       </Grid>
       <Popover
         PaperProps={{

packages/extension-polkagate/src/popup/home/AccountDetail.tsx

@@ -43,7 +43,7 @@ const EyeButton = ({ isHidden, toggleVisibility }: EyeProps) => {
   return (
     <Infotip text={isHidden ? t('This account is hidden from websites') : t('This account is visible to websites')}>
       <IconButton onClick={toggleVisibility} sx={{ height: '15px', ml: '7px', mt: '13px', p: 0, width: '24px' }}>
-        <VaadinIcon icon={isHidden ? 'vaadin:eye-slash' : 'vaadin:eye'} style={{ color: `${theme.palette.secondary.light}`, height: '20px' }} />
+        <VaadinIcon icon={isHidden ? 'vaadin:eye-slash' : 'vaadin:eye'} style={{ color: `${theme.palette.secondary.light}`, height: '17px' }} />
       </IconButton>
     </Infotip>
   );
@@ -162,7 +162,7 @@ function AccountDetail ({ address, chain, goToAccount, hideNumbers, identity, is
     <Grid container direction='column' sx={{ width: '70%' }}>
       <Grid container direction='row' item sx={{ lineHeight: '20px' }}>
         <Grid item maxWidth='70%' onClick={goToAccount} sx={{ cursor: 'pointer' }}>
-          <Typography fontSize='28px' overflow='hidden' textOverflow='ellipsis' whiteSpace='nowrap'>
+          <Typography fontSize='24px' overflow='hidden' textOverflow='ellipsis' whiteSpace='nowrap'>
             {identity?.display || name || t('Unknown')}
           </Typography>
         </Grid>
@@ -173,7 +173,7 @@ function AccountDetail ({ address, chain, goToAccount, hideNumbers, identity, is
           />
         </Grid>
         <Grid item sx={{ m: '10px 0', width: 'fit-content' }}>
-          <OptionalCopyButton address={address} />
+          <OptionalCopyButton address={address} iconWidth={15} />
         </Grid>
       </Grid>
       <Grid alignItems='center' container item>