From f7c2b16a7ca29c5c5703a5de2b0424b2cdb66791 Mon Sep 17 00:00:00 2001
From: andreymal <andriyano-31@mail.ru>
Date: Thu, 8 Jun 2023 23:32:26 +0300
Subject: [PATCH] Improve StoryTags style

---
 frontend/src/components/StoryTags/styles.css | 36 ++++++++++++++++++--
 1 file changed, 34 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/StoryTags/styles.css b/frontend/src/components/StoryTags/styles.css
index cc0069bb..41367376 100644
--- a/frontend/src/components/StoryTags/styles.css
+++ b/frontend/src/components/StoryTags/styles.css
@@ -5,7 +5,7 @@
 }
 
 @define-mixin tag-box {
-  min-height: 2.5em;
+  min-height: 2.3em;
   max-height: 15em;
   overflow-y: auto;
   background-color: var(--background);
@@ -23,7 +23,14 @@
 
   padding: 0.3em 0.5em;
 
-  width: 80%
+  width: 80%;
+
+  transition: border linear 0.2s, box-shadow linear 0.2s;
+}
+
+.react-tagsinput--focused > .tags-container {
+  border-color: rgba(82, 168, 236, 0.8);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, .6);
 }
 
 .tags-input-container {
@@ -69,6 +76,27 @@
   margin: 0.25em 0.5em;
 }
 
+.react-autosuggest__container {
+  flex-grow: 1;
+
+  & .dropdown-input {
+    margin-left: 0;
+    margin-right: 0;
+    width: 100%;
+    height: 28px;
+    box-sizing: border-box;
+
+    /* disable default bootstrap styles */
+    border: 0;
+    box-shadow: none;
+    background-color: transparent;
+
+    &:focus {
+      box-shadow: none;
+    }
+  }
+}
+
 .react-autosuggest__suggestions-container {
   @mixin tag-box;
   margin: 0.15em;
@@ -90,6 +118,10 @@
   margin: 0;
 }
 
+.react-autosuggest__suggestion {
+  cursor: pointer;
+}
+
 .react-autosuggest__suggestion--highlighted {
   filter: var(--highlight-filters);
 }