Внесла правки

src/components/HeaderInputs.vue

@@ -1,14 +1,14 @@
 <template lang="pug">
   .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
+      .select-wrapper.flex.items-center.cursor-pointer.mx-4.my-2
-        img.icon-wrapper.flex.justify-center.items-center.loupe(src="@/assets/icons/search.svg" alt="Search")
+        img.icon-wrapper.flex.justify-center.items-center(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
+        .arrow.icon-down-arrow.text-xsm.mt-px.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)")
+        .option-list.cursor-pointer.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")
+            .icon-ok.text-xs.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>
@@ -55,9 +55,6 @@ export default {
   width: 24px
   height: 24px
 
-.loupe
-  font-size: 21px
-
 .custom-input
   border: none
   outline: none
@@ -68,7 +65,6 @@ export default {
 .select-wrapper
   position: relative
   z-index: 2
-  cursor: pointer
 
 .select-input
   width: 100px
@@ -88,7 +84,6 @@ export default {
     color: var(--font-grey-color)
 
 .option-list
-  cursor: pointer
   &:last-child
     margin: 0
   &:hover
@@ -99,12 +94,8 @@ export default {
   align-items: center
 
 .arrow
-  font-size: 8px
   color: var(--btn-blue-color)
 
-.icon-ok
-  font-size: 13px
-
 .icon-down-arrow
   width: 16px
   height: 16px

src/components/TheHeader.vue

@@ -1,15 +1,15 @@
 <template lang="pug">
   .header-wrapper.flex.flex-row.space-between.justify-between.box-border.py-2.px-6
-    .left-side.flex.items-center.box-border
+    .flex.items-center.box-border.cursor-pointer
       img.logo-img(src="@/assets/images/logo.svg" alt="Logo")
     .flex.flex-row
       header-inputs.mr-10
       button.header-buttons.flex.justify-center.items-center.mr-8.p-0
-        .icon-bell
+        .icon-bell.text-xxl
       .flex.flex-row.justify-centflexer.items-center
         img.avatar-img.mr-2(:src="avatarSrc")
         button.header-buttons
-          .icon-down-arrow.flex.justify-center.items-center.p-0
+          .icon-down-arrow.text-xxs.flex.justify-center.items-center.p-0
 </template>
 
 <script>
@@ -31,7 +31,6 @@ export default {
   outline: none
   border: none
   background-color: transparent
-  cursor: pointer
   color: var(--font-dark-blue-color)
 
 .header-wrapper
@@ -40,9 +39,6 @@ export default {
   position: relative
   z-index: 2
 
-.left-side
-  cursor: pointer
-
 .logo-img
   height: 32px
   width: 70px
@@ -50,12 +46,10 @@ export default {
 .icon-down-arrow
   width: 24px
   height: 24px
-  font-size: 12px
 
 .icon-bell
   width: 24px
   height: 24px
-  font-size: 24px
   color: var(--font-dark-blue-color)
 
 .avatar-img

src/components/base/buttons/BaseArrowButton.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  button.arrow-button.flex.items-center.icon-down-arrow.px-2.pt-px
+  button.arrow-button.flex.items-center.icon-down-arrow.text-base.px-2.pt-1
 </template>
 
 <script>
@@ -18,7 +18,6 @@ export default {
   background: var(--btn-light-blue-color)
   color: var(--btn-blue-color)
   border-radius: 50%
-  font-size: 16px
   &:hover
     background: #a0b4f0
 </style>

src/main.js

@@ -7,4 +7,6 @@ import "./assets/sass/tailwind.sass";
 import "./assets/sass/variables.sass";
 import "./assets/css/iconfonts.css";
 
+moment.locale("ru");
+
 createApp(App).use(router, moment).mount("#app");

src/pages/calendar/TheCalendar.vue

@@ -8,7 +8,6 @@
 <script>
 import * as moment from "moment/moment";
 import CalendarHeader from "./components/CalendarHeader.vue";
-moment.locale("ru");
 export default {
   name: "TheCalendar",
   components: { CalendarHeader },

tailwind.config.js

@@ -14,6 +14,7 @@ module.exports = {
         m: ["16px", { lineHeight: "21.6px" }],
         lg: ["18px", { lineHeight: "21px" }],
         xl: ["20px", { lineHeight: "23px" }],
+        xxl: ["24px", { lineHeight: "26px" }],
         "2xl": ["28px", { lineHeight: "33px" }],
         "3xl": ["60px", { lineHeight: "70px" }],
         "4xl": ["44px", { lineHeight: "48px" }],