WIP Переделана часть кнопок

src/pages/schedule/components/ScheduleHeader.vue

@@ -10,32 +10,40 @@
     .flex
       .calendar-header-wrapper.flex.items-center.justify-between.py-3.pl-5.pr-6
         .flex
-          base-button.left-arrow.mr-4(
+          q-btn.mr-4(
+            class="secondary",
+            round,
+            size="14px",
+            dense,
             @click="previousHandler",
-            left-icon="icon-down-arrow",
-            rounded,
-            secondary,
-            :iconLeftSize="16",
-            :size="32"
           )
-          base-button.right-arrow.mr-6(
+            q-icon(name="arrow_back_ios", right)
+          q-btn.mr-6(
             @click="nextHandler",
-            left-icon="icon-down-arrow",
-            rounded,
-            secondary,
-            :iconLeftSize="16",
-            :size="32"
-          )
+            class="secondary",
+            icon="arrow_forward_ios",
+            round,
+            size="14px",
+            dense,
+          ) 
           .text.flex.items-center
             .text.font-medium.text-base {{ dateString }}
             .opacity-50.font-bold.text-xxs.ml-2(v-if="isCurrentMonth") Текущий
-        .flex.gap-x-4
-          base-button.font-semibold(
-            :size="40",
-            :style="{minWidth: '176px'}",
-            @click="changeShowTime"
-          ) {{textButton}}
-          base-button.font-semibold(:size="40", @click="openForm") Замена смен
+        .flex.gap-x-4.h-10
+          q-btn(
+            :label="textButton",
+            color="primary",
+            no-caps,
+            padding="8px 24px",
+            @click="changeShowTime",
+          )
+          q-btn(
+            label="Замена смен",
+            color="primary",
+            no-caps,
+            padding="8px 24px",
+            @click="openForm",
+          )
 </template>
 
 <script>
@@ -134,4 +142,17 @@ export default {
 
 .form-move
   transition: 0.5s ease
+
+.secondary
+  background-color: var(--btn-blue-sec-color)
+  border: 1px solid var(--btn-blue-sec-color)
+  color: var(--btn-blue-color)
+  &:hover
+    background-color: var(--btn-blue-color-hover)
+    border: 1px solid var(--btn-blue-color-hover)
+    color: var(--btn-blue-color)
+  &:disabled, &[disabled]
+    background-color: var(--btn-blue-sec-color)
+    border: 1px solid var(--btn-blue-sec-color)
+    color: var(--btn-blue-color)
 </style>