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

src/pages/calendar/components/CalendarSidebarTeammate.vue

@@ -1,6 +1,13 @@
 <template lang="pug">
   .flex.flex-col.items-center.gap-y-2.justify-center(v-if="!isOpen")
-    base-button.mb-2(left-icon="icon-plus", rounded, :size="24", :icon-left-size="10", secondary)
+    q-btn(
+        round,
+        icon="add",
+        size="12px",
+        class="secondary",
+        padding="4px",
+        dense
+      )
     .team-card(v-for="teammate in teamData" :key="teammate.id")
       base-avatar(:size="32", :color="teammate.color")
         img.h-full.object-cover(:src="url + teammate.photo", alt="Team member", v-if="teammate.photo")
@@ -8,7 +15,14 @@
   .flex.flex-col.gap-y-4.w-full(v-else, :style="{ color: 'var(--font-dark-blue-color)' }")
     .flex.items-center.justify-between
       .flex.text-base.font-bold Команды
-      base-button(left-icon="icon-plus", rounded, :size="24", :icon-left-size="10", secondary)
+      q-btn(
+        round,
+        icon="add",
+        size="12px",
+        class="secondary",
+        padding="4px",
+        dense
+      )
     .box-team.flex.flex-col.gap-y-2
       .team-card.flex.items-center.justify-between.cursor-pointer(
         v-for="teammate in teamData",
@@ -23,7 +37,6 @@
 </template>
 
 <script>
-import BaseButton from "@/components/base/BaseButton";
 import BaseAvatar from "@/components/base/BaseAvatar";
 export default {
   name: "CalendarSidebarTeammate",
@@ -33,7 +46,6 @@ export default {
     url: String,
   },
   components: {
-    BaseButton,
     BaseAvatar,
   },
   data() {
@@ -69,4 +81,16 @@ 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>