feat: redesign ResetPassword (#1696)

* feat: create ActionCard.tsx

* style: redesign Reset.tsx

* fix: disabled state of the GradientButton.tsx

packages/extension-polkagate/src/components/ActionCard.tsx

@@ -0,0 +1,102 @@
+// Copyright 2019-2025 @polkadot/extension-polkagate authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+/* eslint-disable react/jsx-max-props-per-line */
+
+import { Box, Container, Grid, type SxProps, type Theme, Typography, useTheme } from '@mui/material';
+import { ArrowRight2, type Icon as IconType } from 'iconsax-react';
+import React, { useCallback, useState } from 'react';
+
+import { logoTransparent } from '../assets/logos';
+
+interface Props {
+  title: string;
+  description?: string;
+  Icon?: IconType;
+  iconWithBackground?: boolean;
+  logoIcon?: boolean;
+  style?: SxProps<Theme>;
+  onClick: () => void;
+}
+
+function ActionCard ({ Icon, description, iconWithBackground, logoIcon, onClick, style, title }: Props): React.ReactElement {
+  const theme = useTheme();
+
+  const [hovered, setHovered] = useState<boolean>(false);
+
+  const toggleHover = useCallback(() => setHovered((isHovered) => !isHovered), []);
+
+  const ActionCardStyle = {
+    bgcolor: '#05091C',
+    border: '4px solid',
+    borderColor: '#1B133C',
+    borderRadius: '14px',
+    columnGap: '10px',
+    cursor: 'pointer',
+    display: 'flex',
+    overflow: 'hidden',
+    p: '10px',
+    position: 'relative',
+    ...style
+  } as SxProps<Theme>;
+
+  const colorBallStyle: React.CSSProperties = {
+    backgroundColor: '#CC429D',
+    borderRadius: '50%',
+    filter: 'blur(28px)', // Glow effect
+    height: '42px',
+    left: '1px',
+    opacity: 1,
+    position: 'absolute',
+    top: '1px',
+    width: '42px'
+  };
+
+  const chevronStyle: React.CSSProperties = {
+    transform: hovered ? 'translateX(5px)' : '',
+    transition: 'all 250ms ease-out'
+  };
+
+  const IconStyle: React.CSSProperties = {
+    background: iconWithBackground ? 'linear-gradient(180deg, rgba(103, 67, 148, 0.5) 0%, rgba(75, 42, 117, 0.5) 50%, rgba(23, 23, 57, 0.5) 100%)' : '',
+    borderRadius: '12px',
+    height: 'fit-content',
+    padding: '5px',
+    transform: hovered ? 'rotate(-12deg)' : 'rotate(12deg)',
+    transition: 'all 250ms ease-out',
+    width: 'fit-content'
+  };
+
+  return (
+    <Container
+      disableGutters
+      onClick={onClick}
+      onMouseEnter={toggleHover}
+      onMouseLeave={toggleHover}
+      sx={ActionCardStyle}
+    >
+      {Icon && <Icon color='#AA83DC' size={30} style={IconStyle} variant='Bulk' />}
+      {logoIcon &&
+        <Box
+          component='img'
+          src={logoTransparent as string}
+          sx={{ ...IconStyle, height: '34px', p: '2px', width: '34px' }}
+        />
+      }
+      <Grid container item>
+        <Grid alignItems='center' container item>
+          <Typography color={hovered ? '#AA83DC' : theme.palette.text.primary} fontFamily='Inter' fontSize='14px' fontWeight={600} sx={{ transition: 'all 250ms ease-out' }}>
+            {title}
+          </Typography>
+          <ArrowRight2 color={hovered ? '#AA83DC' : theme.palette.text.primary} size='12' style={chevronStyle} />
+        </Grid>
+        <Typography color={theme.palette.text.secondary} fontFamily='Inter' fontSize='12px' fontWeight={500}>
+          {description}
+        </Typography>
+      </Grid>
+      <div style={colorBallStyle} />
+    </Container>
+  );
+}
+
+export default ActionCard;

packages/extension-polkagate/src/components/GradientButton.tsx

@@ -73,7 +73,7 @@ export default function GradientButton ({ EndIcon, StartIcon, contentPlacement =
     /* BUTTON BACKGROUND GRADIENT */
     background: 'linear-gradient(262.56deg, #6E00B1 0%, #DC45A0 45%, #6E00B1 100%)',
     borderRadius: `${style?.borderRadius ?? '12px'}`,
-    inset: '2px',
+    inset: disabled ? 0 : '2px',
     position: 'absolute',
     transition: 'all 250ms ease-out'
   } as SxProps<Theme>;

packages/extension-polkagate/src/components/index.ts

@@ -9,6 +9,7 @@ export { default as AccountNamePasswordCreation } from './AccountNamePasswordCre
 export { default as AccountsTable } from './AccountsTable';
 export { default as AccountWithProxyInConfirmation } from './AccountWithProxyInConfirmation';
 export { default as ActionButton } from './ActionButton';
+export { default as ActionCard } from './ActionCard';
 export { default as ActionText } from './ActionText';
 export { default as Address } from './Address';
 export { default as AddressInput } from './AddressInput';

packages/extension-polkagate/src/popup/passwordManagement/Reset.tsx

@@ -3,68 +3,79 @@
 
 /* eslint-disable react/jsx-max-props-per-line */
 
-import { Grid, Typography, useTheme } from '@mui/material';
-import React, { useCallback } from 'react';
+import { Box, Container, Grid, Typography } from '@mui/material';
+import { Check, DocumentText } from 'iconsax-react';
+import React, { useCallback, useContext } from 'react';
 
-import { PButton, VaadinIcon } from '../../components';
+import { Lock } from '../../assets/gif';
+import { ActionCard, ActionContext, BackWithLabel } from '../../components';
+import { setStorage } from '../../components/Loading';
 import { useTranslation } from '../../hooks';
 import { windowOpen } from '../../messaging';
-import HeaderBrand from '../../partials/HeaderBrand';
-import { EXTENSION_NAME } from '../../util/constants';
+import { Version } from '../../partials';
+import Header from './Header';
 
 function Reset (): React.ReactElement {
   const { t } = useTranslation();
-  const theme = useTheme();
+  const onAction = useContext(ActionContext);
 
-  const _goToRestoreFromJson = useCallback((): void => {
+  const goToRestoreFromJson = useCallback((): void => {
     windowOpen('/account/restore-json').catch(console.error);
   }, []);
 
-  const _goToImport = useCallback((): void => {
+  const back = useCallback((): void => {
+    setStorage('loginInfo', { status: 'justSet' })
+      .then(() => onAction('/'))
+      .catch(console.error);
+  }, [onAction]);
+
+  const goToImport = useCallback((): void => {
     windowOpen('/account/import-seed').catch(console.error);
   }, []);
 
   return (
-    <>
-      <HeaderBrand
-        showBrand
-        text={EXTENSION_NAME}
+    <Container disableGutters sx={{ position: 'relative' }}>
+      <Header />
+      <BackWithLabel
+        onClick={back}
+        text={t('Back')}
       />
-      <Typography sx={{ fontSize: '36px', fontWeight: theme.palette.mode === 'dark' ? 300 : 400, p: '25px 0 10px', textAlign: 'center' }}>
-        {t('Reset Wallet')}
-      </Typography>
-      <Typography sx={{ fontSize: '14px', mb: '25px', px: '15px' }}>
-        {t('Resetting your wallet is a last resort option that will erase your current wallet data. Please make sure you have a backup JSON File or a Recovery Phrase before proceeding. To reset your wallet, you can choose one of the following methods:')}
-      </Typography>
-      <Grid container item sx={{ backgroundColor: 'background.paper', border: 1, borderColor: 'secondary.light', borderRadius: '5px', m: '10px', p: '10px', width: '95%' }}>
-        <Typography sx={{ fontSize: '14px' }}>
-          {t('Restore from a previously exported accounts JSON backup file. This file contains the encrypted data of your accounts and can be used to restore them.')}
-        </Typography>
-        <PButton
-          _mt='15px'
-          _onClick={_goToRestoreFromJson}
-          _variant={'contained'}
-          startIcon={
-            <VaadinIcon icon='vaadin:file-text' style={{ height: '18px' }} />
-          }
-          text={t('Restore from JSON File')}
+      <Grid container item justifyContent='center' sx={{ px: '15px' }}>
+        <Box
+          component='img'
+          src={Lock as string}
+          sx={{ height: '55px', mt: '-3px', width: '55px' }}
         />
-      </Grid>
-      <Grid container item sx={{ backgroundColor: 'background.paper', border: 1, borderColor: 'secondary.light', borderRadius: '5px', m: '10px', p: '10px', width: '95%' }}>
-        <Typography sx={{ fontSize: '14px' }}>
-          {t('Import from the secret Recovery Phrase. This phrase is a sequence of 12 words that can be used to generate your account.')}
+        <Typography fontFamily='OdibeeSans' fontSize='29px' fontWeight={400} sx={{ mb: '10px', mt: '10px', width: '100%' }} textAlign='center' textTransform='uppercase'>
+          {t('Reset Wallet')}
         </Typography>
-        <PButton
-          _mt='15px'
-          _onClick={_goToImport}
-          _variant={'contained'}
-          startIcon={
-            <VaadinIcon icon='vaadin:book' style={{ height: '18px' }} />
-          }
-          text={t('Import from Recovery Phrase')}
+        <Typography fontFamily='Inter' fontSize='12px' fontWeight={500} sx={{ color: 'text.secondary', px: '15px', width: '100%' }} textAlign='center'>
+          {t('Resetting your wallet is a last resort option that will erase your current wallet data. Please make sure you have a backup JSON File or a Recovery Phrase before proceeding. To reset your wallet, you can choose one of the following methods:')}
+        </Typography>
+        <ActionCard
+          Icon={DocumentText}
+          description={t('Restore from a previously exported accounts JSON backup file. This file contains the encrypted data of your accounts and can be used to restore them.')}
+          iconWithBackground
+          onClick={goToRestoreFromJson}
+          style={{
+            mt: '12px'
+          }}
+          title={t('Restore from JSON File')}
+        />
+        <ActionCard
+          Icon={Check}
+          description={t('Import from the secret Recovery Phrase. This phrase is sequence of 12 words that can be used to generate your account.')}
+          iconWithBackground
+          onClick={goToImport}
+          style={{
+            height: '122px',
+            mt: '10px'
+          }}
+          title={t('Import from Recovery Phrase')}
         />
       </Grid>
-    </>
+      <Version />
+    </Container>
   );
 }