Skip to content

Commit

Permalink
style: reduce font size (#1658)
Browse files Browse the repository at this point in the history
  • Loading branch information
@AMIRKHANEF
AMIRKHANEF authored Nov 16, 2024
1 parent 6ffc4e5 commit ec5f133
Show file tree
Hide file tree
Showing 4 changed files with 47 additions and 23 deletions.
6 changes: 3 additions & 3 deletions packages/extension-polkagate/src/components/MenuItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { noop } from '../util/utils';
interface Props {
disabled?: boolean;
icon?: string;
iconComponent?: JSX.Element;
iconComponent?: React.JSX.Element;
text: string;
children?: React.ReactElement<Props>;
onClick?: MouseEventHandler<HTMLDivElement>;
Expand All @@ -35,8 +35,8 @@ export default function MenuItem ({ children, disabled = false, fontSize, icon,

return (
<>
<Grid alignItems='center' color={disabled ? '#4B4B4B' : 'inherit'} container item justifyContent='space-between' my='4px' onClick={disabled ? noop : onClick} pl={pl} py={py} sx={{ cursor: disabled ? '' : 'pointer', ...(withHoverEffect ? hoverEffectStyles : {}) }} textAlign='left' xs={12}>
<Grid alignItems='center' container item xs sx={{ flexWrap: 'nowrap' }}>
<Grid alignItems='center' color={disabled ? '#4B4B4B' : 'inherit'} container item justifyContent='space-between' my='4px' onClick={disabled ? noop : onClick} pl={pl} py={py} sx={{ cursor: disabled ? 'default' : 'pointer', ...(withHoverEffect ? hoverEffectStyles : {}) }} textAlign='left' xs={12}>
<Grid alignItems='center' container item sx={{ flexWrap: 'nowrap' }} xs>
<Grid alignItems='center' container item xs={1}>
{iconComponent ??
<Box
Expand Down
2 changes: 1 addition & 1 deletion packages/extension-polkagate/src/components/RemoteNodeSelector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export default function RemoteNodeSelector ({ address, genesisHash }: Props): Re
<>
{endpoint &&
<Select
_mt='10px'
_mt='3px'
defaultValue={undefined}
label={t('Remote node')}
onChange={onChangeEndpoint}
Expand Down
41 changes: 28 additions & 13 deletions packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/ProfileMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,13 +60,15 @@ const InputBox = ({ addToNewProfile, editName, newName }: InputBoxProps) => {
};

interface AddProfileProps {
address: string | undefined
address: string | undefined;
showName: boolean | undefined;
setShowName: React.Dispatch<React.SetStateAction<boolean | undefined>>;
handleClose: () => void
handleClose: () => void;
closeParentMenu: () => void
extensionMode: boolean;
}

const AddMenu = ({ address, handleClose, setShowName, showName }: AddProfileProps) => {
const AddMenu = ({ address, closeParentMenu, extensionMode, handleClose, setShowName, showName }: AddProfileProps) => {
const theme = useTheme();
const { t } = useTranslation();
const { userDefinedProfiles } = useProfiles();
Expand Down Expand Up @@ -103,18 +105,20 @@ const AddMenu = ({ address, handleClose, setShowName, showName }: AddProfileProp
updateMeta(String(address), metaData)
.then(() => {
handleClose();
closeParentMenu();
}).catch(console.error);
}, [account, address, handleClose]);
}, [account, address, closeParentMenu, handleClose]);

return (
<Grid alignItems='flex-start' container display='block' item sx={{ borderRadius: '10px', minWidth: '300px', p: '10px' }}>
<Grid alignItems='flex-start' container display='block' item sx={{ borderRadius: '10px', minWidth: '300px', p: extensionMode ? '5px' : '10px' }}>
{showName
? <InputBox
addToNewProfile={addToNewProfile}
editName={editName}
newName={newName}
/>
: <MenuItem
fontSize={extensionMode ? '16px' : undefined}
iconComponent={
<VaadinIcon icon='vaadin:plus' style={{ color: theme.palette.text.primary, height: '20px' }} />
}
Expand All @@ -123,10 +127,11 @@ const AddMenu = ({ address, handleClose, setShowName, showName }: AddProfileProp
withHoverEffect
/>
}
<Divider sx={{ bgcolor: 'divider', height: '1px', my: '6px' }} />
<Divider sx={{ bgcolor: 'divider', height: '1px', my: extensionMode ? '3px' : '6px' }} />
{userDefinedProfiles.length > 0
? userDefinedProfiles.map((profile) => (
<MenuItem
fontSize={extensionMode ? '16px' : undefined}
iconComponent={
<VaadinIcon icon='vaadin:folder-open-o' style={{ color: theme.palette.text.primary, height: '20px' }} />
}
Expand All @@ -139,6 +144,7 @@ const AddMenu = ({ address, handleClose, setShowName, showName }: AddProfileProp
))
: <MenuItem
disabled
fontSize={extensionMode ? '16px' : undefined}
iconComponent={
<VaadinIcon icon='vaadin:minus' style={{ color: `${theme.palette.text.disabled}`, height: '20px' }} />
}
Expand All @@ -153,18 +159,20 @@ const AddMenu = ({ address, handleClose, setShowName, showName }: AddProfileProp
interface RemoveProfileProps {
profileNames: string[] | undefined;
onRemove: (profile: string) => void;
extensionMode: boolean;
}

const RemoveMenu = ({ onRemove, profileNames }: RemoveProfileProps) => {
const RemoveMenu = ({ extensionMode, onRemove, profileNames }: RemoveProfileProps) => {
const theme = useTheme();
const { t } = useTranslation();

return (
<Grid alignItems='flex-start' container display='block' item sx={{ borderRadius: '10px', minWidth: '300px', p: '10px' }}>
<Grid alignItems='flex-start' container display='block' item sx={{ borderRadius: '10px', minWidth: '300px', p: extensionMode ? '5px' : '10px' }}>
{profileNames?.map((profileName) => (
// eslint-disable-next-line react/jsx-no-bind
<Grid component='button' container item key={profileName} onClick={() => onRemove(profileName)} sx={{ '> div div:last-child p': { maxWidth: '220px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, bgcolor: 'transparent', border: 'none', color: theme.palette.text.primary, height: 'fit-content', p: 0, width: 'inherit' }}>
<MenuItem
fontSize={extensionMode ? '16px' : undefined}
iconComponent={
<VaadinIcon icon='vaadin:folder-remove' style={{ color: theme.palette.text.primary, height: '20px' }} />
}
Expand Down Expand Up @@ -206,8 +214,7 @@ function ProfileMenu ({ address, closeParentMenu }: Props): React.ReactElement<P
const handleClose = useCallback(() => {
setAnchorEl(null);
setShowName(false);
closeParentMenu();
}, [closeParentMenu]);
}, []);

const onAddClick = useCallback((event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => {
setAnchorEl(event.currentTarget);
Expand Down Expand Up @@ -240,14 +247,18 @@ function ProfileMenu ({ address, closeParentMenu }: Props): React.ReactElement<P

if (isLastAccountWithTheProfile && currentProfile === profileToBeRemoved) {
setStorage('profile', PROFILE_TAGS.ALL)
.then(handleClose)
.then(() => {
handleClose();
closeParentMenu();
})
.catch(console.error);
} else {
handleClose();
closeParentMenu();
}
})
.catch(console.error);
}, [profileNames, accounts, address, currentProfile, handleClose]);
}, [address, profileNames, accounts, currentProfile, handleClose, closeParentMenu]);

const open = Boolean(anchorEl);
const id = open ? 'simple-popover 2' : undefined;
Expand All @@ -256,6 +267,7 @@ function ProfileMenu ({ address, closeParentMenu }: Props): React.ReactElement<P
<>
<Grid aria-describedby={id} component='button' container item onClick={onAddClick} sx={{ bgcolor: 'transparent', border: 'none', color: theme.palette.text.primary, height: 'fit-content', p: 0, width: 'inherit' }}>
<MenuItem
fontSize={isExtensionMode ? '16px' : undefined}
iconComponent={
<VaadinIcon icon='vaadin:folder-add' style={{ color: `${theme.palette.text.primary}`, height: '20px' }} />
}
Expand Down Expand Up @@ -284,6 +296,7 @@ function ProfileMenu ({ address, closeParentMenu }: Props): React.ReactElement<P
{isExtensionMode && profileNames && profileNames.length > 0 &&
<Grid aria-describedby={id} component='button' container item onClick={onRemoveMenuClick} sx={{ bgcolor: 'transparent', border: 'none', color: theme.palette.text.primary, height: 'fit-content', p: 0, width: 'inherit' }}>
<MenuItem
fontSize='16px'
iconComponent={
<VaadinIcon icon='vaadin:folder-remove' style={{ color: theme.palette.text.primary, height: '20px' }} />
}
Expand All @@ -293,7 +306,6 @@ function ProfileMenu ({ address, closeParentMenu }: Props): React.ReactElement<P
/>
</Grid>
}
{isExtensionMode && <Divider sx={{ bgcolor: 'divider', height: '1px', my: '6px', width: '100%' }} />}
<Popover
PaperProps={{
sx: {
Expand Down Expand Up @@ -322,12 +334,15 @@ function ProfileMenu ({ address, closeParentMenu }: Props): React.ReactElement<P
{status === STATUS.SHOW_ADD &&
<AddMenu
address={address}
closeParentMenu={closeParentMenu}
extensionMode={isExtensionMode}
handleClose={handleClose}
setShowName={setShowName}
showName={showName}
/>}
{status === STATUS.SHOW_REMOVE &&
<RemoveMenu
extensionMode={isExtensionMode}
onRemove={onRemove}
profileNames={profileNames}
/>
Expand Down
21 changes: 15 additions & 6 deletions packages/extension-polkagate/src/partials/AccountMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@ const Transition = React.forwardRef(function Transition (props: TransitionProps
return <Slide direction='up' ref={ref} {...props} />;
});

const MenuSeparator = () => <Divider sx={{ bgcolor: 'divider', height: '1px', my: '3px' }} />;

function AccountMenu ({ address, isMenuOpen, setShowMenu }: Props): React.ReactElement<Props> {
const { t } = useTranslation();
const theme = useTheme();
Expand Down Expand Up @@ -92,8 +94,6 @@ function AccountMenu ({ address, isMenuOpen, setShowMenu }: Props): React.ReactE
return !supportedChains.includes(currentGenesisHash);
}, [currentGenesisHash]);

const MenuSeparator = () => <Divider sx={{ bgcolor: 'divider', height: '1px', my: '6px' }} />;

const vaadinIconStyle = { color: `${theme.palette.text.primary}`, height: '18px' };

return (
Expand All @@ -104,12 +104,13 @@ function AccountMenu ({ address, isMenuOpen, setShowMenu }: Props): React.ReactE
>
<Grid bgcolor='divider' container height='100%' width='357px' zIndex={10}>
<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'>
<Identity address={address} api={api} chain={chain} formatted={formatted} identiconSize={35} showSocial={false} subIdOnly />
<Grid container item justifyContent='center' my='8px'>
<Identity address={address} api={api} chain={chain} formatted={formatted} identiconSize={30} showSocial={false} style={{ fontSize: '24px' }} subIdOnly />
</Grid>
<MenuSeparator />
<MenuItem
disabled={isDisabled(IDENTITY_CHAINS)}
fontSize='16px'
iconComponent={
<FontAwesomeIcon
color={isDisabled(IDENTITY_CHAINS) ? theme.palette.text.disabled : theme.palette.text.primary}
Expand All @@ -123,6 +124,7 @@ function AccountMenu ({ address, isMenuOpen, setShowMenu }: Props): React.ReactE
/>
<MenuItem
disabled={isDisabled(PROXY_CHAINS)}
fontSize='16px'
iconComponent={
<VaadinIcon icon='vaadin:sitemap' style={{ color: `${isDisabled(PROXY_CHAINS) ? theme.palette.text.disabled : theme.palette.text.primary}`, height: '18px' }} />
}
Expand All @@ -132,6 +134,7 @@ function AccountMenu ({ address, isMenuOpen, setShowMenu }: Props): React.ReactE
/>
<MenuItem
disabled={isDisabled(SOCIAL_RECOVERY_CHAINS)}
fontSize='16px'
iconComponent={
<SocialRecoveryIcon
color={
Expand All @@ -148,6 +151,7 @@ function AccountMenu ({ address, isMenuOpen, setShowMenu }: Props): React.ReactE
/>
<MenuItem
disabled={false} // We check NFTs across all supported chains, so this feature is not specific to the current chain and should not be disabled.
fontSize='16px'
iconComponent={
<FontAwesomeIcon
color={theme.palette.text.primary}
Expand All @@ -164,8 +168,10 @@ function AccountMenu ({ address, isMenuOpen, setShowMenu }: Props): React.ReactE
address={address}
closeParentMenu={closeMenu}
/>
<MenuSeparator />
{hasPrivateKey &&
<MenuItem
fontSize='16px'
iconComponent={
<VaadinIcon icon='vaadin:download-alt' style={vaadinIconStyle} />
}
Expand All @@ -175,6 +181,7 @@ function AccountMenu ({ address, isMenuOpen, setShowMenu }: Props): React.ReactE
/>}
{hasPrivateKey &&
<MenuItem
fontSize='16px'
iconComponent={
<VaadinIcon icon='vaadin:road-branch' style={vaadinIconStyle} />
}
Expand All @@ -184,6 +191,7 @@ function AccountMenu ({ address, isMenuOpen, setShowMenu }: Props): React.ReactE
/>
}
<MenuItem
fontSize='16px'
iconComponent={
<VaadinIcon icon='vaadin:edit' style={vaadinIconStyle} />
}
Expand All @@ -192,6 +200,7 @@ function AccountMenu ({ address, isMenuOpen, setShowMenu }: Props): React.ReactE
withHoverEffect
/>
<MenuItem
fontSize='16px'
iconComponent={
<VaadinIcon icon='vaadin:file-remove' style={vaadinIconStyle} />
}
Expand All @@ -207,7 +216,7 @@ function AccountMenu ({ address, isMenuOpen, setShowMenu }: Props): React.ReactE
label={t('Chain')}
onChange={onChangeNetwork}
options={options}
style={{ width: '100%' }}
style={{ pt: 0, width: '100%' }}
/>
<RemoteNodeSelector
address={address}
Expand All @@ -219,7 +228,7 @@ function AccountMenu ({ address, isMenuOpen, setShowMenu }: Props): React.ReactE
left: '15px',
p: 0,
position: 'absolute',
top: '65px'
top: '58px'
}}
>
<CloseIcon sx={{ color: 'text.primary', fontSize: 35 }} />
Expand Down

0 comments on commit ec5f133

Please sign in to comment.