refactor: use vaadinIconStyle

PolkaGate · Sep 8, 2024 · 814af86 · 814af86
1 parent 7623ad2
commit 814af86
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 25 deletions.
diff --git a/...ages/extension-polkagate/src/fullscreen/homeFullScreen/partials/FullScreenAccountMenu.tsx b/...ages/extension-polkagate/src/fullscreen/homeFullScreen/partials/FullScreenAccountMenu.tsx
@@ -20,13 +20,12 @@ interface Props {
   setDisplayPopup: React.Dispatch<React.SetStateAction<number | undefined>>;
 }
 
-const Menus = ({ address, handleClose, setAnchorEl, setDisplayPopup }
-  : {
-    address: string | undefined,
-    handleClose: () => void,
-    setAnchorEl: React.Dispatch<React.SetStateAction<HTMLButtonElement | null>>,
-    setDisplayPopup: React.Dispatch<React.SetStateAction<number | undefined>>,
-  }) => {
+const Menus = ({ address, handleClose, setAnchorEl, setDisplayPopup }: {
+  address: string | undefined,
+  handleClose: () => void,
+  setAnchorEl: React.Dispatch<React.SetStateAction<HTMLButtonElement | null>>,
+  setDisplayPopup: React.Dispatch<React.SetStateAction<number | undefined>>,
+}) => {
   const { t } = useTranslation();
   const theme = useTheme();
   const onAction = useContext(ActionContext);
@@ -74,6 +73,8 @@ const Menus = ({ address, handleClose, setAnchorEl, setDisplayPopup }
     }
   }, [chain]);
 
