Skip to content

Commit ec5f133

Browse files
AMIRKHANEFAMIRKHANEF
authored
style: reduce font size (#1658)
1 parent 6ffc4e5 commit ec5f133

File tree

4 files changed

+47
-23
lines changed

4 files changed

+47
-23
lines changed

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { noop } from '../util/utils';
1212
interface Props {
1313
disabled?: boolean;
1414
icon?: string;
15-
iconComponent?: JSX.Element;
15+
iconComponent?: React.JSX.Element;
1616
text: string;
1717
children?: React.ReactElement<Props>;
1818
onClick?: MouseEventHandler<HTMLDivElement>;
@@ -35,8 +35,8 @@ export default function MenuItem ({ children, disabled = false, fontSize, icon,
3535

3636
return (
3737
<>
38-
<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}>
39-
<Grid alignItems='center' container item xs sx={{ flexWrap: 'nowrap' }}>
38+
<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}>
39+
<Grid alignItems='center' container item sx={{ flexWrap: 'nowrap' }} xs>
4040
<Grid alignItems='center' container item xs={1}>
4141
{iconComponent ??
4242
<Box

‎packages/extension-polkagate/src/components/RemoteNodeSelector.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export default function RemoteNodeSelector ({ address, genesisHash }: Props): Re
4040
<>
4141
{endpoint &&
4242
<Select
43-
_mt='10px'
43+
_mt='3px'
4444
defaultValue={undefined}
4545
label={t('Remote node')}
4646
onChange={onChangeEndpoint}

‎packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/ProfileMenu.tsx

Lines changed: 28 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -60,13 +60,15 @@ const InputBox = ({ addToNewProfile, editName, newName }: InputBoxProps) => {
6060
};
6161

6262
interface AddProfileProps {
63-
address: string | undefined
63+
address: string | undefined;
6464
showName: boolean | undefined;
6565
setShowName: React.Dispatch<React.SetStateAction<boolean | undefined>>;
66-
handleClose: () => void
66+
handleClose: () => void;
67+
closeParentMenu: () => void
68+
extensionMode: boolean;
6769
}
6870

69-
const AddMenu = ({ address, handleClose, setShowName, showName }: AddProfileProps) => {
71+
const AddMenu = ({ address, closeParentMenu, extensionMode, handleClose, setShowName, showName }: AddProfileProps) => {
7072
const theme = useTheme();
7173
const { t } = useTranslation();
7274
const { userDefinedProfiles } = useProfiles();
@@ -103,18 +105,20 @@ const AddMenu = ({ address, handleClose, setShowName, showName }: AddProfileProp
103105
updateMeta(String(address), metaData)
104106
.then(() => {
105107
handleClose();
108+
closeParentMenu();
106109
}).catch(console.error);
107-
}, [account, address, handleClose]);
110+
}, [account, address, closeParentMenu, handleClose]);
108111

109112
return (
110-
<Grid alignItems='flex-start' container display='block' item sx={{ borderRadius: '10px', minWidth: '300px', p: '10px' }}>
113+
<Grid alignItems='flex-start' container display='block' item sx={{ borderRadius: '10px', minWidth: '300px', p: extensionMode ? '5px' : '10px' }}>
111114
{showName
112115
? <InputBox
113116
addToNewProfile={addToNewProfile}
114117
editName={editName}
115118
newName={newName}
116119
/>
117120
: <MenuItem
121+
fontSize={extensionMode ? '16px' : undefined}
118122
iconComponent={
119123
<VaadinIcon icon='vaadin:plus' style={{ color: theme.palette.text.primary, height: '20px' }} />
120124
}
@@ -123,10 +127,11 @@ const AddMenu = ({ address, handleClose, setShowName, showName }: AddProfileProp
123127
withHoverEffect
124128
/>
125129
}
126-
<Divider sx={{ bgcolor: 'divider', height: '1px', my: '6px' }} />
130+
<Divider sx={{ bgcolor: 'divider', height: '1px', my: extensionMode ? '3px' : '6px' }} />
127131
{userDefinedProfiles.length > 0
128132
? userDefinedProfiles.map((profile) => (
129133
<MenuItem
134+
fontSize={extensionMode ? '16px' : undefined}
130135
iconComponent={
131136
<VaadinIcon icon='vaadin:folder-open-o' style={{ color: theme.palette.text.primary, height: '20px' }} />
132137
}
@@ -139,6 +144,7 @@ const AddMenu = ({ address, handleClose, setShowName, showName }: AddProfileProp
139144
))
140145
: <MenuItem
141146
disabled
147+
fontSize={extensionMode ? '16px' : undefined}
142148
iconComponent={
143149
<VaadinIcon icon='vaadin:minus' style={{ color: `${theme.palette.text.disabled}`, height: '20px' }} />
144150
}
@@ -153,18 +159,20 @@ const AddMenu = ({ address, handleClose, setShowName, showName }: AddProfileProp
153159
interface RemoveProfileProps {
154160
profileNames: string[] | undefined;
155161
onRemove: (profile: string) => void;
162+
extensionMode: boolean;
156163
}
157164

158-
const RemoveMenu = ({ onRemove, profileNames }: RemoveProfileProps) => {
165+
const RemoveMenu = ({ extensionMode, onRemove, profileNames }: RemoveProfileProps) => {
159166
const theme = useTheme();
160167
const { t } = useTranslation();
161168

162169
return (
163-
<Grid alignItems='flex-start' container display='block' item sx={{ borderRadius: '10px', minWidth: '300px', p: '10px' }}>
170+
<Grid alignItems='flex-start' container display='block' item sx={{ borderRadius: '10px', minWidth: '300px', p: extensionMode ? '5px' : '10px' }}>
164171
{profileNames?.map((profileName) => (
165172
// eslint-disable-next-line react/jsx-no-bind
166173
<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' }}>
167174
<MenuItem
175+
fontSize={extensionMode ? '16px' : undefined}
168176
iconComponent={
169177
<VaadinIcon icon='vaadin:folder-remove' style={{ color: theme.palette.text.primary, height: '20px' }} />
170178
}
@@ -206,8 +214,7 @@ function ProfileMenu ({ address, closeParentMenu }: Props): React.ReactElement<P
206214
const handleClose = useCallback(() => {
207215
setAnchorEl(null);
208216
setShowName(false);
209-
closeParentMenu();
210-
}, [closeParentMenu]);
217+
}, []);
211218

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

241248
if (isLastAccountWithTheProfile && currentProfile === profileToBeRemoved) {
242249
setStorage('profile', PROFILE_TAGS.ALL)
243-
.then(handleClose)
250+
.then(() => {
251+
handleClose();
252+
closeParentMenu();
253+
})
244254
.catch(console.error);
245255
} else {
246256
handleClose();
257+
closeParentMenu();
247258
}
248259
})
249260
.catch(console.error);
250-
}, [profileNames, accounts, address, currentProfile, handleClose]);
261+
}, [address, profileNames, accounts, currentProfile, handleClose, closeParentMenu]);
251262

252263
const open = Boolean(anchorEl);
253264
const id = open ? 'simple-popover 2' : undefined;
@@ -256,6 +267,7 @@ function ProfileMenu ({ address, closeParentMenu }: Props): React.ReactElement<P
256267
<>
257268
<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' }}>
258269
<MenuItem
270+
fontSize={isExtensionMode ? '16px' : undefined}
259271
iconComponent={
260272
<VaadinIcon icon='vaadin:folder-add' style={{ color: `${theme.palette.text.primary}`, height: '20px' }} />
261273
}
@@ -284,6 +296,7 @@ function ProfileMenu ({ address, closeParentMenu }: Props): React.ReactElement<P
284296
{isExtensionMode && profileNames && profileNames.length > 0 &&
285297
<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' }}>
286298
<MenuItem
299+
fontSize='16px'
287300
iconComponent={
288301
<VaadinIcon icon='vaadin:folder-remove' style={{ color: theme.palette.text.primary, height: '20px' }} />
289302
}
@@ -293,7 +306,6 @@ function ProfileMenu ({ address, closeParentMenu }: Props): React.ReactElement<P
293306
/>
294307
</Grid>
295308
}
296-
{isExtensionMode && <Divider sx={{ bgcolor: 'divider', height: '1px', my: '6px', width: '100%' }} />}
297309
<Popover
298310
PaperProps={{
299311
sx: {
@@ -322,12 +334,15 @@ function ProfileMenu ({ address, closeParentMenu }: Props): React.ReactElement<P
322334
{status === STATUS.SHOW_ADD &&
323335
<AddMenu
324336
address={address}
337+
closeParentMenu={closeParentMenu}
338+
extensionMode={isExtensionMode}
325339
handleClose={handleClose}
326340
setShowName={setShowName}
327341
showName={showName}
328342
/>}
329343
{status === STATUS.SHOW_REMOVE &&
330344
<RemoveMenu
345+
extensionMode={isExtensionMode}
331346
onRemove={onRemove}
332347
profileNames={profileNames}
333348
/>

‎packages/extension-polkagate/src/partials/AccountMenu.tsx

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@ const Transition = React.forwardRef(function Transition (props: TransitionProps
2929
return <Slide direction='up' ref={ref} {...props} />;
3030
});
3131

32+
const MenuSeparator = () => <Divider sx={{ bgcolor: 'divider', height: '1px', my: '3px' }} />;
33+
3234
function AccountMenu ({ address, isMenuOpen, setShowMenu }: Props): React.ReactElement<Props> {
3335
const { t } = useTranslation();
3436
const theme = useTheme();
@@ -92,8 +94,6 @@ function AccountMenu ({ address, isMenuOpen, setShowMenu }: Props): React.ReactE
9294
return !supportedChains.includes(currentGenesisHash);
9395
}, [currentGenesisHash]);
9496

95-
const MenuSeparator = () => <Divider sx={{ bgcolor: 'divider', height: '1px', my: '6px' }} />;
96-
9797
const vaadinIconStyle = { color: `${theme.palette.text.primary}`, height: '18px' };
9898

9999
return (
@@ -104,12 +104,13 @@ function AccountMenu ({ address, isMenuOpen, setShowMenu }: Props): React.ReactE
104104
>
105105
<Grid bgcolor='divider' container height='100%' width='357px' zIndex={10}>
106106
<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%'>
107-
<Grid container item justifyContent='center' my='12px' pl='8px'>
108-
<Identity address={address} api={api} chain={chain} formatted={formatted} identiconSize={35} showSocial={false} subIdOnly />
107+
<Grid container item justifyContent='center' my='8px'>
108+
<Identity address={address} api={api} chain={chain} formatted={formatted} identiconSize={30} showSocial={false} style={{ fontSize: '24px' }} subIdOnly />
109109
</Grid>
110110
<MenuSeparator />
111111
<MenuItem
112112
disabled={isDisabled(IDENTITY_CHAINS)}
113+
fontSize='16px'
113114
iconComponent={
114115
<FontAwesomeIcon
115116
color={isDisabled(IDENTITY_CHAINS) ? theme.palette.text.disabled : theme.palette.text.primary}
@@ -123,6 +124,7 @@ function AccountMenu ({ address, isMenuOpen, setShowMenu }: Props): React.ReactE
123124
/>
124125
<MenuItem
125126
disabled={isDisabled(PROXY_CHAINS)}
127+
fontSize='16px'
126128
iconComponent={
127129
<VaadinIcon icon='vaadin:sitemap' style={{ color: `${isDisabled(PROXY_CHAINS) ? theme.palette.text.disabled : theme.palette.text.primary}`, height: '18px' }} />
128130
}
@@ -132,6 +134,7 @@ function AccountMenu ({ address, isMenuOpen, setShowMenu }: Props): React.ReactE
132134
/>
133135
<MenuItem
134136
disabled={isDisabled(SOCIAL_RECOVERY_CHAINS)}
137+
fontSize='16px'
135138
iconComponent={
136139
<SocialRecoveryIcon
137140
color={
@@ -148,6 +151,7 @@ function AccountMenu ({ address, isMenuOpen, setShowMenu }: Props): React.ReactE
148151
/>
149152
<MenuItem
150153
disabled={false} // We check NFTs across all supported chains, so this feature is not specific to the current chain and should not be disabled.
154+
fontSize='16px'
151155
iconComponent={
152156
<FontAwesomeIcon
153157
color={theme.palette.text.primary}
@@ -164,8 +168,10 @@ function AccountMenu ({ address, isMenuOpen, setShowMenu }: Props): React.ReactE
164168
address={address}
165169
closeParentMenu={closeMenu}
166170
/>
171+
<MenuSeparator />
167172
{hasPrivateKey &&
168173
<MenuItem
174+
fontSize='16px'
169175
iconComponent={
170176
<VaadinIcon icon='vaadin:download-alt' style={vaadinIconStyle} />
171177
}
@@ -175,6 +181,7 @@ function AccountMenu ({ address, isMenuOpen, setShowMenu }: Props): React.ReactE
175181
/>}
176182
{hasPrivateKey &&
177183
<MenuItem
184+
fontSize='16px'
178185
iconComponent={
179186
<VaadinIcon icon='vaadin:road-branch' style={vaadinIconStyle} />
180187
}
@@ -184,6 +191,7 @@ function AccountMenu ({ address, isMenuOpen, setShowMenu }: Props): React.ReactE
184191
/>
185192
}
186193
<MenuItem
194+
fontSize='16px'
187195
iconComponent={
188196
<VaadinIcon icon='vaadin:edit' style={vaadinIconStyle} />
189197
}
@@ -192,6 +200,7 @@ function AccountMenu ({ address, isMenuOpen, setShowMenu }: Props): React.ReactE
192200
withHoverEffect
193201
/>
194202
<MenuItem
203+
fontSize='16px'
195204
iconComponent={
196205
<VaadinIcon icon='vaadin:file-remove' style={vaadinIconStyle} />
197206
}
@@ -207,7 +216,7 @@ function AccountMenu ({ address, isMenuOpen, setShowMenu }: Props): React.ReactE
207216
label={t('Chain')}
208217
onChange={onChangeNetwork}
209218
options={options}
210-
style={{ width: '100%' }}
219+
style={{ pt: 0, width: '100%' }}
211220
/>
212221
<RemoteNodeSelector
213222
address={address}
@@ -219,7 +228,7 @@ function AccountMenu ({ address, isMenuOpen, setShowMenu }: Props): React.ReactE
219228
left: '15px',
220229
p: 0,
221230
position: 'absolute',
222-
top: '65px'
231+
top: '58px'
223232
}}
224233
>
225234
<CloseIcon sx={{ color: 'text.primary', fontSize: 35 }} />

0 commit comments

Comments
 (0)