Исправила HeaderInputs

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%

src/assets/sass/variables.sass

@@ -1,4 +1,4 @@
-:root
+\:root
   --bg-lavender-color: #E9E9F6
   --bg-white-color: #F8F8FF
   --bg-ligth-blue-color: #E6EAFC
@@ -7,3 +7,4 @@
   --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)

src/components/HeaderInputs.vue

@@ -1,16 +1,16 @@
 <template lang="pug">
-  .wrapper(:class="{ open: isOpen }")
+  .header-inputs-wrapper.flex.items-center.font-medium.text-base(:class="{ open: isOpen }")
-    .select-wrapper(@click="changeState")
+    .select-container(@click="changeState")
-      .select
+      .select-wrapper.flex.items-center.mx-4.my-2
-        img.icon-wrapper.loupe(src="@/assets/icons/search.svg" alt="Search") 
+        img.icon-wrapper.flex.justify-center.items-center.loupe(src="@/assets/icons/search.svg" alt="Search") 
-        span.inputs.select-input {{ selectedFilter }}
+        span.custom-input.select-input.inline-block.box-border.align-middle.pl-2.pr-1 {{ selectedFilter }}
-        .icon-wrapper.arrow.icon-down-arrow
+        .arrow.icon-down-arrow.flex.justify-center.items-center
-      .filter-options(v-if="isOpen")
+      .options-wrapper.flex.flex-col.box-border.p-4.mt-1(v-if="isOpen")
-        .options(v-for="filter in filters" :key="filter" @click="selectFilter(filter)")
+        .option-list.flex.flex-row.mb-4(v-for="filter in filters" :key="filter" @click="selectFilter(filter)")
-          .icon-wrapper
+          .icon-wrapper.mr-2.flex.justify-center
-            .icon-ok.ok(v-if="filter === selectedFilter")
+            .icon-ok.flex.justify-center.items-center(v-if="filter === selectedFilter")
-          .options-text.text-lg {{ filter }}
+          .options-text {{ filter }}
-    input.inputs.search-input(placeholder="Искать ...")
+    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: 'Календарь',
+        selectedFilter: "Календарь",
-        filters: ['Календарь', 'Клиенты'],
+        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
+  .select-container
-    display: flex
+    border-radius: 4px 0 0 4px
-    align-items: center
-    border-radius: 4px
     border: 1px solid var(--border-light-grey-color)
-
+    border-right: none
-  .select-wrapper
-    color: var(--btn-blue-color)
 
   .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
+  .custom-input
-    cursor: pointer
     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
+  .select-wrapper
-    display: flex
-    align-items: center
-    border-radius: 4px 0 0 4px
-    border: 1px solid var(--border-light-grey-color)
-    border-right: none
     position: relative
     z-index: 2
+    cursor: pointer
 
   .select-input
     width: 100px
-    padding: 10px 4px 10px 8px
 
-  .filter-options
+  .options-wrapper
-    display: flex
+    width: 172px
-    flex-direction: column
-    width: 173px
-    box-sizing: border-box
-    padding: 16px
     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
+  .option-list
-    display: flex
-    flex-direction: row
-    margin-bottom: 16px
-    font-weight: 500
-    font-size: 16px
-    line-height: 19px
-    color: var(--font-dark-blue-color)
     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 
+  .icon-ok
-    margin-right: 8px
+    font-size: 13px  
+
+  .icon-down-arrow
+    width: 16px
+    height: 16px
 </style>

src/components/TheHeader.vue

@@ -50,6 +50,7 @@
   .icon-down-arrow
     width: 24px
     height: 24px
+    font-size: 12px
 
   .icon-bell
     width: 24px

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>
 

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}

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)")