From 32a2a1dbbc9d3548e3650fdc051b65e0a213dff1 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Tue, 26 Jul 2022 16:30:56 +0700
Subject: [PATCH] fixed tag autocomplete style

---
 .../menu/MenuButton/styles.module.scss        | 33 ++-----------------
 src/components/tags/TagAutocomplete/index.tsx |  5 ++-
 .../tags/TagAutocomplete/styles.module.scss   | 14 ++++++--
 .../TagAutocompleteRow/styles.module.scss     |  4 +--
 src/styles/_mixins.scss                       | 31 +++++++++++++++++
 5 files changed, 52 insertions(+), 35 deletions(-)

diff --git a/src/components/menu/MenuButton/styles.module.scss b/src/components/menu/MenuButton/styles.module.scss
index d2d3e973..e3c01533 100644
--- a/src/components/menu/MenuButton/styles.module.scss
+++ b/src/components/menu/MenuButton/styles.module.scss
@@ -1,10 +1,10 @@
+@import "src/styles/variables.scss";
+
 .menu {
   position: relative;
   cursor: pointer;
 }
 
-@import "src/styles/variables.scss";
-
 .popper {
   @include outer_shadow;
 
@@ -32,32 +32,5 @@
 }
 
 .arrow {
-  width: 0;
-  height: 0;
-  border-style: solid;
-  position: absolute;
-
-  [data-popper-placement*='bottom'] & {
-    border-width: 0 10px 10px 10px;
-    border-color: transparent transparent lighten($menu_bg, 6%) transparent;
-    top: -10px;
-  }
-
-  [data-popper-placement*='top'] & {
-    border-width: 10px 10px 0 10px;
-    border-color: lighten($menu_bg, 6%) transparent transparent transparent;
-    bottom: -10px;
-  }
-
-  [data-popper-placement*='right'] & {
-    border-width: 10px 10px 10px 0;
-    border-color: transparent lighten($menu_bg, 6%) transparent transparent;
-    left: -10px;
-  }
-
-  [data-popper-placement*='left'] & {
-    border-width: 10px 0 10px 10px;
-    border-color: transparent transparent transparent lighten($menu_bg, 6%);
-    right: -10px;
-  }
+  @include popper_arrow;
 }
diff --git a/src/components/tags/TagAutocomplete/index.tsx b/src/components/tags/TagAutocomplete/index.tsx
index ff9fd5ed..5a89915b 100644
--- a/src/components/tags/TagAutocomplete/index.tsx
+++ b/src/components/tags/TagAutocomplete/index.tsx
@@ -35,15 +35,17 @@ const TagAutocomplete: VFC<TagAutocompleteProps> = ({
   );
   const scroll = useRef<HTMLDivElement>(null);
   const wrapper = useRef<HTMLDivElement>(null);
+  const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);
 
   const pop = usePopper(wrapper?.current?.parentElement, wrapper.current, {
     placement: 'bottom-end',
     strategy: 'fixed',
     modifiers: [
+      { name: 'arrow', options: { element: arrowElement } },
       {
         name: 'offset',
         options: {
-          offset: [0, 4],
+          offset: [0, 10],
         },
       },
     ],
@@ -93,6 +95,7 @@ const TagAutocomplete: VFC<TagAutocompleteProps> = ({
       style={pop.styles.popper}
       {...pop.attributes.popper}
     >
+      <div style={pop.styles.arrow} ref={setArrowElement} className={styles.arrow} />
       <div className={styles.scroll} ref={scroll}>
         <TagAutocompleteRow
           selected={selected === -1}
diff --git a/src/components/tags/TagAutocomplete/styles.module.scss b/src/components/tags/TagAutocomplete/styles.module.scss
index 34a2f79e..1055262d 100644
--- a/src/components/tags/TagAutocomplete/styles.module.scss
+++ b/src/components/tags/TagAutocomplete/styles.module.scss
@@ -8,7 +8,9 @@
 $row_height: 24px;
 
 .window {
-  box-shadow: transparentize(white, 0.9) 0 0 0 1px;
+  @include outer_shadow;
+  @include blur;
+
   position: absolute;
   top: -2px;
   right: -2px;
@@ -19,14 +21,22 @@ $row_height: 24px;
   border-radius: 4px;
   animation: appear 0.25s forwards;
   visibility: hidden;
+  pointer-events: none;
+  touch-action: none;
 
   &.visible {
     visibility: visible;
+    pointer-events: all;
+    touch-action: initial;
   }
 }
 
 .scroll {
   overflow: hidden;
-  padding: 0 0 $gap * 0.5;
+  padding: 0;
   border-radius: 4px;
 }
+
+.arrow {
+  @include popper_arrow;
+}
\ No newline at end of file
diff --git a/src/components/tags/TagAutocompleteRow/styles.module.scss b/src/components/tags/TagAutocompleteRow/styles.module.scss
index 25ff562f..7a2f3385 100644
--- a/src/components/tags/TagAutocompleteRow/styles.module.scss
+++ b/src/components/tags/TagAutocompleteRow/styles.module.scss
@@ -1,6 +1,6 @@
 @import "src/styles/variables";
 
-$row_height: 24px;
+$row_height: 26px;
 
 .row {
   height: $row_height;
@@ -18,7 +18,7 @@ $row_height: 24px;
 
   &:hover, &.selected {
     opacity: 1;
-    background: transparentize($wisegreen, 0.5);
+    background: transparentize($wisegreen, 0.6);
   }
 
   &.right {
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index 3599dc2d..bdf53d67 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -283,3 +283,34 @@
     opacity: 1;
   }
 }
+
+@mixin popper_arrow {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  position: absolute;
+
+  [data-popper-placement*='bottom'] & {
+    border-width: 0 10px 10px 10px;
+    border-color: transparent transparent lighten($menu_bg, 6%) transparent;
+    top: -10px;
+  }
+
+  [data-popper-placement*='top'] & {
+    border-width: 10px 10px 0 10px;
+    border-color: lighten($menu_bg, 6%) transparent transparent transparent;
+    bottom: -10px;
+  }
+
+  [data-popper-placement*='right'] & {
+    border-width: 10px 10px 10px 0;
+    border-color: transparent lighten($menu_bg, 6%) transparent transparent;
+    left: -10px;
+  }
+
+  [data-popper-placement*='left'] & {
+    border-width: 10px 0 10px 10px;
+    border-color: transparent transparent transparent lighten($menu_bg, 6%);
+    right: -10px;
+  }
+}
\ No newline at end of file