From 1533b9c79d21831b3c04b69566d890217897fb54 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Wed, 12 Oct 2022 00:08:53 +0300
Subject: [PATCH] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=D0=B0=20HeaderInputs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |   4 +-
 src/assets/sass/variables.sass                |  19 ++--
 src/components/HeaderInputs.vue               | 102 ++++++------------
 src/components/TheHeader.vue                  |   1 +
 .../base/buttons/BaseSidebarButton.vue        |   2 +-
 src/pages/calendar/TheCalendar.vue            |   2 +-
 .../components/CalendarFormAddEvent.vue       |   2 +-
 7 files changed, 50 insertions(+), 82 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index fb713ee..bdcbbbf 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,14 +10,14 @@
   import TheHeader from "@/components/TheHeader";
   import TheSidebar from "@/components/TheSidebar";
   export default {
-    name: 'App',
+    name: "App",
     components: {TheHeader, TheSidebar}
   }
 </script>
 
 <style lang="sass">
   #app
-    font-feature-settings: 'pnum' on, 'lnum' on
+    font-feature-settings: "pnum" on, "lnum" on
     -webkit-font-smoothing: antialiased
     -moz-osx-font-smoothing: grayscale
     height: 100%
diff --git a/src/assets/sass/variables.sass b/src/assets/sass/variables.sass
index 35454db..a2f56a6 100644
--- a/src/assets/sass/variables.sass
+++ b/src/assets/sass/variables.sass
@@ -1,9 +1,10 @@
-:root
-	--bg-lavender-color: #E9E9F6
-	--bg-white-color: #F8F8FF
-	--bg-ligth-blue-color: #E6EAFC
-	--font-dark-blue-color: #252850
-	--font-black-color: #090A15
-	--btn-blue-color: #4772F2
-	--font-grey-color: #9294A7
-	--border-light-grey-color: #9294A7
+\:root
+  --bg-lavender-color: #E9E9F6
+  --bg-white-color: #F8F8FF
+  --bg-ligth-blue-color: #E6EAFC
+  --font-dark-blue-color: #252850
+  --font-black-color: #090A15
+  --btn-blue-color: #4772F2
+  --font-grey-color: #9294A7
+  --border-light-grey-color: #9294A7
+  --default-shadow: 4px 4px 8px rgba(9, 10, 21, 0.1), -4px -4px 8px rgba(9, 10, 21, 0.1)
diff --git a/src/components/HeaderInputs.vue b/src/components/HeaderInputs.vue
index 46895e6..1b71723 100644
--- a/src/components/HeaderInputs.vue
+++ b/src/components/HeaderInputs.vue
@@ -1,16 +1,16 @@
 <template lang="pug">
-  .wrapper(:class="{ open: isOpen }")
-    .select-wrapper(@click="changeState")
-      .select
-        img.icon-wrapper.loupe(src="@/assets/icons/search.svg" alt="Search") 
-        span.inputs.select-input {{ selectedFilter }}
-        .icon-wrapper.arrow.icon-down-arrow
-      .filter-options(v-if="isOpen")
-        .options(v-for="filter in filters" :key="filter" @click="selectFilter(filter)")
-          .icon-wrapper
-            .icon-ok.ok(v-if="filter === selectedFilter")
-          .options-text.text-lg {{ filter }}
-    input.inputs.search-input(placeholder="Искать ...")
+  .header-inputs-wrapper.flex.items-center.font-medium.text-base(:class="{ open: isOpen }")
+    .select-container(@click="changeState")
+      .select-wrapper.flex.items-center.mx-4.my-2
+        img.icon-wrapper.flex.justify-center.items-center.loupe(src="@/assets/icons/search.svg" alt="Search") 
+        span.custom-input.select-input.inline-block.box-border.align-middle.pl-2.pr-1 {{ selectedFilter }}
+        .arrow.icon-down-arrow.flex.justify-center.items-center
+      .options-wrapper.flex.flex-col.box-border.p-4.mt-1(v-if="isOpen")
+        .option-list.flex.flex-row.mb-4(v-for="filter in filters" :key="filter" @click="selectFilter(filter)")
+          .icon-wrapper.mr-2.flex.justify-center
+            .icon-ok.flex.justify-center.items-center(v-if="filter === selectedFilter")
+          .options-text {{ filter }}
+    input.custom-input.search-input.inline-block.box-border.align-middle.px-4(class="py-2.5" placeholder="Искать ...")
 </template>
 
 <script>
@@ -19,8 +19,8 @@
     props: {},
     data() {
       return {
-        selectedFilter: 'Календарь',
-        filters: ['Календарь', 'Клиенты'],
+        selectedFilter: "Календарь",
+        filters: ["Календарь", "Клиенты"],
         isOpen: false
       }
     },
@@ -43,89 +43,51 @@
     .arrow
       transform: rotate(180deg)
 
-  .wrapper
+  .header-inputs-wrapper
     background-color: var(--bg-white-color)
