From 2e9f478c871dd4dcc930acebc671b53ae26456f7 Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Sat, 29 Jan 2022 11:46:02 +0100
Subject: [PATCH] CSS: tweak padding for avatar in message

---
 src/shared/styles/messages.scss       |  7 +++++--
 src/shared/styles/themes/dracula.scss | 10 ++++++----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/shared/styles/messages.scss b/src/shared/styles/messages.scss
index 7671edeb5..3c34c6dfd 100644
--- a/src/shared/styles/messages.scss
+++ b/src/shared/styles/messages.scss
@@ -108,7 +108,11 @@
             display: inline-flex;
             width: 100%;
             flex-direction: row;
-            padding: 0.125rem 1rem;
+            padding: 0 1rem;
+
+            &.chat-msg--with-avatar {
+                padding-top: 0.25rem;
+            }
 
             &.onload {
                 animation: colorchange-chatmessage 1s;
@@ -245,7 +249,6 @@
             .chat-msg__heading {
                 width: 100%;
                 padding-right: 0.25rem;
-                padding-bottom: 0.25rem;
 
                 .badge {
                     margin-left: 0.5em;
diff --git a/src/shared/styles/themes/dracula.scss b/src/shared/styles/themes/dracula.scss
index d26b371f9..875afa091 100644
--- a/src/shared/styles/themes/dracula.scss
+++ b/src/shared/styles/themes/dracula.scss
@@ -22,6 +22,8 @@
 
     // ---
 
+    --gray-color: var(--comment);
+
     --highlight-color: var(--foreground);
     --highlight-color-darker: var(--comment);
 
@@ -123,13 +125,13 @@
     --warning-color-dark: var(--orange);
     --warning-color: var(--orange);
 
-    --list-toggle-color: #818479; // $gray-color
-    --list-toggle-hover-color: #585B51; // $dark-gray-color
+    --list-toggle-color: var(--comment);
+    --list-toggle-hover-color: var(--comment);
     --list-item-hover-color: var(--current-line);
-    --list-item-action-color: #e3eef3; // lighten($lightest-blue, 25%)
+    --list-item-action-color: var(--cyan);
     --list-item-link-color: var(--foreground);
     --list-item-link-hover-color: var(--link-color);
     --list-item-open-color: var(--current-line);
     --list-item-open-hover-color: var(--controlbox-head-color);
-    --list-dot-circle-color: #f6dec1; // lighten($orange, 25%)
+    --list-dot-circle-color: var(--orange);
 }