Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

style: change colors and spaces #1611

Merged
merged 8 commits into from
Oct 28, 2024
Merged

style: change colors and spaces #1611

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
bd9d4d9
style: change colors and spaces
Nick-1979 Oct 27, 2024
671c02f
chore: add accessibility, prefersReducedMotion
Nick-1979 Oct 28, 2024
fffb353
fix: align account settings menu dividers
Nick-1979 Oct 28, 2024
74416ba
style: align colors and width of sub-menu's divider
Nick-1979 Oct 28, 2024
4afc6d3
style: adjust theme icon left
Nick-1979 Oct 28, 2024
b2f80ab
chore: remove unused
Nick-1979 Oct 28, 2024
a6bb58c
fix: show identicon if formatted is undefined
Nick-1979 Oct 28, 2024
9b05146
fix: handle when no background image has been set
Nick-1979 Oct 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 39 additions & 4 deletions packages/extension-polkagate/src/components/VaadinIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,51 @@
// Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
// SPDX-License-Identifier: Apache-2.0
// @ts-nocheck

import React from 'react';
import '@vaadin/icons';

import React, { useEffect } from 'react';

interface VaadinIconProps extends React.HTMLAttributes<HTMLElement> {
icon: string;
spin?: boolean;
float?: boolean;
}

const VaadinIcon: React.FC<VaadinIconProps> = ({ icon, ...props }) => {
return <vaadin-icon icon={icon} {...props} />;
const VaadinIcon: React.FC<VaadinIconProps> = ({ float = false, icon, spin = false, style, ...props }) => {
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

useEffect(() => {
// Check if the animations are already injected
if (!document.getElementById('vaadin-icon-animation-keyframes')) {
const styleSheet = document.createElement('style');

styleSheet.id = 'vaadin-icon-animation-keyframes';
styleSheet.innerText = `
@keyframes vaadinSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
`;
document.head.appendChild(styleSheet);
}
}, []);
Nick-1979 marked this conversation as resolved.
Show resolved Hide resolved

// Combine inline styles with the animations if enabled
const combinedStyles: React.CSSProperties = {
animation: `${spin && !prefersReducedMotion ? 'vaadinSpin 3s linear infinite' : ''} ${float && !prefersReducedMotion ? 'float 2s ease-in-out infinite' : ''}`,
...style
};

// @ts-ignore
return <vaadin-icon
icon={icon}
style={combinedStyles}
{...props}
/>;
};

export default VaadinIcon;
5 changes: 2 additions & 3 deletions packages/extension-polkagate/src/fullscreen/accountDetails/components/AccountSetting.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
// Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
// SPDX-License-Identifier: Apache-2.0
// @ts-nocheck

/* eslint-disable react/jsx-max-props-per-line */

Expand All @@ -21,7 +20,7 @@ interface Props {
setDisplayPopup: React.Dispatch<React.SetStateAction<number | undefined>>;
}

export default function AccountSetting({ address, setDisplayPopup }: Props): React.ReactElement {
export default function AccountSetting ({ address, setDisplayPopup }: Props): React.ReactElement {
const { t } = useTranslation();
const theme = useTheme();
const { account, chain } = useInfo(address);
Expand Down Expand Up @@ -77,7 +76,7 @@ export default function AccountSetting({ address, setDisplayPopup }: Props): Rea
/>
</Grid>
<Collapse in={showAccountSettings} sx={{ width: '100%' }}>
<Grid alignItems='center' container direction='column' item justifyContent='center'>
<Grid alignItems='flex-end' container direction='column' item justifyContent='center'>
<Divider sx={{ bgcolor: 'divider', height: '2px', m: '5px auto 15px', width: '90%' }} />
<TaskButton
disabled={identityDisable}
Expand Down
16 changes: 9 additions & 7 deletions packages/extension-polkagate/src/fullscreen/accountDetails/components/CommonTasks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,15 +30,16 @@ interface Props {
}

interface TaskButtonProps {
disabled?: boolean;
dividerWidth?: string;
icon: React.JSX.Element;
text: string;
loading?: boolean;
mr?: string;
noBorderButton?: boolean;
onClick: () => void;
secondaryIconType: 'popup' | 'page';
noBorderButton?: boolean;
disabled?: boolean;
text: string;
show?: boolean;
mr?: string;
loading?: boolean;
}

export const openOrFocusTab = (relativeUrl: string, closeCurrentTab?: boolean): void => {
Expand Down Expand Up @@ -69,7 +70,7 @@ export const openOrFocusTab = (relativeUrl: string, closeCurrentTab?: boolean):
});
};

export const TaskButton = ({ disabled, icon, loading, mr = '25px', noBorderButton = false, onClick, secondaryIconType, show = true, text }: TaskButtonProps) => {
export const TaskButton = ({ disabled, dividerWidth = '66%', icon, loading, mr = '25px', noBorderButton = false, onClick, secondaryIconType, show = true, text }: TaskButtonProps) => {
const theme = useTheme();

return (
Expand Down Expand Up @@ -99,7 +100,8 @@ export const TaskButton = ({ disabled, icon, loading, mr = '25px', noBorderButto
/>
}
</Grid>
{!noBorderButton && <Divider sx={{ bgcolor: 'divider', height: '2px', m: '5px auto', width: '85%' }} />
{!noBorderButton &&
<Divider sx={{ bgcolor: 'divider', height: '2px', justifySelf: 'flex-end', m: '5px 15px', width: dividerWidth }} />
}
</>
}
Expand Down
7 changes: 3 additions & 4 deletions packages/extension-polkagate/src/fullscreen/governance/partials/ThemeChanger.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
// Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
// SPDX-License-Identifier: Apache-2.0
// @ts-nocheck

/* eslint-disable react/jsx-max-props-per-line */

Expand All @@ -10,7 +9,7 @@ import React, { useCallback, useContext } from 'react';

import { ColorContext } from '../../../components';

function ThemeChanger(): React.ReactElement {
function ThemeChanger ({ color, noBorder }: {color?: string, noBorder?: boolean}): React.ReactElement {
const theme = useTheme();
const colorMode = useContext(ColorContext);

Expand Down Expand Up @@ -51,7 +50,7 @@ function ThemeChanger(): React.ReactElement {
const themeIconsStyle = {
animationDuration: '250ms',
animationFillMode: 'forwards',
color: 'white',
color: color || 'white',
fontSize: '27px',
left: '7px',
m: 'auto',
Expand All @@ -62,7 +61,7 @@ function ThemeChanger(): React.ReactElement {
const toggleTheme = useCallback(() => colorMode.toggleColorMode(), [colorMode]);

return (
<Grid container item onClick={toggleTheme} sx={{ border: '1px solid', borderColor: 'secondary.light', borderRadius: '5px', cursor: 'pointer', height: '42px', overflow: 'hidden', position: 'relative', width: '42px' }}>
<Grid container item onClick={toggleTheme} sx={{ border: noBorder ? undefined : '1px solid', borderColor: 'secondary.light', borderRadius: '5px', cursor: 'pointer', height: '42px', overflow: 'hidden', position: 'relative', width: '42px' }}>
Nick-1979 marked this conversation as resolved.
Show resolved Hide resolved
<LightModeOutlinedIcon sx={{ animationName: `${theme.palette.mode === 'dark' ? sunSlide.go : sunSlide.come}`, ...themeIconsStyle }} />
<DarkModeOutlinedIcon sx={{ animationName: `${theme.palette.mode === 'dark' ? moonSlide.come : moonSlide.go}`, ...themeIconsStyle }} />
</Grid>
Expand Down
8 changes: 5 additions & 3 deletions packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/HomeMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,9 @@ export const TaskButton = ({ children, disabled, extra, hasChildren, icon, isSub
</Grid>
{extra}
<Grid container item justifyContent='flex-end'>
{!noBorderButton && <Divider sx={{ bgcolor: 'divider', height: '2px', width: '98%' }} />}
{!noBorderButton &&
<Divider sx={{ bgcolor: 'divider', height: '2px', width: '81%' }} />
}
</Grid>
{children}
</>
Expand Down Expand Up @@ -118,7 +120,7 @@ export default function HomeMenu(): React.ReactElement {
<TaskButton
hasChildren
icon={
<VaadinIcon icon='vaadin:upload-alt' style={{ height: '30px', color: `${theme.palette.text.primary}`, width: '30px' }} />
<VaadinIcon float={showImport} icon='vaadin:upload-alt' style={{ height: '30px', color: `${theme.palette.text.primary}`, width: '30px' }} />
}
onClick={onImportClick}
secondaryIconType='page'
Expand All @@ -139,7 +141,7 @@ export default function HomeMenu(): React.ReactElement {
<TaskButton
hasChildren
icon={
<VaadinIcon icon='vaadin:cog' style={{ height: '30px', color: `${theme.palette.text.primary}`, width: '30px' }} />
<VaadinIcon icon='vaadin:cog' spin ={showSetting} style={{ height: '30px', color: `${theme.palette.text.primary}`, width: '30px' }} />
Nick-1979 marked this conversation as resolved.
Show resolved Hide resolved
}
noBorderButton
onClick={onSettingClick}
Expand Down
2 changes: 1 addition & 1 deletion ...s/extension-polkagate/src/fullscreen/homeFullScreen/partials/SettingSubMenuFullScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ export default function SettingSubMenuFullScreen({ show }: Props): React.ReactEl
<>
<Collapse in={show}>
<>
<Divider sx={{ bgcolor: 'divider', height: '1px' }} />
<Divider sx={{ bgcolor: 'divider', height: '1px', justifySelf: 'flex-end', width: '81%' }} />
<Grid container direction='column' sx={{ p: '0px 0 15px 40px' }}>
<TaskButton
icon={
Expand Down
15 changes: 9 additions & 6 deletions packages/extension-polkagate/src/fullscreen/stake/pool/partials/PoolCommonTasks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
// Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
// SPDX-License-Identifier: Apache-2.0
// @ts-nocheck

/* eslint-disable react/jsx-max-props-per-line */

Expand Down Expand Up @@ -50,7 +49,6 @@ export default function PoolCommonTasks({ address }: Props): React.ReactElement

const pool = usePool(address, undefined, refresh);

const isDarkTheme = useMemo(() => theme.palette.mode === 'dark', [theme.palette.mode]);
const poolState = useMemo(() => pool?.bondedPool?.state?.toString(), [pool?.bondedPool?.state]);
const canChangeState = useMemo(() => pool?.bondedPool && formatted && [String(pool?.bondedPool?.roles?.root), String(pool?.bondedPool?.roles?.bouncer)].includes(String(formatted)), [pool?.bondedPool, formatted]);
const poolRoot = useMemo(() => pool?.bondedPool && formatted && String(pool?.bondedPool?.roles?.root) === (String(formatted)), [pool?.bondedPool, formatted]);
Expand Down Expand Up @@ -115,6 +113,7 @@ export default function PoolCommonTasks({ address }: Props): React.ReactElement
<Grid alignItems='center' container direction='column' display='block' item justifyContent='center'>
<TaskButton
disabled={!justMember || !staked || staked.isZero()}
dividerWidth='76%'
icon={
<FontAwesomeIcon
color={!justMember || !staked || staked.isZero() ? theme.palette.action.disabledBackground : theme.palette.text.primary}
Expand Down Expand Up @@ -144,9 +143,10 @@ export default function PoolCommonTasks({ address }: Props): React.ReactElement
withHoverEffect
>
<Collapse in={showManagePool} style={{ paddingRight: 0 }} sx={{ '& p': { pl: '5px' }, width: '100%' }}>
<Divider sx={{ bgcolor: 'divider', height: '2px', m: '5px auto', width: 'calc(100% - 8px)' }} />
<Divider sx={{ bgcolor: 'divider', height: '2px', justifySelf: 'flex-end', my: '5px', width: '89%' }} />
<TaskButton
disabled={poolState === 'Destroying' || !poolRoot}
dividerWidth='73%'
icon={
<FontAwesomeIcon
color={`${poolState === 'Destroying' || !poolRoot ? theme.palette.action.disabledBackground : theme.palette.text.primary}`}
Expand All @@ -162,6 +162,7 @@ export default function PoolCommonTasks({ address }: Props): React.ReactElement
/>
<TaskButton
disabled={poolState === 'Destroying' || !poolRoot}
dividerWidth='73%'
icon={
<FontAwesomeIcon
color={poolState === 'Destroying' || !poolRoot ? theme.palette.action.disabledBackground : theme.palette.text.primary}
Expand All @@ -176,6 +177,7 @@ export default function PoolCommonTasks({ address }: Props): React.ReactElement
/>
<TaskButton
disabled={isRemoveAllDisabled || (!poolRoot && !poolBouncer)}
dividerWidth='73%'
icon={
<FontAwesomeIcon
color={isRemoveAllDisabled || (!poolRoot && !poolBouncer) ? theme.palette.action.disabledBackground : theme.palette.text.primary}
Expand All @@ -190,6 +192,7 @@ export default function PoolCommonTasks({ address }: Props): React.ReactElement
/>
<TaskButton
disabled={poolState === 'Destroying' || (!poolRoot && !poolBouncer)}
dividerWidth='73%'
icon={
<FontAwesomeIcon
color={poolState === 'Destroying' || (!poolRoot && !poolBouncer) ? theme.palette.action.disabledBackground : theme.palette.text.primary}
Expand All @@ -204,6 +207,7 @@ export default function PoolCommonTasks({ address }: Props): React.ReactElement
/>
<TaskButton
disabled={poolState === 'Destroying' || (!poolRoot && !poolBouncer)}
dividerWidth='73%'
icon={
<AutoDeleteIcon
sx={{ color: poolState === 'Destroying' || (!poolRoot && !poolBouncer) ? 'action.disabledBackground' : 'text.primary', fontSize: '23px' }}
Expand All @@ -227,7 +231,7 @@ export default function PoolCommonTasks({ address }: Props): React.ReactElement
<EditPool
address={address}
api={api}
chain={chain as any}
chain={chain}
onClose={resetModal}
pool={pool}
setRefresh={setRefresh}
Expand All @@ -237,7 +241,6 @@ export default function PoolCommonTasks({ address }: Props): React.ReactElement
<SetState
address={address}
api={api}
chain={chain as any}
formatted={formatted}
onClose={resetModal}
pool={pool}
Expand All @@ -257,7 +260,7 @@ export default function PoolCommonTasks({ address }: Props): React.ReactElement
<RemoveAll
address={address}
api={api}
chain={chain as any}
chain={chain}
onClose={resetModal}
pool={pool}
setRefresh={setRefresh}
Expand Down
1 change: 1 addition & 0 deletions packages/extension-polkagate/src/fullscreen/stake/solo/partials/CommonTasks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ export default function CommonTasks ({ address, setRefresh, staked }: Props): Re
<Grid alignItems='center' container direction='column' display='block' item justifyContent='center'>
<TaskButton
disabled={isDisabled}
dividerWidth='75%'
Nick-1979 marked this conversation as resolved.
Show resolved Hide resolved
icon={
<FontAwesomeIcon
color={`${iconColor}`}
Expand Down
7 changes: 3 additions & 4 deletions packages/extension-polkagate/src/partials/ImportAccSubMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
// Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
// SPDX-License-Identifier: Apache-2.0
// @ts-nocheck

/* eslint-disable react/jsx-max-props-per-line */

Expand All @@ -19,7 +18,7 @@ interface Props {
show: boolean;
}

function ImportAccSubMenu({ show, toggleSettingSubMenu }: Props): React.ReactElement<Props> {
function ImportAccSubMenu ({ show, toggleSettingSubMenu }: Props): React.ReactElement<Props> {
const { t } = useTranslation();
const theme = useTheme();
const onAction = useContext(ActionContext);
Expand Down Expand Up @@ -54,8 +53,8 @@ function ImportAccSubMenu({ show, toggleSettingSubMenu }: Props): React.ReactEle

return (
<Collapse easing={{ enter: '200ms', exit: '100ms' }} in={show} sx={{ width: '100%' }}>
<Grid container item>
<Divider sx={{ bgcolor: 'secondary.light', height: '1px', width: '100%' }} />
<Grid container item justifyContent='flex-end'>
<Divider sx={{ bgcolor: 'divider', height: '1px', mr: '10px', width: '83%' }} />
Nick-1979 marked this conversation as resolved.
Show resolved Hide resolved
<Grid container direction='column' display='block' item sx={{ p: '10px', pr: 0 }}>
<MenuItem
fontSize='17px'
Expand Down
24 changes: 14 additions & 10 deletions packages/extension-polkagate/src/partials/Menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
// 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 type { Theme } from '@mui/material/styles';

import { Close as CloseIcon } from '@mui/icons-material';
import { Divider, Grid, IconButton, Typography } from '@mui/material';
import { keyframes, Theme } from '@mui/material/styles';
import { keyframes } from '@mui/material/styles';
import React, { useCallback, useContext, useState } from 'react';

import { AccountContext, ActionContext, MenuItem, TwoButtons, VaadinIcon,Warning } from '../components';
import { AccountContext, ActionContext, MenuItem, TwoButtons, VaadinIcon, Warning } from '../components';
import { setStorage } from '../components/Loading';
import { useTranslation } from '../hooks';
import { tieAccount } from '../messaging';
Expand All @@ -31,9 +32,12 @@ const COLLAPSIBLE_MENUS = {
SETTING: 3
};

function Menu({ setShowMenu, theme }: Props): React.ReactElement<Props> {
const Div = () => <Divider sx={{ bgcolor: 'divider', height: '1px', justifySelf: 'flex-end', mx: '10px', width: '83%' }} />;
Nick-1979 marked this conversation as resolved.
Show resolved Hide resolved

function Menu ({ setShowMenu, theme }: Props): React.ReactElement<Props> {
const { t } = useTranslation();
const onAction = useContext(ActionContext);

const [collapsedMenu, setCollapsedMenu] = useState<number>(COLLAPSIBLE_MENUS.SETTING);
const [isTestnetEnableConfirmed, setIsTestnetEnableConfirmed] = useState<boolean>();
const [showWarning, setShowWarning] = useState<boolean>();
Expand Down Expand Up @@ -117,7 +121,7 @@ function Menu({ setShowMenu, theme }: Props): React.ReactElement<Props> {
? <>
<MenuItem
iconComponent={
<VaadinIcon icon='vaadin:plus-circle' style={{ height: '18px', color: `${theme.palette.text.primary}` }} />
<VaadinIcon icon='vaadin:plus-circle' spin={collapsedMenu === COLLAPSIBLE_MENUS.NEW_ACCOUNT} style={{ height: '18px', color: `${theme.palette.text.primary}` }} />
}
onClick={toggleNewAccountSubMenu}
showSubMenu={collapsedMenu === COLLAPSIBLE_MENUS.NEW_ACCOUNT}
Expand All @@ -126,10 +130,10 @@ function Menu({ setShowMenu, theme }: Props): React.ReactElement<Props> {
>
<NewAccountSubMenu show={collapsedMenu === COLLAPSIBLE_MENUS.NEW_ACCOUNT} />
</MenuItem>
<Divider sx={{ bgcolor: 'secondary.light', height: '1px' }} />
<Div />
<MenuItem
iconComponent={
<VaadinIcon icon='vaadin:upload-alt' style={{ height: '18px', color: `${theme.palette.text.primary}` }} />
<VaadinIcon float ={collapsedMenu === COLLAPSIBLE_MENUS.IMPORT_ACCOUNT} icon='vaadin:upload-alt' style={{ height: '18px', color: `${theme.palette.text.primary}` }} />
}
onClick={toggleImportSubMenu}
showSubMenu={collapsedMenu === COLLAPSIBLE_MENUS.IMPORT_ACCOUNT}
Expand All @@ -138,7 +142,7 @@ function Menu({ setShowMenu, theme }: Props): React.ReactElement<Props> {
>
<ImportAccSubMenu show={collapsedMenu === COLLAPSIBLE_MENUS.IMPORT_ACCOUNT} toggleSettingSubMenu={toggleSettingSubMenu} />
</MenuItem>
<Divider sx={{ bgcolor: 'secondary.light', height: '1px' }} />
<Div />
<MenuItem
iconComponent={
<VaadinIcon icon='vaadin:download' style={{ height: '18px', color: `${theme.palette.text.primary}` }} />
Expand All @@ -147,10 +151,10 @@ function Menu({ setShowMenu, theme }: Props): React.ReactElement<Props> {
text={t('Export all accounts')}
withHoverEffect
/>
<Divider sx={{ bgcolor: 'secondary.light', height: '1px' }} />
<Div />
<MenuItem
iconComponent={
<VaadinIcon icon='vaadin:cog' style={{ height: '18px', color: `${theme.palette.text.primary}` }} />
<VaadinIcon icon='vaadin:cog' spin={collapsedMenu === COLLAPSIBLE_MENUS.SETTING} style={{ height: '18px', color: `${theme.palette.text.primary}` }} />
}
onClick={toggleSettingSubMenu}
showSubMenu={collapsedMenu === COLLAPSIBLE_MENUS.SETTING}
Expand Down
Loading
Loading