status-im
/
dappconnect-sdks
mirror of https://github.com/status-im/dappconnect-sdks.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix avatar sizes

This commit is contained in:
Pavel Prichodko 2022-10-09 17:48:12 -05:00
parent e1b300ed2d
commit bbe3463d94
No known key found for this signature in database
GPG Key ID: 8E4C82D464215E83
2 changed files with 63 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/status-react/src/system/avatar/avatar.tsx
View File

@ -39,9 +39,9 @@ const Avatar = (props: Props) => {
return (
<Base
size={size}
style={{
css={{
background: identiconRing,
padding: identiconRing ? undefined : 0,
...(!identiconRing && { '--identicon-size': '0px' }),
}}
>
<Content style={{ background: color }}>

81
packages/status-react/src/system/avatar/styles.tsx
View File

@ -14,52 +14,62 @@ export const Base = styled('div', {
16: {
width: 16,
height: 16,
padding: 1,
'--identicon-size': '1px',
padding: 'var(--identicon-size)',
},
20: {
width: 20,
height: 20,
padding: 1,
'--identicon-size': '1px',
padding: 'var(--identicon-size)',
},
24: {
width: 24,
height: 24,
padding: 1,
'--identicon-size': '1px',
padding: 'var(--identicon-size)',
},
32: {
width: 32,
height: 32,
padding: 2,
'--identicon-size': '2px',
padding: 'var(--identicon-size)',
},
36: {
width: 36,
height: 36,
padding: 2,
'--identicon-size': '2px',
padding: 'var(--identicon-size)',
},
40: {
width: 40,
height: 40,
padding: 2,
'--identicon-size': '2px',
padding: 'var(--identicon-size)',
},
44: {
width: 44,
height: 44,
padding: 2,
'--identicon-size': '2px',
padding: 'var(--identicon-size)',
},
64: {
width: 64,
height: 64,
padding: 3,
'--identicon-size': '3px',
padding: 'var(--identicon-size)',
},
80: {
width: 80,
height: 80,
padding: 4,
'--identicon-size': '4px',
padding: 'var(--identicon-size)',
},
120: {
width: 120,
height: 120,
padding: 5,
'--identicon-size': '5px',
padding: 'var(--identicon-size)',
},
},
},
@ -110,6 +120,7 @@ export const Initials = styled('div', {
width: '100%',
height: '100%',
color: '$accent-11',
opacity: 0.7,
textAlign: 'center',
fontWeight: '$600',
fontSize: 15,
@ -117,16 +128,46 @@ export const Initials = styled('div', {
verticalAlign: 'baseline',
variants: {
size: {
16: { fontSize: 'calc(16 * 0.5px)', lineHeight: '16px' },
20: { fontSize: 'calc(20 * 0.5px)', lineHeight: '20px' },
24: { fontSize: 'calc(24 * 0.5px)', lineHeight: '24px' },
32: { fontSize: 'calc(32 * 0.5px)', lineHeight: '32px' },
36: { fontSize: 'calc(36 * 0.5px)', lineHeight: '36px' },
40: { fontSize: 'calc(40 * 0.5px)', lineHeight: '40px' },
44: { fontSize: 'calc(44 * 0.5px)', lineHeight: '44px' },
64: { fontSize: 'calc(64 * 0.5px)', lineHeight: '64px' },
80: { fontSize: 'calc(80 * 0.5px)', lineHeight: '80px' },
120: { fontSize: 'calc(120 * 0.5px)', lineHeight: '120px' },
16: {
fontSize: 'calc(16 * 0.4px)',
lineHeight: 'calc(16px - var(--identicon-size))',
},
20: {
fontSize: 'calc(20 * 0.4px)',
lineHeight: 'calc(20px - var(--identicon-size))',
},
24: {
fontSize: 'calc(24 * 0.4px)',
lineHeight: 'calc(24px - var(--identicon-size))',
},
32: {
fontSize: 'calc(32 * 0.4px)',
lineHeight: 'calc(32px - var(--identicon-size))',
},
36: {
fontSize: 'calc(36 * 0.4px)',
lineHeight: 'calc(36px - var(--identicon-size))',
},
40: {
fontSize: 'calc(40 * 0.4px)',
lineHeight: 'calc(40px - var(--identicon-size))',
},
44: {
fontSize: 'calc(44 * 0.4px)',
lineHeight: 'calc(44px - var(--identicon-size))',
},
64: {
fontSize: 'calc(64 * 0.4px)',
lineHeight: 'calc(64px - var(--identicon-size))',
},
80: {
fontSize: 'calc(80 * 0.4px)',
lineHeight: 'calc(80px - var(--identicon-size))',
},
120: {
fontSize: 'calc(120 * 0.4px)',
lineHeight: 'calc(120px - var(--identicon-size))',
},
},
},
})