From f01943c681f7deac0c94f8f588c2fe97f6e5c970 Mon Sep 17 00:00:00 2001
From: trashtemp <96388163+trashtemp@users.noreply.github.com>
Date: Fri, 14 Jan 2022 20:53:09 +0100
Subject: [PATCH] fix(typindicator): some design tweaks

---
 .../common/messaging/bars/TypingIndicator.tsx        | 12 ++++++++----
 src/pages/channels/messaging/MessageArea.tsx         |  2 +-
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/common/messaging/bars/TypingIndicator.tsx b/src/components/common/messaging/bars/TypingIndicator.tsx
index c5641daa..e704a7ee 100644
--- a/src/components/common/messaging/bars/TypingIndicator.tsx
+++ b/src/components/common/messaging/bars/TypingIndicator.tsx
@@ -13,10 +13,10 @@ const Base = styled.div`
     position: relative;
 
     > div {
-        height: 24px;
-        margin-top: -24px;
+        height: 26px;
+        top: -26px;
         position: absolute;
-
+        font-size: 13px;
         gap: 8px;
         display: flex;
         padding: 0 10px;
@@ -40,9 +40,12 @@ const Base = styled.div`
             height: 16px;
             object-fit: cover;
             border-radius: var(--border-radius-half);
+            background: var(--secondary-background);
+            //background-clip: border-box;
+            border: 2px solid var(--secondary-background);
 
             &:not(:first-child) {
-                margin-left: -4px;
+                margin-left: -6px;
             }
         }
     }
@@ -53,6 +56,7 @@ const Base = styled.div`
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
+        //font-weight: 600;
     }
 `;
 
diff --git a/src/pages/channels/messaging/MessageArea.tsx b/src/pages/channels/messaging/MessageArea.tsx
index 74bd8930..ff892ce0 100644
--- a/src/pages/channels/messaging/MessageArea.tsx
+++ b/src/pages/channels/messaging/MessageArea.tsx
@@ -49,7 +49,7 @@ const Area = styled.div.attrs({ "data-scroll-offset": "with-padding" })`
     > div {
         display: flex;
         min-height: 100%;
-        padding-bottom: 24px;
+        padding-bottom: 26px;
         flex-direction: column;
         justify-content: flex-end;
     }