From bbe3463d949e1341969d74157f0ef82da736d928 Mon Sep 17 00:00:00 2001
From: Pavel Prichodko <14926950+prichodko@users.noreply.github.com>
Date: Sun, 9 Oct 2022 17:48:12 -0500
Subject: [PATCH] fix avatar sizes

---
 .../status-react/src/system/avatar/avatar.tsx |  4 +-
 .../status-react/src/system/avatar/styles.tsx | 81 ++++++++++++++-----
 2 files changed, 63 insertions(+), 22 deletions(-)

diff --git a/packages/status-react/src/system/avatar/avatar.tsx b/packages/status-react/src/system/avatar/avatar.tsx
index 8da40b0..79a5f2d 100644
--- a/packages/status-react/src/system/avatar/avatar.tsx
+++ b/packages/status-react/src/system/avatar/avatar.tsx
@@ -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 }}>
diff --git a/packages/status-react/src/system/avatar/styles.tsx b/packages/status-react/src/system/avatar/styles.tsx
index 2c0021e..533e673 100644
--- a/packages/status-react/src/system/avatar/styles.tsx
+++ b/packages/status-react/src/system/avatar/styles.tsx
@@ -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))',
+      },
     },
   },
 })