From b32fa3a77a96c5af59a63fe74d4a6e8d7afe9b96 Mon Sep 17 00:00:00 2001
From: Pavel Prichodko <14926950+prichodko@users.noreply.github.com>
Date: Sun, 9 Oct 2022 18:18:43 -0500
Subject: [PATCH] improve initials centering

---
 .../status-react/src/system/avatar/styles.tsx | 25 +++++++------------
 1 file changed, 9 insertions(+), 16 deletions(-)

diff --git a/packages/status-react/src/system/avatar/styles.tsx b/packages/status-react/src/system/avatar/styles.tsx
index 533e6730..785f2c31 100644
--- a/packages/status-react/src/system/avatar/styles.tsx
+++ b/packages/status-react/src/system/avatar/styles.tsx
@@ -80,6 +80,9 @@ export const Content = styled('div', {
   borderRadius: '100%',
   width: '100%',
   height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
 })
 
 export const Indicator = styled('span', {
@@ -117,56 +120,46 @@ export const Indicator = styled('span', {
 })
 
 export const Initials = styled('div', {
-  width: '100%',
-  height: '100%',
   color: '$accent-11',
   opacity: 0.7,
   textAlign: 'center',
   fontWeight: '$600',
   fontSize: 15,
   textTransform: 'uppercase',
-  verticalAlign: 'baseline',
+  verticalAlign: 'middle',
+  display: 'inline-block',
+
   variants: {
     size: {
       16: {
-        fontSize: 'calc(16 * 0.4px)',
-        lineHeight: 'calc(16px - var(--identicon-size))',
+        fontSize: 'calc(16 * 0.5px)',
       },
       20: {
-        fontSize: 'calc(20 * 0.4px)',
-        lineHeight: 'calc(20px - var(--identicon-size))',
+        fontSize: 'calc(20 * 0.5px)',
       },
       24: {
-        fontSize: 'calc(24 * 0.4px)',
-        lineHeight: 'calc(24px - var(--identicon-size))',
+        fontSize: 'calc(24 * 0.5px)',
       },
       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))',
       },
     },
   },