+  const vaadinIconStyle = { color: `${theme.palette.text.primary}`, height: '20px' };
+
   return (
     <Grid alignItems='flex-start' container display='block' item sx={{ borderRadius: '10px', minWidth: '300px', p: '10px' }}>
       <MenuItem
@@ -92,7 +93,7 @@ const Menus = ({ address, handleClose, setAnchorEl, setDisplayPopup }
       <MenuItem
         disabled={isDisable(PROXY_CHAINS)}
         iconComponent={
-          <VaadinIcon icon='vaadin:sitemap' style={{ height: '20px', color: `${isDisable(PROXY_CHAINS) ? theme.palette.text.disabled : theme.palette.text.primary}` }} />
+          <VaadinIcon icon='vaadin:sitemap' style={{ color: `${isDisable(PROXY_CHAINS) ? theme.palette.text.disabled : theme.palette.text.primary}`, height: '20px' }} />
         }
         onClick={onManageProxies}
         text={t<string>('Manage proxies')}
@@ -122,7 +123,7 @@ const Menus = ({ address, handleClose, setAnchorEl, setDisplayPopup }
       {hasPrivateKey &&
         <MenuItem
           iconComponent={
-            <VaadinIcon icon='vaadin:download-alt' style={{ height: '20px', color: `${theme.palette.text.primary}` }} />
+            <VaadinIcon icon='vaadin:download-alt' style={vaadinIconStyle} />
           }
           onClick={onExportAccount}
           text={t('Export account')}
@@ -132,7 +133,7 @@ const Menus = ({ address, handleClose, setAnchorEl, setDisplayPopup }
       {hasPrivateKey &&
         <MenuItem
           iconComponent={
-            <VaadinIcon icon='vaadin:road-branch' style={{ height: '20px', color: `${theme.palette.text.primary}` }} />
+            <VaadinIcon icon='vaadin:road-branch' style={vaadinIconStyle} />
           }
           onClick={goToDeriveAcc}
           text={t('Derive new account')}
@@ -141,25 +142,25 @@ const Menus = ({ address, handleClose, setAnchorEl, setDisplayPopup }
       }
       <MenuItem
         iconComponent={
-          <VaadinIcon icon='vaadin:edit' style={{ height: '20px', color: `${theme.palette.text.primary}` }} />
+          <VaadinIcon icon='vaadin:edit' style={vaadinIconStyle} />
         }
         onClick={onRenameAccount}
         text={t('Rename')}
         withHoverEffect
       />
       <MenuItem
         iconComponent={
-          <VaadinIcon icon='vaadin:file-remove' style={{ color: `${theme.palette.text.primary}`, height: '20px' }} />
+          <VaadinIcon icon='vaadin:file-remove' style={ vaadinIconStyle } />
         }
         onClick={onForgetAccount}
         text={t('Forget account')}
         withHoverEffect
       />
     </Grid>
-  )
+  );
 };
 
-function FullScreenAccountMenu({ address, baseButton, setDisplayPopup }: Props): React.ReactElement<Props> {
+function FullScreenAccountMenu ({ address, baseButton, setDisplayPopup }: Props): React.ReactElement<Props> {
   const theme = useTheme();
 
   const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
@@ -200,9 +201,9 @@ function FullScreenAccountMenu({ address, baseButton, setDisplayPopup }: Props):
       >
         <Menus
           address={address}
-          setDisplayPopup={setDisplayPopup}
           handleClose={handleClose}
           setAnchorEl={setAnchorEl}
+          setDisplayPopup={setDisplayPopup}
         />
       </Popover>
     </>

diff --git a/packages/extension-polkagate/src/partials/AccountMenu.tsx b/packages/extension-polkagate/src/partials/AccountMenu.tsx
@@ -25,7 +25,7 @@ interface Props {
   noMargin?: boolean;
 }
 
-function AccountMenu({ address, isMenuOpen, noMargin, setShowMenu }: Props): React.ReactElement<Props> {
+function AccountMenu ({ address, isMenuOpen, noMargin, setShowMenu }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const theme = useTheme();
   const options = useGenesisHashOptions();
@@ -45,10 +45,9 @@ function AccountMenu({ address, isMenuOpen, noMargin, setShowMenu }: Props): Rea
     address && onAction(`/derive/${address}/locked`);
   }, [address, onAction]);
 
-  const closeMenu = useCallback(
-    () => setShowMenu((isMenuOpen) => !isMenuOpen),
-    [setShowMenu]
-  );
+  const closeMenu = useCallback(() =>
+    setShowMenu((isMenuOpen) => !isMenuOpen)
+  , [setShowMenu]);
 
   const onChangeNetwork = useCallback((newGenesisHash: string) => {
     const availableGenesisHash = newGenesisHash.startsWith('0x') ? newGenesisHash : null;
@@ -87,6 +86,8 @@ function AccountMenu({ address, isMenuOpen, noMargin, setShowMenu }: Props): Rea
 
   const MenuSeparator = () => <Divider sx={{ bgcolor: 'divider', height: '1px', my: '6px' }} />;
 
+  const vaadinIconStyle = { color: `${theme.palette.text.primary}`, height: '18px' };
+
   const movingParts = (
     <Grid alignItems='flex-start' bgcolor='background.default' container display='block' item mt='46px' px='46px' sx={{ borderRadius: '10px 10px 0px 0px', height: 'parent.innerHeight' }} width='100%'>
       <Grid container item justifyContent='center' my='12px' pl='8px'>
@@ -109,7 +110,7 @@ function AccountMenu({ address, isMenuOpen, noMargin, setShowMenu }: Props): Rea
       <MenuItem
         disabled={isDisabled(PROXY_CHAINS)}
         iconComponent={
-          <VaadinIcon icon='vaadin:sitemap' style={{ height: '18px', color: `${isDisabled(PROXY_CHAINS) ? theme.palette.text.disabled : theme.palette.text.primary}` }} />
+          <VaadinIcon icon='vaadin:sitemap' style={{ color: `${isDisabled(PROXY_CHAINS) ? theme.palette.text.disabled : theme.palette.text.primary}`, height: '18px' }} />
         }
         onClick={onManageProxies}
         text={t('Manage proxies')}
@@ -138,7 +139,7 @@ function AccountMenu({ address, isMenuOpen, noMargin, setShowMenu }: Props): Rea
       {hasPrivateKey &&
         <MenuItem
           iconComponent={
-            <VaadinIcon icon='vaadin:download-alt' style={{ height: '18px', color: `${theme.palette.text.primary}` }} />
+            <VaadinIcon icon='vaadin:download-alt' style={vaadinIconStyle} />
           }
           onClick={onExportAccount}
           text={t('Export account')}
@@ -147,7 +148,7 @@ function AccountMenu({ address, isMenuOpen, noMargin, setShowMenu }: Props): Rea
       {hasPrivateKey &&
         <MenuItem
           iconComponent={
-            <VaadinIcon icon='vaadin:road-branch' style={{ height: '18px', color: `${theme.palette.text.primary}` }} />
+            <VaadinIcon icon='vaadin:road-branch' style={vaadinIconStyle} />
           }
           onClick={goToDeriveAcc}
           text={t('Derive new account')}
@@ -156,15 +157,15 @@ function AccountMenu({ address, isMenuOpen, noMargin, setShowMenu }: Props): Rea
       }
       <MenuItem
         iconComponent={
-          <VaadinIcon icon='vaadin:edit' style={{ height: '18px', color: `${theme.palette.text.primary}` }} />
+          <VaadinIcon icon='vaadin:edit' style={vaadinIconStyle} />
         }
         onClick={onRenameAccount}
         text={t('Rename')}
         withHoverEffect
       />
       <MenuItem
         iconComponent={
-          <VaadinIcon icon='vaadin:file-remove' style={{ height: '18px', color: `${theme.palette.text.primary}` }} />
+          <VaadinIcon icon='vaadin:file-remove' style={vaadinIconStyle} />
         }
         onClick={onForgetAccount}
         text={t('Forget account')}