From 21433b5544179700188d91d2893b0b923198b112 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Fri, 26 Nov 2021 18:37:29 +0530
Subject: [PATCH] feat: Change bg color when focusing tag instead of border
 (#751)

---
 .../components/AutocompleteTagHint.tsx            |  2 +-
 .../components/AutocompleteTagResult.tsx          |  2 +-
 app/assets/stylesheets/_sn.scss                   | 15 ++++++++++++++-
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/components/AutocompleteTagHint.tsx b/app/assets/javascripts/components/AutocompleteTagHint.tsx
index 5e134ddb5..5250b8f8c 100644
--- a/app/assets/javascripts/components/AutocompleteTagHint.tsx
+++ b/app/assets/javascripts/components/AutocompleteTagHint.tsx
@@ -57,7 +57,7 @@ export const AutocompleteTagHint = observer(
         <button
           ref={hintRef}
           type="button"
-          className="sn-dropdown-item"
+          className="sn-dropdown-item focus:bg-info focus:color-info-contrast hover:color-foreground"
           onClick={onTagHintClick}
           onFocus={onFocus}
           onBlur={onBlur}
diff --git a/app/assets/javascripts/components/AutocompleteTagResult.tsx b/app/assets/javascripts/components/AutocompleteTagResult.tsx
index dd5195bcb..84bb150ac 100644
--- a/app/assets/javascripts/components/AutocompleteTagResult.tsx
+++ b/app/assets/javascripts/components/AutocompleteTagResult.tsx
@@ -77,7 +77,7 @@ export const AutocompleteTagResult = observer(
       <button
         ref={tagResultRef}
         type="button"
-        className="sn-dropdown-item"
+        className="sn-dropdown-item focus:bg-info focus:color-info-contrast"
         onClick={() => onTagOptionClick(tagResult)}
         onFocus={onFocus}
         onBlur={onBlur}
diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
index 8f6fbcf43..b6ec33c01 100644
--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -170,9 +170,10 @@
   @extend .flex;
   @extend .items-center;
   @extend .border-0;
-  @extend .focus\:inner-ring-info;
+  @extend .focus\:shadow-none;
   @extend .cursor-pointer;
   @extend .hover\:bg-contrast;
+  @extend .hover\:color-foreground;
   @extend .color-text;
   @extend .bg-transparent;
   @extend .px-3;
@@ -684,6 +685,18 @@
   @extend .rounded-full;
 }
 
+.focus\:bg-info:focus {
+  @extend .bg-info;
+}
+
+.focus\:color-info-contrast:focus {
+  @extend .color-info-contrast;
+}
+
+.hover\:color-foreground:hover {
+  color: var(--sn-stylekit-foreground-color) !important;
+}
+
 .focus\:bg-info-backdrop:focus {
   background-color: var(--sn-stylekit-info-backdrop-color);
 }