Merge pull request #19 from dderbentsov/UC-1

Исправила HeaderInputs с tailwind

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,9 +1,10 @@
-:root
+\:root
-	--bg-lavender-color: #E9E9F6
+  --bg-lavender-color: #E9E9F6
-	--bg-white-color: #F8F8FF
+  --bg-white-color: #F8F8FF
-	--bg-ligth-blue-color: #E6EAFC
+  --bg-ligth-blue-color: #E6EAFC
-	--font-dark-blue-color: #252850
+  --font-dark-blue-color: #252850
-	--font-black-color: #090A15
+  --font-black-color: #090A15
-	--btn-blue-color: #4772F2
+  --btn-blue-color: #4772F2
-	--font-grey-color: #9294A7
+  --font-grey-color: #9294A7
-	--border-light-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

@@ -1,22 +1,22 @@
 <template lang="pug">
-  div.header-wrapper
+  .header-wrapper.flex.flex-row.space-between.justify-between.box-border.py-2.px-6
-    div.header-left-side
+    .left-side.flex.items-center.box-border
       img.logo-img(src="@/assets/images/logo.svg" alt="Logo")
-    div.header-right-side
+    .flex.flex-row
-      header-inputs
+      header-inputs.mr-10
-      button.header-buttons.btn-notification
+      button.header-buttons.flex.justify-center.items-center.mr-8.p-0
-        img.bell-icon(src="@/assets/icons/bell.svg" alt="Notifications")
+        .icon-bell
-      div.avatar-wrapper
+      .flex.flex-row.justify-centflexer.items-center
-        img.avatar-img(:src="avatarSrc")
+        img.avatar-img.mr-2(:src="avatarSrc")
-        button.header-buttons.btn-down-arrow
+        button.header-buttons
-          img.arrow-icon(src="@/assets/icons/down-arrow-2.svg" alt="Down Arrow")
+          .icon-down-arrow.flex.justify-center.items-center.p-0
 </template>
 
 <script>
-  import img from '@/assets/images/avatar.svg'
+  import img from "@/assets/images/avatar.svg"
-  import HeaderInputs from './HeaderInputs.vue'
+  import HeaderInputs from "./HeaderInputs.vue"
   export default {
-    name: 'TheHeader',
+    name: "TheHeader",
     components: {HeaderInputs},
     data() {
       return {
@@ -26,70 +26,39 @@
   }
 </script>
 
-<style lang='sass' scoped>
+<style lang="sass" scoped>
-  input
-    padding: 0 
-
   .header-buttons
     outline: none
     border: none
     background-color: transparent
     cursor: pointer
-    padding: 0
     color: var(--font-dark-blue-color)
 
   .header-wrapper
-    display: flex
-    flex-direction: row
-    justify-content: space-between
     width: 100%
-    padding: 8px 24px
     background-color: var(--bg-white-color)
-    box-sizing: border-box
     position: relative
     z-index: 2
 
-  .header-right-side
+  .left-side
-    display: flex
-    flex-direction: row
-
-  .header-left-side
-    box-sizing: border-box
-    margin: 4px 0
-    height: 32px 
     cursor: pointer
 
   .logo-img
     height: 32px
     width: 70px 
 
-  .btn-notification
+  .icon-down-arrow
-    display: flex
-    justify-content: center
-    align-items: center  
-    margin-right: 32px
-
-  .arrow-icon
     width: 24px
     height: 24px
+    font-size: 12px
 
-  .bell-icon
+  .icon-bell
     width: 24px
     height: 24px
-
+    font-size: 24px
-  .avatar-wrapper
+    color: var(--font-dark-blue-color)
-    display: flex
-    flex-direction: row
-    justify-content: center
-    align-items: center
-
-  .btn-down-arrow
-    display: flex
-    justify-content: center
-    align-items: center
 
   .avatar-img
     width: 32px
     height: 32px
-    margin-right: 8px
 </style>