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 all 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
2 changes: 1 addition & 1 deletion packages/extension-polkagate/src/components/AccountIcons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ function AccountIcons ({ address, identiconTheme, isSubId, judgements, prefix }:
judgement={judgements}
prefix={prefix}
size={40}
value={formatted}
value={formatted || address}
/>
</Grid>
<Grid container direction='row' item justifyContent='center'>
Expand Down
8 changes: 3 additions & 5 deletions packages/extension-polkagate/src/components/Identicon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
// Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
// SPDX-License-Identifier: Apache-2.0
// @ts-nocheck

import type { ThemeProps } from '@polkadot/extension-polkagate/types';
import type { IconTheme } from '@polkadot/react-identicon/types';
import type { AccountId } from '@polkadot/types/interfaces/runtime';

Expand All @@ -14,7 +12,7 @@ import Icon from '@polkadot/react-identicon';

interface Props {
className?: string;
iconTheme?: IconTheme | string;
iconTheme?: IconTheme;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Type restriction on iconTheme is a breaking change

The search results show that iconTheme prop is widely used throughout the codebase with string values, specifically:

  • Many components pass chain?.icon || 'polkadot' as the iconTheme
  • The fallback value 'polkadot' is a string literal

Changing the type from IconTheme | string to just IconTheme would break these existing usages. The type should continue to support string values to maintain compatibility.

🔗 Analysis chain

Verify usage of string-based icon themes.

The type restriction from IconTheme | string to IconTheme improves type safety but could be a breaking change if string values were being passed to this prop.

Let's verify all usages of this component with the iconTheme prop:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for Identicon component usage with iconTheme prop
rg -A 2 '<Identicon.*iconTheme'

Length of output: 33

Script:

#!/bin/bash
# Let's try a broader search for Identicon usage and manually inspect the results
rg -l '<Identicon'

# Also search for any imports of the Identicon component to trace its usage
rg -l "import.*Identicon"

# Additionally, let's check if there are any direct references to iconTheme
rg "iconTheme"

Length of output: 5402

isSubId?: boolean;
judgement?: RegExpMatchArray | null | undefined;
onCopy?: () => void;
Expand All @@ -23,7 +21,7 @@ interface Props {
value?: AccountId | string | null;
}

function Identicon({ className, iconTheme, isSubId, judgement, onCopy, prefix, size, value }: Props): React.ReactElement<Props> {
function Identicon ({ className, iconTheme, isSubId, judgement, onCopy, prefix, size, value }: Props): React.ReactElement<Props> {
return (
<div style={{ position: 'relative' }}>
<div className={className}>
Expand Down Expand Up @@ -70,7 +68,7 @@ function Identicon({ className, iconTheme, isSubId, judgement, onCopy, prefix, s
);
}

export default React.memo(styled(Identicon)(({ theme }: ThemeProps) => `
export default React.memo(styled(Identicon)(() => `
background: rgba(192, 192, 292, 0.25);
border-radius: 50%;
display: flex;
Expand Down
26 changes: 2 additions & 24 deletions packages/extension-polkagate/src/components/Main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
// Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
// SPDX-License-Identifier: Apache-2.0
// @ts-nocheck


import React from 'react';

Expand All @@ -10,30 +8,10 @@ interface Props {
className?: string;
}

export default function Main({ children, className }: Props): React.ReactElement<Props> {
export default function Main ({ children, className }: Props): React.ReactElement<Props> {
return (
<main className={className}>
{children}
</main>
);
}

// export default styled(Main)(({ theme }: ThemeProps) => `
// display: flex;
// flex-direction: column;
// height: calc(100vh - 2px);
// background: ${theme.background};
// color: ${theme.textColor};
// font-size: ${theme.fontSize};
// line-height: ${theme.lineHeight};
// border: 1px solid ${theme.inputBorderColor};

// * {
// font-family: ${theme.fontFamily};
// }

// > * {
// padding-left: 20px;
// padding-right: 20px;
// }
// `);
}
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
9 changes: 4 additions & 5 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 = 'white', left = '7px', noBorder }: {color?: string, left?: string, noBorder?: boolean}): React.ReactElement {
const theme = useTheme();
const colorMode = useContext(ColorContext);

Expand Down Expand Up @@ -51,9 +50,9 @@ function ThemeChanger(): React.ReactElement {
const themeIconsStyle = {
animationDuration: '250ms',
animationFillMode: 'forwards',
color: 'white',
color,
fontSize: '27px',
left: '7px',
left,
m: 'auto',
position: 'absolute',
top: 0
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
7 changes: 2 additions & 5 deletions ...extension-polkagate/src/fullscreen/homeFullScreen/partials/ImportAccSubMenuFullScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +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 { faSitemap } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { ArrowForwardIos as ArrowForwardIosIcon } from '@mui/icons-material';
import { Collapse, Grid, useTheme } from '@mui/material';
import React, { useCallback } from 'react';

import settings from '@polkadot/ui-settings';

import { useTranslation } from '../../../hooks';
import { VaadinIcon } from '../../../components';
import { useTranslation } from '../../../hooks';
import { openOrFocusTab } from '../../accountDetails/components/CommonTasks';
import { TaskButton } from './HomeMenu';

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

function ImportAccSubMenuFullScreen({ show, toggleSettingSubMenu }: Props): React.ReactElement<Props> {
function ImportAccSubMenuFullScreen ({ show, toggleSettingSubMenu }: Props): React.ReactElement<Props> {
const { t } = useTranslation();
const theme = useTheme();

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
Loading
Loading