Skip to content

Commit 70be635

Browse files
colex2colex2
committed
style: redesign wallet list
1 parent 1049799 commit 70be635

5 files changed

Lines changed: 60 additions & 56 deletions

File tree

‎src/components/AuthModal/WalletList/index.tsx‎

Lines changed: 9 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,10 @@ import config from 'config';
44
import React from 'react';
55
import { useTranslation } from 'translation';
66

7+
import { ReactComponent as LogoDesktop } from 'assets/img/xcnLogoWithText.svg';
78
import { Connector } from 'clients/web3';
89

9-
import {
10-
// INTEGRATED_WALLETS,
11-
UPCOMING_WALLETS,
12-
WALLETS,
13-
XCN_TERMS_OF_SERVICE_URL,
14-
} from '../constants';
10+
import { UPCOMING_WALLETS, WALLETS, XCN_TERMS_OF_SERVICE_URL } from '../constants';
1511
import { useStyles } from './styles';
1612

1713
export interface WalletListProps {
@@ -24,6 +20,12 @@ export const WalletList: React.FC<WalletListProps> = ({ onLogin }) => {
2420

2521
return (
2622
<div css={styles.container}>
23+
{/* Logo section */}
24+
<div css={styles.logoContainer}>
25+
<LogoDesktop css={styles.logo} />
26+
</div>
27+
28+
{/* Wallet grid */}
2729
<div css={styles.walletList}>
2830
{WALLETS.filter(({ mainnetOnly }) => !mainnetOnly || !config.isOnTestnet).map(
2931
({ name, connector, Logo }) => (
@@ -34,46 +36,16 @@ export const WalletList: React.FC<WalletListProps> = ({ onLogin }) => {
3436
onClick={() => onLogin(connector)}
3537
>
3638
<Logo css={styles.walletLogo} />
37-
38-
<Typography variant="tiny" component="div">
39+
<Typography variant="small1" component="div">
3940
{name}
4041
</Typography>
41-
42-
<Typography variant="tiny" component="div">
43-
<svg
44-
width="10"
45-
height="16"
46-
viewBox="0 0 10 16"
47-
fill="none"
48-
xmlns="http://www.w3.org/2000/svg"
49-
>
50-
<path d="M6.13274 8L0.196818 2.15601C-0.0678416 1.89559 -0.0651412 1.4789 0.202218 1.21848L1.26355 0.194996C1.53632 -0.0654317 1.97381 -0.0654317 2.24387 0.1976L9.79746 7.52863C9.93249 7.65884 10 7.82812 10 8C10 8.17188 9.93249 8.34116 9.79746 8.47137L2.24387 15.8024C1.97381 16.0654 1.53632 16.0654 1.26356 15.805L0.202219 14.7815C-0.0651406 14.5211 -0.0678411 14.1044 0.196818 13.844L6.13274 8Z" />
51-
</svg>
52-
</Typography>
5342
</button>
5443
),
5544
)}
5645

57-
{/* {INTEGRATED_WALLETS.map(({ name, Logo, linkUrl }) => (
58-
<a
59-
css={styles.getListItem({ isActionable: true })}
60-
key={`wallet-${name}`}
61-
href={linkUrl}
62-
target="_blank"
63-
rel="noreferrer"
64-
>
65-
<Logo css={styles.walletLogo} />
66-
67-
<Typography variant="tiny" component="div">
68-
{name}
69-
</Typography>
70-
</a>
71-
))} */}
72-
7346
{UPCOMING_WALLETS.map(({ name, Logo }) => (
7447
<div css={styles.getListItem({ isActionable: false })} key={`upcoming-wallet-${name}`}>
7548
<Logo css={styles.walletLogo} />
76-
7749
<Typography variant="tiny" css={styles.comingSoonText} component="div">
7850
{t('authModal.walletList.comingSoon')}
7951
</Typography>

‎src/components/AuthModal/WalletList/styles.ts‎

Lines changed: 42 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export const useStyles = () => {
77
return {
88
theme,
99
container: css`
10-
margin: ${theme.spacing(0, 10)};
10+
margin: ${theme.spacing(0, 8)};
1111
1212
${theme.breakpoints.down('md')} {
1313
margin: ${theme.spacing(-2, 4, 0)};
@@ -23,50 +23,79 @@ export const useStyles = () => {
2323
${theme.breakpoints.down('md')} {
2424
grid-template-columns: 1fr 1fr;
2525
row-gap: ${theme.spacing(2)};
26-
column-gap: ${theme.spacing(0)};
26+
column-gap: ${theme.spacing(3)};
2727
margin: ${theme.spacing(4)};
2828
}
2929
`,
30+
logoContainer: css`
31+
display: flex;
32+
justify-content: center;
33+
align-items: center;
34+
margin-bottom: ${theme.spacing(3)};
35+
width: 100%;
36+
max-width: 100%;
37+
overflow: hidden;
38+
`,
39+
3040
getListItem: ({ isActionable }: { isActionable: boolean }) => css`
3141
box-shadow: none;
32-
border: 0;
33-
border-radius: ${theme.shape.borderRadius.small}px;
34-
padding: ${theme.spacing(2)};
42+
border: 1px solid rgba(255, 255, 255, 0.3);
43+
border-radius: 16px;
44+
padding: ${theme.spacing(1)};
3545
text-align: center;
36-
width: 200px;
37-
height: 135px;
38-
background-color: #eeeff0;
39-
color: #343a41;
46+
width: 100%;
47+
height: 125px;
48+
background-color: rgba(255, 255, 255, 0.1);
49+
color: white;
4050
svg {
4151
margin-top: 5px;
42-
fill: #343a41;
52+
fill: white;
4353
}
4454
margin: 0 auto;
4555
4656
${theme.breakpoints.down('md')} {
47-
width: 150px;
57+
width: 100%;
4858
height: 125px;
4959
}
5060
5161
${theme.breakpoints.down('sm')} {
52-
width: 125px;
62+
width: 100%;
5363
height: 120px;
5464
}
5565
5666
${isActionable &&
5767
css`
5868
cursor: pointer;
69+
transition: all 0.3s ease;
5970
6071
:hover {
61-
background: linear-gradient(123.08deg, rgba(29, 185, 166, 0.2) -33.26%, #1db9a6 88.39%);
72+
background: linear-gradient(
73+
123.08deg,
74+
rgba(29, 185, 166, 0.1) -33.26%,
75+
rgba(29, 185, 166, 0.3) 88.39%
76+
);
6277
color: white;
78+
transform: translateY(-2px);
6379
6480
svg {
6581
fill: white;
6682
}
6783
}
6884
`}
6985
`,
86+
logo: css`
87+
display: block;
88+
height: 33px;
89+
margin: ${theme.spacing(0, 'auto', 4)};
90+
`,
91+
logoClosed: css`
92+
display: none;
93+
margin: ${theme.spacing(0, 'auto', 4)};
94+
${theme.breakpoints.down('lg')} {
95+
display: block;
96+
height: 36px;
97+
}
98+
`,
7099
walletLogo: css`
71100
width: ${theme.spacing(12)};
72101
height: ${theme.spacing(12)};

‎src/components/AuthModal/index.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,8 @@ export const AuthModal: React.FC<AuthModalProps> = ({
3030
isOpen={isOpen}
3131
handleClose={onClose}
3232
noHorizontalPadding={!account}
33-
title={
34-
// <h4>{!account ? t('authModal.title.connectWallet') : t('authModal.title.yourWallet')}</h4>
35-
<h4>{!account ? '' : t('authModal.title.yourWallet')}</h4>
36-
}
33+
narrow={!account}
34+
title={account ? <h4>{t('authModal.title.yourWallet')}</h4> : undefined}
3735
>
3836
{!account ? (
3937
<WalletList onLogin={onLogin} />

‎src/components/Modal/index.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export interface ModalProps extends Omit<MUIModalProps, 'title' | 'open'> {
1515
title?: string | ReactElement | ReactElement[];
1616
noHorizontalPadding?: boolean;
1717
showCloseButton?: boolean;
18+
narrow?: boolean;
1819
}
1920

2021
export const Modal: React.FC<ModalProps> = ({
@@ -26,11 +27,13 @@ export const Modal: React.FC<ModalProps> = ({
2627
title,
2728
noHorizontalPadding,
2829
showCloseButton = true,
30+
narrow,
2931
...otherModalProps
3032
}) => {
3133
const s = useModalStyles({
3234
hasTitleComponent: Boolean(title),
3335
noHorizontalPadding,
36+
narrow,
3437
});
3538
return (
3639
<MUIModal

‎src/components/Modal/styles.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,11 @@ import { ThemeContext } from 'context/ThemeContext';
77
export const useModalStyles = ({
88
hasTitleComponent,
99
noHorizontalPadding,
10+
narrow,
1011
}: {
1112
hasTitleComponent: boolean;
1213
noHorizontalPadding?: boolean;
14+
narrow?: boolean;
1315
}) => {
1416
const theme = useTheme();
1517
const { mode: themeMode } = React.useContext(ThemeContext);
@@ -39,7 +41,7 @@ export const useModalStyles = ({
3941
transform: translate(-50%, -50%);
4042
}
4143
width: calc(100% - ${theme.spacing(8)});
42-
max-width: ${theme.spacing(136)};
44+
max-width: ${narrow ? theme.spacing(100) : theme.spacing(136)};
4345
border-radius: ${theme.spacing(6)};
4446
overflow: auto;
4547
max-height: calc(100% - ${theme.spacing(8)});
@@ -83,7 +85,7 @@ export const useModalStyles = ({
8385
padding-right: ${theme.shape.iconSize.xLarge}px;
8486
font-size: ${theme.typography.h4.fontSize};
8587
font-weight: ${theme.typography.h4.fontWeight};
86-
margin-top: 25px;
88+
margin-top: ${hasTitleComponent ? '25px' : '0'};
8789
`,
8890
closeIcon: css`
8991
right: ${theme.spacing(6)};

0 commit comments

Comments
 (0)