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 c3c5449802
commit f0178d2494
No known key found for this signature in database
GPG Key ID: 0EB8D75C775AB6F1
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 ( return (
<Base <Base
size={size} size={size}
style={{ css={{
background: identiconRing, background: identiconRing,
padding: identiconRing ? undefined : 0, ...(!identiconRing && { '--identicon-size': '0px' }),
}} }}
> >
<Content style={{ background: color }}> <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: { 16: {
width: 16, width: 16,
height: 16, height: 16,
padding: 1, '--identicon-size': '1px',
padding: 'var(--identicon-size)',
}, },
20: { 20: {
width: 20, width: 20,
height: 20, height: 20,
padding: 1, '--identicon-size': '1px',
padding: 'var(--identicon-size)',
}, },
24: { 24: {
width: 24, width: 24,
height: 24, height: 24,
padding: 1, '--identicon-size': '1px',
padding: 'var(--identicon-size)',
}, },
32: { 32: {
width: 32, width: 32,
height: 32, height: 32,
padding: 2, '--identicon-size': '2px',
padding: 'var(--identicon-size)',
}, },
36: { 36: {
width: 36, width: 36,
height: 36, height: 36,
padding: 2, '--identicon-size': '2px',
padding: 'var(--identicon-size)',
}, },
40: { 40: {
width: 40, width: 40,
height: 40, height: 40,
padding: 2, '--identicon-size': '2px',
padding: 'var(--identicon-size)',
}, },
44: { 44: {
width: 44, width: 44,
height: 44, height: 44,
padding: 2, '--identicon-size': '2px',
padding: 'var(--identicon-size)',
}, },
64: { 64: {
width: 64, width: 64,
height: 64, height: 64,
padding: 3, '--identicon-size': '3px',
padding: 'var(--identicon-size)',
}, },
80: { 80: {
width: 80, width: 80,
height: 80, height: 80,
padding: 4, '--identicon-size': '4px',
padding: 'var(--identicon-size)',
}, },
120: { 120: {
width: 120, width: 120,
height: 120, height: 120,
padding: 5, '--identicon-size': '5px',
padding: 'var(--identicon-size)',
}, },
}, },
}, },
@ -110,6 +120,7 @@ export const Initials = styled('div', {
width: '100%', width: '100%',
height: '100%', height: '100%',
color: '$accent-11', color: '$accent-11',
opacity: 0.7,
textAlign: 'center', textAlign: 'center',
fontWeight: '$600', fontWeight: '$600',
fontSize: 15, fontSize: 15,
@ -117,16 +128,46 @@ export const Initials = styled('div', {
verticalAlign: 'baseline', verticalAlign: 'baseline',
variants: { variants: {
size: { size: {
16: { fontSize: 'calc(16 * 0.5px)', lineHeight: '16px' }, 16: {
20: { fontSize: 'calc(20 * 0.5px)', lineHeight: '20px' }, fontSize: 'calc(16 * 0.4px)',
24: { fontSize: 'calc(24 * 0.5px)', lineHeight: '24px' }, lineHeight: 'calc(16px - var(--identicon-size))',
32: { fontSize: 'calc(32 * 0.5px)', lineHeight: '32px' }, },
36: { fontSize: 'calc(36 * 0.5px)', lineHeight: '36px' }, 20: {
40: { fontSize: 'calc(40 * 0.5px)', lineHeight: '40px' }, fontSize: 'calc(20 * 0.4px)',
44: { fontSize: 'calc(44 * 0.5px)', lineHeight: '44px' }, lineHeight: 'calc(20px - var(--identicon-size))',
64: { fontSize: 'calc(64 * 0.5px)', lineHeight: '64px' }, },
80: { fontSize: 'calc(80 * 0.5px)', lineHeight: '80px' }, 24: {
120: { fontSize: 'calc(120 * 0.5px)', lineHeight: '120px' }, 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))',
},
}, },
}, },
}) })