fix: closeSquare icon color issue

PolkaGate · Dec 30, 2024 · 5d8e9d6 · 5d8e9d6
1 parent c641176
commit 5d8e9d6
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 4 deletions.
diff --git a/packages/extension-polkagate/src/components/ExtensionPopup.tsx b/packages/extension-polkagate/src/components/ExtensionPopup.tsx
@@ -7,9 +7,9 @@ import type { TransitionProps } from '@mui/material/transitions';
 import type { Icon } from 'iconsax-react';
 
 import { Box, Container, Dialog, Grid, Slide, Typography } from '@mui/material';
-import { CloseSquare } from 'iconsax-react';
 import React from 'react';
 
+import CustomCloseSquare from '../popup/welcome/CustomCloseSquare';
 import { RedGradient } from '../style';
 import { GradientDivider } from '.';
 
@@ -50,7 +50,7 @@ function ExtensionPopup ({ TitleIcon, children, handleClose, openMenu, title }:
     >
       <Container disableGutters sx={{ height: '100%', width: '100%' }}>
         <Grid alignItems='center' container item justifyContent='center' sx={{ pb: '12px', pt: '18px' }}>
-          <CloseSquare color='#AA83DC' onClick={handleClose} size='48' style={{ cursor: 'pointer' }} variant='Linear' />
+          <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' columnGap='10px' container item justifyContent='center' p='10px'>

diff --git a/packages/extension-polkagate/src/popup/welcome/AddAccount.tsx b/packages/extension-polkagate/src/popup/welcome/AddAccount.tsx
@@ -6,14 +6,15 @@
 import type { TransitionProps } from '@mui/material/transitions';
 
 import { Box, Container, Dialog, Grid, Slide, Typography } from '@mui/material';
-import { Check, CloseSquare, Convertshape2, Eye, FolderOpen, Key, ScanBarcode } from 'iconsax-react';
+import { Check, Convertshape2, Eye, FolderOpen, Key, ScanBarcode } from 'iconsax-react';
 import React, { useCallback, useContext } from 'react';
 
 import { ActionButton, ActionContext, GradientDivider } from '../../components';
 import { useTranslation } from '../../hooks';
 import { createAccountExternal, windowOpen } from '../../messaging';
 import { GradientBorder, RedGradient } from '../../style';
 import { DEMO_ACCOUNT, POLKADOT_GENESIS_HASH } from '../../util/constants';
+import { CustomCloseSquare } from './CustomCloseSquare';
 import { Popups } from '.';
 
 interface Props {
@@ -87,7 +88,7 @@ function AddAccount ({ openMenu, setPopup }: Props): React.ReactElement {
     >
       <Container disableGutters sx={{ height: '100%', width: '100%' }}>
         <Grid alignItems='center' container item justifyContent='center' sx={{ pb: '12px', pt: '18px' }}>
-          <CloseSquare color='#AA83DC' onClick={handleClose} size='48' style={{ cursor: 'pointer' }} variant='Linear' />
+          <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' }}>
           <GradientBorder />

diff --git a/packages/extension-polkagate/src/popup/welcome/CustomCloseSquare.tsx b/packages/extension-polkagate/src/popup/welcome/CustomCloseSquare.tsx
@@ -0,0 +1,48 @@
+// Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+
+interface CustomCloseSquareProps {
+  onClick?: () => void;
+  style?: React.CSSProperties;
+  className?: string;
+  color?: string;
+  size?: string;
+}
+
+export const CustomCloseSquare: React.FC<CustomCloseSquareProps> = ({ className,
+  color,
+  onClick,
+  size = '48',
+  style }) => (
+  <svg
+    className={className}
+    fill='none'
+    height={size}
+    onClick={onClick}
+    style={style}
+    viewBox='0 0 24 24'
+    width={size}
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    {/* Outer rounded square */}
+    <path
+      d='m9.17 14.83 5.66-5.66M14.83 14.83 9.17 9.17M9 22h6c5 0 7-2 7-7V9c0-5-2-7-7-7H9C4 2 2 4 2 9v6c0 5 2 7 7 7Z'
+      stroke={color}
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      strokeWidth='1.5'
+    />
+    {/* Cross symbol */}
+    <path
+      d='m9.17 14.83 5.66-5.66M14.83 14.83 9.17 9.17'
+      stroke='white'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      strokeWidth='1.5'
+    />
+  </svg>
+);
+
+export default CustomCloseSquare;