-    display: flex
-    align-items: center
 
-  .inputs-wrapper
-    display: flex
-    align-items: center
-    border-radius: 4px
+  .select-container
+    border-radius: 4px 0 0 4px
     border: 1px solid var(--border-light-grey-color)
-
-  .select-wrapper
-    color: var(--btn-blue-color)
+    border-right: none
 
   .icon-wrapper
     width: 24px
     height: 24px
-    display: flex
-    justify-content: center
-    align-items: center
 
   .loupe
-    margin: 8px 0 8px 16px
     font-size: 21px
-    color: var(--btn-blue-color)
 
-  .inputs
-    cursor: pointer
+  .custom-input
     border: none
     outline: none
     background-color: transparent
     color: var(--btn-blue-color)
     height: 100%
-    box-sizing: border-box
-    font-style: normal
-    font-weight: 500
-    font-size: 16px
-    line-height: 19px
-    font-feature-settings: 'pnum' on, 'lnum' on
-    display: inline-block
-    vertical-align: middle
-    padding: 10px 16px
-    &::placeholder
-      color: var(--font-grey-color)
 
-  .select
-    display: flex
-    align-items: center
-    border-radius: 4px 0 0 4px
-    border: 1px solid var(--border-light-grey-color)
-    border-right: none
+  .select-wrapper
     position: relative
     z-index: 2
+    cursor: pointer
 
   .select-input
     width: 100px
-    padding: 10px 4px 10px 8px
 
-  .filter-options
-    display: flex
-    flex-direction: column
-    width: 173px
-    box-sizing: border-box
-    padding: 16px
+  .options-wrapper
+    width: 172px
     background-color: var(--bg-white-color)
     color: var(--font-dark-blue-color)
-    margin-top: 4px
     border-radius: 4px
     position: absolute
-    box-shadow: 4px 4px 8px rgba(9, 10, 21, 0.1), -4px -4px 8px rgba(9, 10, 21, 0.1)
+    box-shadow: var(--default-shadow)
 
   .search-input
     border-radius: 0 4px 4px 0
     border: 1px solid var(--border-light-grey-color)
+    &::placeholder
+      color: var(--font-grey-color)
 
-  .options
-    display: flex
-    flex-direction: row
-    margin-bottom: 16px
-    font-weight: 500
-    font-size: 16px
-    line-height: 19px
-    color: var(--font-dark-blue-color)
+  .option-list
     cursor: pointer
     &:last-child
       margin: 0
@@ -137,9 +99,13 @@
     align-items: center
 
   .arrow
-    margin: 12px 16px 12px 0
     font-size: 8px
+    color: var(--btn-blue-color)
 
-  .ok 
-    margin-right: 8px
+  .icon-ok
+    font-size: 13px  
+
+  .icon-down-arrow
+    width: 16px
+    height: 16px
 </style>
\ No newline at end of file
diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
index 7aff828..5aa57a7 100644
--- a/src/components/TheHeader.vue
+++ b/src/components/TheHeader.vue
@@ -50,6 +50,7 @@
   .icon-down-arrow
     width: 24px
     height: 24px
+    font-size: 12px
 
   .icon-bell
     width: 24px
diff --git a/src/components/base/buttons/BaseSidebarButton.vue b/src/components/base/buttons/BaseSidebarButton.vue
index 5aef79a..ad770d6 100644
--- a/src/components/base/buttons/BaseSidebarButton.vue
+++ b/src/components/base/buttons/BaseSidebarButton.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
   a(:href="path")
-    button(:id="id" class='button-icon-item')
+    button(:id="id" class="button-icon-item")
       slot
 </template>
 
diff --git a/src/pages/calendar/TheCalendar.vue b/src/pages/calendar/TheCalendar.vue
index 7d36ed3..26f7367 100644
--- a/src/pages/calendar/TheCalendar.vue
+++ b/src/pages/calendar/TheCalendar.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-  import FormAddEvent from './components/CalendarFormAddEvent.vue';
+  import FormAddEvent from "./components/CalendarFormAddEvent.vue";
   export default {
     name: "TheCalendar",
     components: {FormAddEvent}
diff --git a/src/pages/calendar/components/CalendarFormAddEvent.vue b/src/pages/calendar/components/CalendarFormAddEvent.vue
index 611c738..9292c6f 100644
--- a/src/pages/calendar/components/CalendarFormAddEvent.vue
+++ b/src/pages/calendar/components/CalendarFormAddEvent.vue
@@ -25,7 +25,7 @@
         .icon-person.container-icon
         .input-container
           input.form-item-input(v-model="eventData.eventClient" type="text" placeholder="ФИО клиента")
-    .form-item-container(class='additional-information')
+    .form-item-container(class="additional-information")
       .form-inform-container
         span.title-form Дополнительная информация
         button-plus(id="addInfo" @click="(e)=>addFriendInfo(e)")