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

src/pages/calendar/components/CalendarSidebar.vue

@@ -2,45 +2,44 @@
   .sidebar.flex.flex-col.bg-white(:class="openSidebar")
     .sidebar-wrapper.h-full.my-13px.flex.flex-col.justify-between(:style="sidebarWidth")
       .sidebar-content.items-center.flex.flex-col.gap-y-8.px-4.py-19px
-        base-button(
-          left-icon="icon-plus",
-          rounded,
-          :size="40",
-          :icon-left-size="10",
+        q-btn(
+          color="primary",
+          round,
+          icon="add",
+          size="13px",
           @click="openFormCreate",
           v-if="!isOpen"
         )
-        base-button.w-full(
-          right-icon="icon-plus",
-          split,
-          :size="40",
-          :icon-right-size="10",
-          :marginLeftIcon="7",
+        q-btn(
+          no-caps
+          label="Создать событие",
+          color="primary",
+          class="text-weight-medium, full-width",
+          icon-right="add",
           @click="openFormCreate",
           v-else
-        ) Создать событие
+        )
         calendar-sidebar-event(:is-open="isOpen", :event-statuses="eventStatuses")
         calendar-sidebar-teammate(:team-data="teamData", :is-open="isOpen", :url="url")
-        //- .button-wrapper.flex.justify-center.mb-23px
-        //-   base-button(
-        //-     left-icon="icon-long-arrow",
-        //-     rounded, :size="40",
-        //-     :icon-left-size="18",
-        //-     secondary,
-        //-     :style="{ transform: `rotate(${turnButton})`}",
-        //-     @click="changeSize"
+        //.button-wrapper.flex.justify-center.mb-23px
+          q-btn(
+            round,
+            icon="east",
+            size="18px",
+            class="secondary",
+            padding="6px",
+            :style="{ transform: `rotate(${turnButton})`}",
+            @click="changeSize",
           )
 </template>
 
 <script>
-import BaseButton from "@/components/base/BaseButton";
 import CalendarSidebarEvent from "./CalendarSidebarEvent.vue";
 import CalendarSidebarTeammate from "./CalendarSidebarTeammate.vue";
 
 export default {
   name: "CalendarSidebar",
   components: {
-    BaseButton,
     CalendarSidebarEvent,
     CalendarSidebarTeammate,
   },
@@ -55,7 +54,7 @@ export default {
       widthSidebarOpen: "232px",
       widthSidebarClose: "72px",
       isOpen: false,
-      turnButton: "180deg",
+      turnButton: "0deg",
     };
   },
   computed: {
@@ -86,7 +85,7 @@ export default {
         "width",
         this.isOpen ? this.widthSidebarOpen : this.widthSidebarClose
       );
-      this.turnButton = this.isOpen ? "0deg" : "180deg";
+      this.turnButton = this.isOpen ? "180deg" : "0deg";
     },
   },
 };
@@ -111,4 +110,17 @@ 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>