From 9e8fb856eb493908c5b50f4defccfeb21d599566 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Mon, 24 Jul 2023 14:32:18 +0300
Subject: [PATCH] =?UTF-8?q?WIP=20=D0=94=D0=BE=D0=B4=D0=B5=D0=BB=D0=B0?=
 =?UTF-8?q?=D0=BB=D0=B0=20=D1=81=D0=B5=D0=BB=D0=B5=D0=BA=D1=82=20=D0=BD?=
 =?UTF-8?q?=D0=B0=20=D1=85=D0=B5=D0=B4=D0=B5=D1=80=D0=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/HeaderInputs.vue | 75 +++++++++------------------------
 src/components/TheHeader.vue    |  2 +-
 2 files changed, 22 insertions(+), 55 deletions(-)

diff --git a/src/components/HeaderInputs.vue b/src/components/HeaderInputs.vue
index 7b40f2d..574bf52 100644
--- a/src/components/HeaderInputs.vue
+++ b/src/components/HeaderInputs.vue
@@ -1,48 +1,29 @@
 <template lang="pug">
   div(:class="{active: focused}")
     .header-inputs-wrapper.flex.items-center.font-medium.text-base
-      .h-full.px-4.py-2.select.flex.items-center(:style="{color: 'var(--font-grey-color)'}")
-        q-menu(:offset="[0, 6]" v-model="isOpen")
+      .h-full.px-4.py-2.select.flex.items-center
+        q-menu(
+          :offset="[0, 6]",
+          v-model="isOpen",
+          :style="{'box-shadow': '-4px -4px 8px 0px rgba(9, 10, 21, 0.10), 4px 4px 8px 0px rgba(9, 10, 21, 0.10)'}"
+        )
           .menu.bg-shite.p-4.flex.flex-col.gap-y-3
             .item.text-base.font-medium.flex.gap-x-2.cursor-pointer(v-for="filter in filters", v-close-popup, @click="selectFilter(filter)")
               .h-6.w-6.items-center.justify-center.flex
-                q-icon(name="app:ok", size="12px", v-if="filter === selectedFilter")
-              .flex.items-center {{ filter }}
-        q-icon.mr-2(
+                q-icon.text-dark(name="app:ok", size="12px", v-if="filter === selectedFilter")
+              .flex.items-center.text-dark {{ filter }}
+        q-icon.mr-3(
           name="app:icon-search",
           size="18px"
         )
-        .text-base.font-medium {{ selectedFilter }}
-        .h-4.w-4.flex.items-center.pt-1.justify-center.ml-1
-          q-icon(
-            name="app:down-arrow",
-            size="8px",
-            :class="{'rotate-180': isOpen}"
-          )
-      //- q-select.pl-4.pr-5.select(
-      //-   v-model="selectedFilter",
-      //-   :options="filters",
-      //-   borderless,
-      //-   dense,
-      //-   dropdown-icon="app:down-arrow",
-      //-   behavior="menu",
-      //-   :menu-offset="[18, 4]"
-      //-   multiple
-      //- )
-      //-   template(v-slot:selected)
-      //-     span(:style="{color: 'var(--font-grey-color)', 'font-weight': 500, 'line-height': 'normal' }") {{ selectedFilter }}
-      //-   template(v-slot:prepend)
-      //-     q-icon.pr-1(
-      //-       name="app:icon-search",
-      //-       size="18px",
-      //-       :style="{color: 'var(--font-grey-color)'}"
-      //-     )
-      //-   template(v-slot:option="scope")
-      //-     //.p-14.bg-white.w-54.flex.gap-y-3
-      //-     q-item.item(v-bind="scope.itemProps", :clickable="false")
-      //-       q-item-section.flex
-      //-         q-icon(name="app:ok", size="16px", v-if="scope.opt === selectedFilter")
-      //-         q-item-label {{ scope.opt }}
+        .flex-1.h-full.flex.items-center.justify-between
+          .text-base.font-medium {{ selectedFilter }}
+          .h-4.w-4.flex.items-center.pt-1.justify-center.ml-1
+            q-icon(
+              name="app:down-arrow",
+              size="8px",
+              :class="{'rotate-180': isOpen}"
+            )
       q-input.input.px-4(
         type="text",
         placeholder="Искать ...",
@@ -91,26 +72,12 @@ export default {
   .select
     border-right-color: var(--font-dark-blue-color) !important
 
-// .select
-//   border-right-width: 1.5px
-//   border-right-style: solid
-//   border-right-color: var(--border-light-grey-color)
-//   width: 170px
-//   &:deep(q-field__native)
-//     color: var(--font-grey-color) !important
-//     font-weight: 500 !important
-//     line-height: normal !important
-//   &:deep(.q-select__dropdown-icon)
-//     font-size: 8px !important
-//   &:deep(.q-field__append)
-//     padding-left: 4px
-//     padding-top: 4px
-
 .select
   border-right-width: 1.5px
   border-right-style: solid
   border-right-color: var(--border-light-grey-color)
-  width: 170px
+  width: 167px
+  color: var(--font-grey-color)
 
 .input
   width: 230px
@@ -126,6 +93,6 @@ export default {
 .menu
   width: 216px
 
-.item
-  color: var(--font-dark-blue-color)
+.item:hover
+  opacity: 0.6
 </style>
diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
index 03db105..b6f1648 100644
--- a/src/components/TheHeader.vue
+++ b/src/components/TheHeader.vue
@@ -38,7 +38,7 @@
           base-avatar(:size="36", :color="userData?.color", v-if="!userData?.photo") {{changeName}}       
           base-avatar(:size="32", v-else)
             img.h-full.object-cover(:src="url + userData?.photo", alt="Avatar")
-          .h-6.w-6.flex.items-center.justify-center.ml-2
+          .h-6.w-6.flex.items-center.justify-center.ml-2.pt-1
             q-icon(name="app:icon-down-arrow", size="12px")
           q-menu(
             :offset="[60, 6]"