fix: overflow X scroll issue

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

@@ -51,7 +51,7 @@ function ExtensionPopup ({ TitleIcon, children, handleClose, openMenu, title }:
         <Grid alignItems='center' container item justifyContent='center' sx={{ pb: '12px', pt: '18px' }}>
           <CustomCloseSquare color='#AA83DC' onClick={handleClose} size='48' style={{ cursor: 'pointer' }}/>
         </Grid>
-        <Grid alignItems='center' container item justifyContent='center' sx={{ bgcolor: '#1B133C', border: '2px solid', borderColor: '#FFFFFF0D', borderTopLeftRadius: '32px', borderTopRightRadius: '32px', display: 'block', height: 'calc(100% - 78px)', overflow: 'scroll', p: '10px', pb: '10px', position: 'relative' }}>
+        <Grid alignItems='center' container item justifyContent='center' sx={{ bgcolor: '#1B133C', border: '2px solid', borderColor: '#FFFFFF0D', borderTopLeftRadius: '32px', borderTopRightRadius: '32px', display: 'block', height: 'calc(100% - 78px)', overflow: 'hidden', overflowY: 'scroll', p: '10px', pb: '10px', position: 'relative', width: '100%' }}>
           <Grid alignItems='center' columnGap='10px' container item justifyContent='center' p='10px'>
             {TitleIcon
               ? <TitleIcon color='#AA83DC' size={28} variant='Bold' />

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

@@ -34,7 +34,7 @@ function GradientBox ({ children, noGradient = false, style }: Props) {
 
   return (
     <Container disableGutters sx={ContainerStyle}>
-      <GradientBorder style={{ top: '-2px'}} />
+      <GradientBorder style={{ top: '-2px' }} />
       <ContentWrapper>
         {!noGradient && <RedGradient style={{ top: '-100px' }} />}
         <Box position='relative' zIndex={1}>

packages/extension-polkagate/src/components/NeonButton.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 type { Icon } from 'iconsax-react';
+
+import { Button, useTheme } from '@mui/material';
+import React, { useCallback, useMemo, useState } from 'react';
+
+interface Props {
+  disabled?: boolean;
+  isBusy?: boolean;
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
+  StartIcon?: Icon;
+  EndIcon?: Icon;
+  contentPlacement?: 'start' | 'center' | 'end';
+  text: string | { firstPart?: string; secondPart?: string; };
+  variant?: 'text' | 'contained' | 'outlined';
+  style?: React.CSSProperties;
+}
+
+export default function NeonButton ({ EndIcon, StartIcon, contentPlacement = 'start', disabled, isBusy, onClick, style, text, variant }: Props): React.ReactElement<Props> {
+  const theme = useTheme();
+
+  const [hovered, setHovered] = useState(false);
+
+  const toggleHover = useCallback(() => setHovered((isHovered) => !isHovered), []);
+
+  const ButtonFontStyle = useMemo(() => ({
+    color: hovered ? '#FF4FB9' : '#BEAAD8',
+    fontFamily: 'Inter',
+    fontSize: '14px',
+    fontWeight: 600,
+    justifyContent: { center: 'center', end: 'flex-end', start: 'flex-start' }[contentPlacement],
+    textTransform: 'none'
+  } as React.CSSProperties), [contentPlacement, hovered]);
+
+  const GeneralButtonStyle = {
+    background: 'transparent',
+    border: '1px solid',
+    borderColor: hovered ? '#FF4FB9' : '#2D1E4A',
+    borderRadius: `${style?.borderRadius ?? '12px'}`,
+    boxShadow: 'unset',
+    padding: '6px 24px',
+    transition: 'all 250ms ease-out',
+    ...ButtonFontStyle
+  };
+
+  const StartIconStyle = {
+    '& .MuiButton-startIcon': {
+      marginLeft: 0,
+      marginRight: '10px'
+    },
+    '& .MuiButton-startIcon svg': {
+      color: hovered ? '#FF4FB9' : '#BEAAD8',
+      transition: 'all 250ms ease-out'
+    }
+  };
+
+  const EndIconStyle = {
+    '& .MuiButton-endIcon': {
+      marginLeft: '5px',
+      marginRight: 0
+    },
+    '& .MuiButton-endIcon svg': {
+      color: hovered ? '#FF4FB9' : '#BEAAD8',
+      transition: 'all 250ms ease-out'
+    }
+  };
+
+  const renderText = useMemo(() => {
+    if (typeof text === 'string') {
+      return <span style={{ color: theme.palette.text.primary, ...ButtonFontStyle }}>{text}</span>;
+    } else {
+      return (
+        <>
+          <span style={{ color: theme.palette.text.secondary, ...ButtonFontStyle }}>{text.firstPart}</span>&nbsp;<span style={{ color: theme.palette.text.primary, ...ButtonFontStyle }}>{text.secondPart}</span>
+        </>
+      );
+    }
+  }, [ButtonFontStyle, text, theme.palette.text.primary, theme.palette.text.secondary]);
+
+  return (
+    <Button
+      disabled={disabled || isBusy}
+      endIcon={EndIcon
+        ? <EndIcon size={20} variant={hovered ? 'Bold' : 'Bulk'} />
+        : undefined}
+      onClick={onClick}
+      onMouseEnter={toggleHover}
+      onMouseLeave={toggleHover}
+      startIcon={StartIcon
+        ? <StartIcon size={20} variant={hovered ? 'Bold' : 'Bulk'} />
+        : undefined}
+      sx={{ ...GeneralButtonStyle, ...StartIconStyle, ...EndIconStyle, ...style }}
+      variant={variant}
+    >
+      {renderText}
+    </Button>
+  );
+}

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

@@ -62,6 +62,7 @@ export { default as Main } from './Main';
 export { default as MenuItem } from './MenuItem';
 export { default as MnemonicSeed } from './MnemonicSeed';
 export { default as Motion } from './Motion';
+export { default as NeonButton } from './NeonButton';
 export { default as NewAddress } from './NewAddress';
 export { default as OnActionToolTip } from './OnActionToolTip';
 export { default as OptionalCopyButton } from './OptionalCopyButton';

packages/extension-polkagate/src/partials/Version.tsx

@@ -0,0 +1,21 @@
+// Copyright 2019-2025 @polkadot/extension-polkagate authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+/* eslint-disable react/jsx-max-props-per-line */
+
+import { Grid, Typography } from '@mui/material';
+import React from 'react';
+
+import { useManifest } from '../hooks';
+
+export default function Version (): React.ReactElement {
+  const version = useManifest()?.version;
+
+  return (
+    <Grid alignItems='center' container item justifyContent='center'>
+      <Typography color='#674394' fontFamily='Inter' fontSize='13px' fontWeight={500} lineHeight='18.2px' pt='8px' textAlign='center'>
+        {'v.'}{version}
+      </Typography>
+    </Grid>
+  );
+}

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

@@ -13,5 +13,6 @@ export { default as Passwords } from './Passwords';
 export { default as RemoteNodeSelectorWithSignals } from './RemoteNodeSelectorWithSignals';
 export { default as SubTitle } from './SubTitle';
 export { default as ThroughProxy } from './ThroughProxy';
+export { default as Version } from './Version';
 export { default as WaitScreen } from './WaitScreen';
 export { default as WelcomeHeader } from './WelcomeHeader';

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

@@ -3,14 +3,18 @@
 
 /* eslint-disable react/jsx-max-props-per-line */
 
-import { Grid, Typography } from '@mui/material';
+import { Box, Container, Grid, Typography } from '@mui/material';
 import React, { useCallback } from 'react';
 
-import { PButton } from '../../components';
+import { Box as BoxIcon } from '../../assets/icons';
+import { ActionButton, GradientBox, GradientButton, NeonButton } from '../../components';
 import { setStorage } from '../../components/Loading';
 import { useExtensionLockContext } from '../../context/ExtensionLockContext';
 import { useTranslation } from '../../hooks';
+import { Version } from '../../partials';
+import { RedGradient } from '../../style';
 import { STEPS } from './constants';
+import Header from './Header';
 
 interface Props {
   setStep: (value: React.SetStateAction<number | undefined>) => void;
@@ -36,31 +40,55 @@ function AskToSetPassword ({ setStep }: Props): React.ReactElement {
   }, [setStep]);
 
   return (
-    <Grid alignItems='center' container direction='column' justifyContent='center'>
-      <Typography fontSize={16} pb='25px'>
-        {t('Would you like to set a login password?')}
-      </Typography>
-      <PButton
-        _ml={0}
-        _mt='10px'
-        _onClick={onYesToSetPassword}
-        text={t('Yes')}
-      />
-      <PButton
-        _ml={0}
-        _mt='10px'
-        _onClick={onMayBeLater}
-        _variant='outlined'
-        text={t('Later')}
-      />
-      <PButton
-        _ml={0}
-        _mt='10px'
-        _onClick={onNoPassword}
-        _variant='text'
-        text={t('No')}
-      />
-    </Grid>
+    <Container disableGutters sx={{ position: 'relative' }}>
+      <Header />
+      <GradientBox noGradient style={{ m: 'auto', mt: '8px', width: '359px' }}>
+        <RedGradient style={{ right: '-8%', top: '20px' }} />
+        <Grid container item justifyContent='center' sx={{ p: '18px 32px 32px' }}>
+          <Box
+            component='img'
+            src={BoxIcon as string}
+            sx={{ height: '145px', mt: '20px', width: '140px' }}
+          />
+          <Typography fontFamily='OdibeeSans' fontSize='29px' fontWeight={400} sx={{ mb: '6px', mt: '25px', width: '100%' }} textAlign='center' textTransform='uppercase'>
+            {t('welcome')}!
+          </Typography>
+          <Typography fontFamily='Inter' fontSize='13px' fontWeight={500} sx={{ color: 'text.secondary', width: '100%' }} textAlign='center'>
+            {t('Would you like to set a login password?')}
+          </Typography>
+          <GradientButton
+            onClick={onYesToSetPassword}
+            style={{
+              height: '48px',
+              marginTop: '24px',
+              width: '325px'
+            }}
+            text={t('Yes')}
+          />
+          <ActionButton
+            contentPlacement='center'
+            onClick={onMayBeLater}
+            style={{
+              height: '46px',
+              marginTop: '15px',
+              width: '325px'
+            }}
+            text={{ firstPart: t('Later') }}
+          />
+          <NeonButton
+            contentPlacement='center'
+            onClick={onNoPassword}
+            style={{
+              height: '44px',
+              marginTop: '15px',
+              width: '325px'
+            }}
+            text={t('No')}
+          />
+        </Grid>
+      </GradientBox>
+      <Version />
+    </Container>
   );
 }
 

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

@@ -14,7 +14,8 @@ import { ActionButton, GradientBox, GradientButton, PasswordInput } from '../../
 import { updateStorage } from '../../components/Loading';
 import { useExtensionLockContext } from '../../context/ExtensionLockContext';
 import { openOrFocusTab } from '../../fullscreen/accountDetails/components/CommonTasks';
-import { useIsExtensionPopup, useManifest, useTranslation } from '../../hooks';
+import { useIsExtensionPopup, useTranslation } from '../../hooks';
+import { Version } from '../../partials';
 import { RedGradient } from '../../style';
 import { STEPS } from './constants';
 import Header from './Header';
@@ -26,7 +27,6 @@ interface Props {
 
 function Login ({ setStep }: Props): React.ReactElement {
   const { t } = useTranslation();
-  const version = useManifest()?.version;
   const isPopup = useIsExtensionPopup();
   // const { isHideNumbers, toggleHideNumbers } = useIsHideNumbers();
   const { setExtensionLock } = useExtensionLockContext();
@@ -69,53 +69,49 @@ function Login ({ setStep }: Props): React.ReactElement {
   }, [isPopup, setStep]);
 
   return (
-    <>
-      <Container disableGutters sx={{ position: 'relative' }}>
-        <Header />
-        <GradientBox noGradient style={{ m: 'auto', mt: '8px', width: '359px' }}>
-          <RedGradient style={{ right: '-8%', top: '20px' }} />
-          <Grid container item justifyContent='center' sx={{ p: '18px 32px 32px' }}>
-            <Box
-              component='img'
-              src={BoxIcon as string}
-              sx={{ height: '145px', mt: '20px', width: '140px' }}
-            />
-            <Typography fontFamily='OdibeeSans' fontSize='29px' fontWeight={400} sx={{ mb: '15px', mt: '25px', width: '100%' }} textAlign='center' textTransform='uppercase'>
-              {t('login')}
-            </Typography>
-            <PasswordInput
-              onEnterPress={onUnlock}
-              onPassChange={onPassChange}
-              title={t('Please enter your password to proceed')}
-            />
-            <GradientButton
-              contentPlacement='center'
-              disabled={!hashedPassword}
-              onClick={onUnlock}
-              style={{
-                height: '44px',
-                marginTop: '24px',
-                width: '325px'
-              }}
-              text={t('Unlock')}
-            />
-            <ActionButton
-              contentPlacement='center'
-              onClick={onForgotPassword}
-              style={{
-                height: '44px',
-                marginTop: '18px',
-                width: '325px'
-              }}
-              text={{ firstPart: t('Forgot password') }}
-            />
-          </Grid>
-        </GradientBox>
-        <Typography color='#674394' fontFamily='Inter' fontSize='13px' fontWeight={500} lineHeight='18.2px' pt='8px' textAlign='center'>
-          {'v.'}{version}
-        </Typography>
-      </Container>
-    </>
+    <Container disableGutters sx={{ position: 'relative' }}>
+      <Header />
+      <GradientBox noGradient style={{ m: 'auto', mt: '8px', width: '359px' }}>
+        <RedGradient style={{ right: '-8%', top: '20px' }} />
+        <Grid container item justifyContent='center' sx={{ p: '18px 32px 32px' }}>
+          <Box
+            component='img'
+            src={BoxIcon as string}
+            sx={{ height: '145px', mt: '20px', width: '140px' }}
+          />
+          <Typography fontFamily='OdibeeSans' fontSize='29px' fontWeight={400} sx={{ mb: '15px', mt: '25px', width: '100%' }} textAlign='center' textTransform='uppercase'>
+            {t('login')}
+          </Typography>
+          <PasswordInput
+            onEnterPress={onUnlock}
+            onPassChange={onPassChange}
+            title={t('Please enter your password to proceed')}
+          />
+          <GradientButton
+            contentPlacement='center'
+            disabled={!hashedPassword}
+            onClick={onUnlock}
+            style={{
+              height: '44px',
+              marginTop: '24px',
+              width: '325px'
+            }}
+            text={t('Unlock')}
+          />
+          <ActionButton
+            contentPlacement='center'
+            onClick={onForgotPassword}
+            style={{
+              height: '44px',
+              marginTop: '18px',
+              width: '325px'
+            }}
+            text={{ firstPart: t('Forgot password') }}
+          />
+        </Grid>
+      </GradientBox>
+      <Version />
+    </Container>
   );
 }
 

packages/extension-polkagate/src/popup/welcome/AddAccount.tsx

@@ -90,7 +90,7 @@ function AddAccount ({ openMenu, setPopup }: Props): React.ReactElement {
         <Grid alignItems='center' container item justifyContent='center' sx={{ pb: '12px', pt: '18px' }}>
           <CustomCloseSquare color='#AA83DC' onClick={handleClose} size='48' style={{ cursor: 'pointer' }} />
         </Grid>
-        <Grid alignItems='center' container item justifyContent='center' sx={{ bgcolor: '#120D27', border: '2px solid', borderColor: '#FFFFFF0D', borderTopLeftRadius: '32px', borderTopRightRadius: '32px', display: 'block', height: 'calc(100% - 78px)', overflow: 'scroll', p: '10px', position: 'relative' }}>
+        <Grid alignItems='center' container item justifyContent='center' sx={{ bgcolor: '#120D27', border: '2px solid', borderColor: '#FFFFFF0D', borderTopLeftRadius: '32px', borderTopRightRadius: '32px', display: 'block', height: 'calc(100% - 78px)', overflow: 'hidden', overflowY: 'scroll', p: '10px', position: 'relative' }}>
           <GradientBorder />
           <Grid alignItems='center' columnGap='10px' container item justifyContent='center' p='10px'>
             <Typography color='#fff' fontFamily='OdibeeSans' fontSize='29px' fontWeight={400} textTransform='uppercase'>