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

src/pages/calendar/components/CalendarHeader.vue

@@ -2,18 +2,20 @@
   .calendar-header-wrapper.flex.items-center.justify-between.py-3.pl-5.pr-6
     .flex
       q-btn.mr-4(
-        class="secondary",
+        color="secondary",
         round,
         size="14px",
         dense,
+        text-color="primary",
         @click="previousHandler"
       )
         q-icon(name="arrow_back_ios", right)
       q-btn.mr-4(
-        class="secondary",
+        color="secondary",
         icon="arrow_forward_ios",
         round,
         size="14px",
+        text-color="primary",
         dense,
         @click="nextHandler"
       ) 
@@ -79,17 +81,4 @@ export default {
 
 .today
   opacity: 0.5
-
-.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>

src/pages/calendar/components/CalendarSidebar.vue

@@ -24,10 +24,10 @@
         //.button-wrapper.flex.justify-center.mb-23px
           q-btn(
             round,
-            icon="east",
-            size="18px",
-            class="secondary",
-            padding="6px",
+            icon="app:icon-long-arrow",
+            size="13px",
+            color="secondary",
+            text-color="primary"
             :style="{ transform: `rotate(${turnButton})`}",
             @click="changeSize",
           )
@@ -54,7 +54,7 @@ export default {
       widthSidebarOpen: "232px",
       widthSidebarClose: "72px",
       isOpen: false,
-      turnButton: "0deg",
+      turnButton: "180deg",
     };
   },
   computed: {
@@ -85,7 +85,7 @@ export default {
         "width",
         this.isOpen ? this.widthSidebarOpen : this.widthSidebarClose
       );
-      this.turnButton = this.isOpen ? "180deg" : "0deg";
+      this.turnButton = this.isOpen ? "0deg" : "180deg";
     },
   },
 };
@@ -110,17 +110,4 @@ export default {
   .button-wrapper
     justify-content: end
     padding-right: 16px
-
-.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>

src/pages/calendar/components/CalendarSidebarEvent.vue

@@ -5,7 +5,8 @@
         round,
         icon="add",
         size="12px",
-        class="secondary",
+        text-color="primary",
+        color="secondary"
         padding="4px",
         dense
       )
@@ -20,7 +21,8 @@
           round,
           icon="add",
           size="12px",
-          class="secondary",
+          text-color="primary",
+          color="secondary"
           padding="4px"
         )
       .flex.flex-col.gap-y-2
@@ -77,17 +79,4 @@ export default {
   height: 16px
   top: 8px
   left: 8px
-
-.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>

src/pages/calendar/components/CalendarSidebarTeammate.vue

@@ -4,7 +4,8 @@
         round,
         icon="add",
         size="12px",
-        class="secondary",
+        text-color="primary",
+        color="secondary"
         padding="4px",
         dense
       )
@@ -19,7 +20,8 @@
         round,
         icon="add",
         size="12px",
-        class="secondary",
+        text-color="primary",
+        color="secondary"
         padding="4px",
         dense
       )
@@ -81,16 +83,4 @@ export default {
   &:hover
     background: var(--font-dark-blue-color)
     color: var(--default-white)
-.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>