style: adjust TLF buttons

PolkaGate · Nov 30, 2024 · 205d4d6 · 205d4d6
1 parent a7df2d8
commit 205d4d6
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 14 deletions.
diff --git a/packages/extension-polkagate/src/partials/Menu.tsx b/packages/extension-polkagate/src/partials/Menu.tsx
@@ -18,8 +18,8 @@ import { TEST_NETS } from '../util/constants';
 import ImportAccSubMenu from './ImportAccSubMenu';
 import NewAccountSubMenu from './NewAccountSubMenu';
 import SettingSubMenu from './SettingSubMenu';
-import VersionSocial from './VersionSocial';
 import TLFActions from './TLFActions';
+import VersionSocial from './VersionSocial';
 
 interface Props {
   setShowMenu: React.Dispatch<React.SetStateAction<boolean>>;
@@ -191,7 +191,7 @@ function Menu ({ isMenuOpen, setShowMenu }: Props): React.ReactElement<Props> {
           <VersionSocial fontSize='11px' />
         </Grid>
         <IconButton onClick={onCloseMenu} sx={{ left: '3%', p: 0, position: 'absolute', top: '1%' }}>
-          <CloseIcon sx={{ color: 'white', fontSize: 35 }} />
+          <CloseIcon sx={{ color: 'secondary.light', fontSize: 35 }} />
         </IconButton>
       </Grid>
     </Dialog>

diff --git a/packages/extension-polkagate/src/partials/TLFActions.tsx b/packages/extension-polkagate/src/partials/TLFActions.tsx
@@ -11,14 +11,13 @@ import { FullScreenIcon, Infotip2 } from '../components';
 import { updateStorage } from '../components/Loading';
 import { useExtensionLockContext } from '../context/ExtensionLockContext';
 import ThemeChanger from '../fullscreen/governance/partials/ThemeChanger';
-import { useIsExtensionPopup, useIsLoginEnabled, useTranslation } from '../hooks';
+import { useIsLoginEnabled, useTranslation } from '../hooks';
 import { lockExtension } from '../messaging';
 import { NO_PASS_PERIOD } from '../util/constants';
 
 const TLFActions = () => {
   const { t } = useTranslation();
 
-  const isPopup = useIsExtensionPopup();
   const isLoginEnabled = useIsLoginEnabled();
   const { setExtensionLock } = useExtensionLockContext();
 
@@ -30,7 +29,7 @@ const TLFActions = () => {
   }, [setExtensionLock]);
 
   return (
-    <Grid alignItems='center' container item justifyContent='space-around' pl='35px' py='5px' mr='-7px'>
+    <Grid alignItems='center' container item justifyContent='flex-end' spacing={4} py='5px' mr='13px'>
       {isLoginEnabled &&
         <>
           <Grid container item width='fit-content'>
@@ -51,7 +50,6 @@ const TLFActions = () => {
         </>
       }
       <>
-
         <Grid item>
           <Infotip2
             text={t('Switch Theme')}
@@ -64,14 +62,10 @@ const TLFActions = () => {
           </Infotip2>
         </Grid>
       </>
-      {isPopup &&
-        <>
-          <Grid item>
-            <Divider orientation='vertical' sx={{ bgcolor: 'divider', height: '20px', my: 'auto' }} />
-          </Grid>
-          <FullScreenIcon isSettingSubMenu url='/' />
-        </>
-      }
+      <Grid item>
+        <Divider orientation='vertical' sx={{ bgcolor: 'divider', height: '20px', my: 'auto' }} />
+      </Grid>
+      <FullScreenIcon isSettingSubMenu url='/' />
     </Grid>
   );
 };