From ba04a9eddebe813cebaef2a6fe5595ec23a51970 Mon Sep 17 00:00:00 2001
From: DwCay <duminalexei@gmail.com>
Date: Tue, 11 Oct 2022 22:21:04 +0300
Subject: [PATCH] =?UTF-8?q?=D0=98=D0=B7=D0=BC=D0=B5=D0=BD=D0=B5=D0=BD?=
 =?UTF-8?q?=D1=8B=20=D1=81=D1=82=D0=B8=D0=BB=D0=B8=20=D0=BA=D0=BE=D0=BC?=
 =?UTF-8?q?=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82=D0=BE=D0=B2=20sidebar=20?=
 =?UTF-8?q?=D0=B8=20base-=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD?=
 =?UTF-8?q?=D1=82=D0=BE=D0=B2=20=D0=BF=D0=BE=D0=B4=20=D0=B8=D1=81=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=BB=D1=8C=D0=B7=D0=BE=D0=B2=D0=B0=D0=BD=D0=B8=D0=B5=20?=
 =?UTF-8?q?=D1=81=D0=B5=D1=82=D0=BA=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TheSidebar.vue                 | 22 ++++---------------
 src/components/base/buttons/BaseAddEvent.vue  |  6 +----
 .../base/buttons/BaseButtonPlus.vue           |  7 +++---
 .../base/buttons/BaseSidebarButton.vue        | 10 ++++-----
 tailwind.config.js                            |  1 +
 5 files changed, 14 insertions(+), 32 deletions(-)

diff --git a/src/components/TheSidebar.vue b/src/components/TheSidebar.vue
index 56eb81c..01f7a27 100644
--- a/src/components/TheSidebar.vue
+++ b/src/components/TheSidebar.vue
@@ -1,13 +1,13 @@
 <template lang="pug">
-  .sidebar-container
-    .top-button-container
+  .sidebar.flex.flex-col.justify-between.flex-auto.py-6.box-border
+    .flex.flex-col.gap-y-6
       the-button-sidebar(id="home" path="#/")
         .icon-home
       the-button-sidebar(id="calendar" path="#/calendar")
         .icon-calendar-2
       the-button-sidebar(id="user" path="#/user")
         .icon-person-2
-    .bottom-button-container
+    .flex.text-4xl.flex-col.gap-y-6
       the-button-sidebar(id="settings" path="#/settings")
         .icon-settings
 </template>
@@ -22,21 +22,7 @@
 </script>
 
 <style lang="sass" scoped>
-  #person
-    font-style: normal
-  .sidebar-container
-    display: flex
-    flex-direction: column
-    justify-content: space-between
-    flex: auto
-    padding: 24px 0 24px 0
-    box-sizing: border-box
+  .sidebar
     max-width: 80px
     background-color: #F8F8FF
-
-  .top-button-container
-    display: flex
-    font-size: 40px
-    flex-direction: column
-    row-gap: 24px
 </style>
diff --git a/src/components/base/buttons/BaseAddEvent.vue b/src/components/base/buttons/BaseAddEvent.vue
index 90b5237..a3c8507 100644
--- a/src/components/base/buttons/BaseAddEvent.vue
+++ b/src/components/base/buttons/BaseAddEvent.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  button.event-button Создать событие
+  button.event-button.not-italic.leading-5.text-base.py-3.px-4 Создать событие
 </template>
 
 <script>
@@ -13,12 +13,8 @@
     outline: none
     border: none
     cursor: pointer
-    font-style: normal
-    line-height: 19px
-    font-size: 16px
     width: fit-content
     color: var(--bg-white-color)
     background-color: var(--btn-blue-color)
-    padding: 11px 16px 11px 16px
     border-radius: 4px
 </style>
diff --git a/src/components/base/buttons/BaseButtonPlus.vue b/src/components/base/buttons/BaseButtonPlus.vue
index 9a0eb41..ef6c3bb 100644
--- a/src/components/base/buttons/BaseButtonPlus.vue
+++ b/src/components/base/buttons/BaseButtonPlus.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  button.icon-plus(class="button-plus")
+  button.icon-plus.button-plus.text-xs.pt-1
 </template>
 
 <script>
@@ -12,10 +12,11 @@
   .button-plus
     outline: none
     border: none
-    font-size: 12px
     cursor: pointer
+    width: 24px
+    height: 24px
+    max-height: 24px
     color: #4772F2
-    padding: 7px 7px 5px 7px
     background-color: rgba(65, 105, 225, 0.25)
     border-radius: 50%
 </style>
diff --git a/src/components/base/buttons/BaseSidebarButton.vue b/src/components/base/buttons/BaseSidebarButton.vue
index 5aef79a..cdaad3c 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.button.text-4xl.py-3.pr-4.pl-3(:id="id")
       slot
 </template>
 
@@ -21,11 +21,9 @@
 </script>
 
 <style lang="sass" scoped>
-  .button-icon-item
+  .button
     width: fit-content
-    padding: 12px 16px 12px 12px
     cursor: pointer
-    font-size: 40px
     background-color: rgb(65, 105, 225, 0)
     border-radius: 0 4px 4px 0
     border-left-color: rgb(65, 105, 225, 0)
@@ -34,11 +32,11 @@
     border-top: none
     border-bottom: none
     border-left-style: solid
-  .button-icon-item:focus
+  .button:focus
     background-color: rgb(65, 105, 225, 0.3)
     border-left-color: rgb(65, 105, 225, 1)
     color: #4169E1
-  .button-icon-item:hover
+  .button:hover
     background-color: rgb(65, 105, 225, 0.3)
     border-left-color: rgb(65, 105, 225, 1)
     color: #4169E1
diff --git a/tailwind.config.js b/tailwind.config.js
index cac699b..6629e32 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -18,6 +18,7 @@ module.exports = {
         xl: ['20px', { lineHeight: '23px' }],
         '2xl': ['28px', { lineHeight: '33px' }],
         '3xl': ['60px', { lineHeight: '70px' }],
+        '4xl': ['44px', { lineHeight: '48px' }],
       }
     },
   },