From c421dc0b2894ed2cae407b1727fff92603a7e90b Mon Sep 17 00:00:00 2001
From: Jarek Radosz <jradosz@gmail.com>
Date: Mon, 24 Oct 2022 19:37:01 +0200
Subject: [PATCH] UX: Improve autocomplete styling (#18723)

1. Restore the original text color (`--primary-high`)
2. Fix the double bottom border
3. Make the padding around icons even
---
 .../stylesheets/common/base/compose.scss      | 45 ++++++++++++-------
 1 file changed, 28 insertions(+), 17 deletions(-)

diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss
index ab8adc21af3..584fc1a3746 100644
--- a/app/assets/stylesheets/common/base/compose.scss
+++ b/app/assets/stylesheets/common/base/compose.scss
@@ -393,44 +393,55 @@ html.composer-open {
   width: 240px;
   background-color: var(--secondary);
   border: 1px solid var(--primary-low);
+
   ul {
     list-style: none;
     padding: 0;
     margin: 0;
 
     li {
-      .d-icon-users {
-        color: var(--primary-medium);
-        padding: 0 2px;
+      &:not(:last-child) {
+        border-bottom: 1px solid var(--primary-low);
       }
 
-      border-bottom: 1px solid var(--primary-low);
-
       a {
-        padding: 5px;
-        display: block;
         @include ellipsis;
+        color: var(--primary-high);
+        display: flex;
+        padding: 5px;
 
-        span.username {
-          color: var(--primary);
-        }
-        span.name {
-          font-size: var(--font-down-1);
-          vertical-align: middle;
-        }
-        &.selected {
-          background-color: var(--tertiary-low);
-        }
         @include hover {
           background-color: var(--highlight-low);
           text-decoration: none;
         }
 
+        &.selected {
+          background-color: var(--tertiary-low);
+        }
+
+        span {
+          margin-left: 5px;
+
+          &.username {
+            color: var(--primary);
+          }
+
+          &.name {
+            font-size: var(--font-down-1);
+            vertical-align: middle;
+          }
+        }
+
         .relative-date {
           font-size: var(--font-down-3);
           padding-top: 10em;
         }
       }
+
+      .d-icon-users {
+        color: var(--primary-medium);
+        padding: 0 2px;
+      }
     }
   }
 }