style: change colors and spaces (#1611)

PolkaGate · Oct 28, 2024 · e4a22ac · e4a22ac
1 parent 7d55deb
commit e4a22ac
Show file tree

Hide file tree

Showing 19 changed files with 125 additions and 123 deletions.
diff --git a/packages/extension-polkagate/src/components/AccountIcons.tsx b/packages/extension-polkagate/src/components/AccountIcons.tsx
@@ -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'>

diff --git a/packages/extension-polkagate/src/components/Identicon.tsx b/packages/extension-polkagate/src/components/Identicon.tsx
@@ -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';
 
@@ -14,7 +12,7 @@ import Icon from '@polkadot/react-identicon';
 
 interface Props {
   className?: string;
-  iconTheme?: IconTheme | string;
+  iconTheme?: IconTheme;
   isSubId?: boolean;
   judgement?: RegExpMatchArray | null | undefined;
   onCopy?: () => void;
@@ -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}>
@@ -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;

diff --git a/packages/extension-polkagate/src/components/Main.tsx b/packages/extension-polkagate/src/components/Main.tsx
@@ -1,7 +1,5 @@
 // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
 // SPDX-License-Identifier: Apache-2.0
-// @ts-nocheck
-
 
 import React from 'react';
 
@@ -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;
-//   }
-// `);
+}
diff --git a/packages/extension-polkagate/src/components/VaadinIcon.tsx b/packages/extension-polkagate/src/components/VaadinIcon.tsx
@@ -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);
+    }
+  }, []);
+
+  // 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;
diff --git a/packages/extension-polkagate/src/fullscreen/accountDetails/components/AccountSetting.tsx b/packages/extension-polkagate/src/fullscreen/accountDetails/components/AccountSetting.tsx
@@ -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 */
 
@@ -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);
@@ -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}

diff --git a/packages/extension-polkagate/src/fullscreen/accountDetails/components/CommonTasks.tsx b/packages/extension-polkagate/src/fullscreen/accountDetails/components/CommonTasks.tsx
@@ -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 => {
@@ -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 (
@@ -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 }} />
           }
         </>
       }

diff --git a/packages/extension-polkagate/src/fullscreen/governance/partials/ThemeChanger.tsx b/packages/extension-polkagate/src/fullscreen/governance/partials/ThemeChanger.tsx
@@ -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 */
 
@@ -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);
 
@@ -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
@@ -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' }}>
       <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>

diff --git a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/HomeMenu.tsx b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/HomeMenu.tsx
@@ -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}
     </>
@@ -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'
@@ -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' }} />
           }
           noBorderButton
           onClick={onSettingClick}

diff --git a/...extension-polkagate/src/fullscreen/homeFullScreen/partials/ImportAccSubMenuFullScreen.tsx b/...extension-polkagate/src/fullscreen/homeFullScreen/partials/ImportAccSubMenuFullScreen.tsx
@@ -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';
 
@@ -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();
 

diff --git a/...s/extension-polkagate/src/fullscreen/homeFullScreen/partials/SettingSubMenuFullScreen.tsx b/...s/extension-polkagate/src/fullscreen/homeFullScreen/partials/SettingSubMenuFullScreen.tsx
@@ -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={