Исправила базовые кнопки

src/components/base/BaseButton.vue

@@ -3,7 +3,7 @@
     :label="miniSize || round ? '' : label",
     no-caps, 
     :class="btnClass"
-    :style="{width: miniSize ? '40px' : width, 'min-width': (miniSize || round) && '0px', ...btnStyle}",
+    :style="{width: miniSize ? '40px' : width, 'min-width': width, ...btnHeight}",
     :round="miniSize || round",
     :padding="computedPadding",
     :disable="disable"
@@ -40,7 +40,7 @@ export default {
         [this.type]: true,
       };
     },
-    btnStyle() {
+    btnHeight() {
       if (this.size === "L")
         return {
           height: "48px",
@@ -51,6 +51,13 @@ export default {
         "min-height": "40px",
       };
     },
+    btnWidth() {
+      return !this.width === "auto"
+        ? {
+            "min-width": this.width,
+          }
+        : {};
+    },
     miniSize() {
       return this.type === "mini";
     },

src/components/base/BaseCategorySelection.vue

@@ -31,24 +31,16 @@
           )
           .name.flex.items-center.font-medium.text-xm {{benefit.name}}
       .buttons-group.flex.py-4.px-8.justify-center
-        q-btn(
+        base-button(
-          color="primary",
+          type="secondary",
-          outline,
+          label="Сбросить",
-          size="16px",
+          width="146px",
-          no-caps,
-          label="Отменить",
-          :style="{width: '126px', height: '40px'}",
-          padding="0",
           @click="closeModalCategories"
         )
-        q-btn(
+        base-button(
           v-if="selected[0]?.id",
-          color="primary",
+          label="Сохранить",
-          size="16px",
+          width="146px",
-          no-caps,
-          label="Сохранить изменения",
-          :style="{width: '132px', height: '40px'}",
-          padding="0",
           @click="saveCategories(selected[0])"
         )
     .right-side.flex.px-14.font-bold.relative

src/components/base/BaseClientFormCreate.vue

@@ -55,12 +55,14 @@
                   )
                   .avatar.flex.absolute.items-center.gap-x-6
                     img.avatar.object-cover(for="image-upload", :src="image", v-if="image")
-                    q-btn(
+                    base-button(
-                      round,
+                      width="48px",
-                      color="primary",
                       @click="closeAddImage",
-                      icon="app:icon-ok"
+                      size="L",
+                      round,
+                      padding="2px 0 0 0"
                     )
+                      q-icon(name="app:ok", size="20px")
           base-input.w-full(v-model="infoClient.basic.full_name", placeholder="ФИО*", outlined)
       .flex.flex-col.flex-auto.l.gap-y-8
         .flex
@@ -83,14 +85,7 @@
           :save-file="saveDocFile",
           :networks-list="getNetworksList",
         )
-        q-btn(
+        base-button(label="Создать клиента", width="180px", @click="saveClient")
-          label="Создать клиента",
-          color="primary",
-          style="height: 40px; width: 180px",
-          no-caps,
-          padding="8px 24px",
-          @click="saveClient",
-        )
 </template>
 
 <script>
@@ -107,6 +102,7 @@ import TheNotificationProvider from "@/components/Notifications/TheNotificationP
 import { addNotification } from "@/components/Notifications/notificationContext";
 import * as moment from "moment";
 import { v_model } from "@/shared/mixins/v-model";
+import BaseButton from "@/components/base/BaseButton.vue";
 
 export default {
   name: "BaseClientFormClient",
@@ -119,6 +115,7 @@ export default {
     BaseModal,
     addImageIcon,
     TheNotificationProvider,
+    BaseButton,
   },
   props: {
     setUpdatedClients: Function,

src/components/base/BaseInputFullName.vue

@@ -33,7 +33,14 @@
             )
             .avatar.flex.absolute.items-center.gap-x-6
               img.avatar.object-cover(for="image-upload", :src="image", v-if="image")
-              q-btn(round, color="primary", @click="closeAddImage", icon="app:icon-ok")
+              base-button(
+                width="48px",
+                @click="closeAddImage",
+                size="L",
+                round,
+                padding="2px 0 0 0"
+              )
+                q-icon(name="app:ok", size="20px")
     base-input.w-full(v-model="infoClient.basic.full_name", placeholder="ФИО пациента*", outlined)
 </template>
 
@@ -41,10 +48,11 @@
 import BaseModal from "./BaseModal.vue";
 import BaseInput from "./BaseInput.vue";
 import addImageIcon from "@/assets/icons/photo.svg";
+import BaseButton from "@/components/base/BaseButton.vue";
 
 export default {
   name: "BaseInputFullName",
-  components: { BaseModal, BaseInput },
+  components: { BaseModal, BaseInput, BaseButton },
   props: { infoClient: Object },
   data() {
     return {

src/components/base/BaseTimeModal.vue

@@ -10,23 +10,15 @@
             img(:src="lockIcon")
     .flex.justify-between.items-center
       .flex.gap-2
-        q-btn(
+        base-button(
-          color="primary",
+          type="secondary",
-          outline,
+          width="108px",
-          size="16px",
-          no-caps,
           label="Отмена",
-          :style="{width: '108px', height: '40px'}",
+          @click="closeModalTime",
-          padding="0",
-          @click="closeModalTime"
         )
-        q-btn(
+        base-button(
-          color="primary",
+          width="132px",
-          size="16px",
+          label="Сохранить",
-          no-caps,
-          label="Сохранить"
-          :style="{width: '132px', height: '40px'}",
-          padding="0",
           @click="closeModalTime"
         )
       .text.font-bold.text-6xl {{`${times.from} - ${times.to}`}}
@@ -34,10 +26,12 @@
 
 <script>
 import lockIcon from "@/assets/icons/locked.svg";
+import BaseButton from "@/components/base/BaseButton.vue";
 
 export default {
   name: "BaseTimeModal",
   props: { times: Object, closeModalTime: Function },
+  components: { BaseButton },
   data() {
     return { lockIcon, select: false };
   },

src/components/base/BaseUploadPhoto.vue

@@ -14,22 +14,25 @@
       )
       .avatar.flex.absolute.items-center.gap-x-6
         img.avatar.object-cover(for="image-upload", :src="image" )
-        q-btn(
+        base-button(
-          round,
+          width="48px",
-          color="primary",
           @click="confirm",
-          icon="app:icon-ok"
+          size="L",
+          round,
+          padding="2px 0 0 0"
         )
+          q-icon(name="app:ok", size="20px")
 </template>
 
 <script>
 import BaseInput from "./BaseInput.vue";
 import addImageIcon from "@/assets/icons/photo.svg";
 import { v_model } from "@/shared/mixins/v-model";
+import BaseButton from "@/components/base/BaseButton.vue";
 
 export default {
   name: "BaseModalUploadPhoto",
-  components: { BaseInput, addImageIcon },
+  components: { BaseInput, addImageIcon, BaseButton },
   data() {
     return {
       image: addImageIcon,

src/pages/clients/components/ClientsTableHat.vue

@@ -12,50 +12,45 @@
         )
           .flex.items-center.cursor-pointer
             .icon-search
-      q-btn(
+      base-button(
         v-if="createdClientName === ''",
         @click="searchLastName",
-        color="primary",
         label="Поиск",
-        padding="8px 24px",
+        width="96px"
-        no-caps
       )
-      q-btn(
+      base-button(
         v-if="searchClient.length > 0",
-        outline,
+        type="secondary",
         @click="resetLastName",
-        color="primary",
         label="Сбросить",
-        padding="8px 24px",
+        width="124px"
-        no-caps
       )
     //- clients-table-header-actions(v-if="!!isOpenActions", :is-selected-one="isOpenActions===1")
     .flex.w-fit.h-10.gap-x-2
-      q-btn(
+      base-button(
-        outline,
+        type="secondary",
-        icon="icon-download",
+        width="64px"
-        color="primary",
-        size="12px",
-        padding="8px 24px",
       )
-      q-btn(
+        q-icon(name="app:export", size="16px")
+      base-button(
         @click="openForm",
-        color="primary",
+        width="144px"
-        icon="add",
-        label="Создать",
-        padding="6px 24px",
-        no-caps
       )
+        q-icon(name="app:plus", size="12px", left)
+        span Создать
 </template>
 
 <script>
 import ClientsTableHeaderActions from "@/pages/clients/components/ClientsTableHeaderActions";
 import BaseInput from "@/components/base/BaseInput";
+import BaseButton from "@/components/base/BaseButton.vue";
+
 export default {
   name: "ClientsTableHat",
   components: {
     BaseInput,
     ClientsTableHeaderActions,
+    BaseButton,
   },
   props: {
     openForm: Function,
@@ -100,4 +95,6 @@ export default {
 <style lang="sass" scoped>
 .input
   min-width: 280px
+.on-left
+  margin-right: 10px
 </style>

src/pages/newCalendar/components/CalendarOpenSidebar.vue

@@ -14,7 +14,7 @@
         @click="createForm",
       )
         q-icon(name="app:plus", size="12px", left)
-        span Создать событие
+        span Создать запись
     .flex.flex-col.gap-y-1
       q-expansion-item.expansion.font-bold.text-xm(
         v-for="(elem, index) in patientList",

src/pages/newCalendar/components/CalendarSidebar.vue

@@ -8,11 +8,11 @@
         style="color: var(--font-grey-color); background: var(--bg-light-grey)"
       )
         img(:src="arrow")
-    .button.flex    
+    .button.flex
-      q-btn(color="primary", dense, padding="14px", @click="createForm")
+      base-button(width="40px", @click="createForm")
-        q-icon(name="app:icon-plus", size="12px")
+        q-icon(name="app:plus", size="12px")
     .button.flex.relative.btn-sidebar(v-for="svg in patientData.arrSvg")
-      q-btn(
+      q-btn.blue-hover(
         v-click-outside="hideActive",
         @click="()=>clickButton(svg.name)",
         dense,
@@ -269,10 +269,10 @@ export default {
   border-radius: 4px
   color: var(--default-white)
 
-.q-btn
+// .q-btn .blue-hover
-  transition: color 0.3s cubic-bezier(0.25,0.8,0.5,1), background-color 0.3s cubic-bezier(0.25,0.8,0.5,1)
+//   transition: color 0.3s cubic-bezier(0.25,0.8,0.5,1), background-color 0.3s cubic-bezier(0.25,0.8,0.5,1)
-  &:hover
+//   &:hover
-    background: var(--bg-light-blue-color)
+//     background: var(--bg-light-blue-color)
 
 .gradient
   width: 232px

src/pages/newCalendar/components/RecordCreationForm.vue

@@ -51,25 +51,8 @@
         :networks-list="getNetworksList",
       )
   .footer.flex.gap-2
-    q-btn(
+    base-button(type="secondary", label="Отменить", width="126px", @click="closeForm")
-      color="primary",
+    base-button(width="168px", label="Создать запись", @click="closeForm")
-      outline,
-      size="16px",
-      no-caps,
-      label="Отменить"
-      :style="{width: '126px', height: '40px'}",
-      padding="0",
-      @click="closeForm"
-    )
-    q-btn(
-      color="primary",
-      size="16px",
-      no-caps,
-      label="Создать запись"
-      :style="{width: '174px', height: '40px'}",
-      padding="0",
-      @click="closeForm"
-    )
 </template>
 
 <script>
@@ -85,6 +68,7 @@ import BaseInputFullName from "@/components/base/BaseInputFullName.vue";
 import { patientData } from "@/pages/newCalendar/utils/calendarConfig.js";
 import HeaderRecordForm from "./HeaderRecordForm.vue";
 import BaseCalendar from "@/components/base/Calendar/BaseCalendar.vue";
+import BaseButton from "@/components/base/BaseButton.vue";
 
 export default {
   name: "RecordCreationForm",
@@ -97,6 +81,7 @@ export default {
     BaseInputFullName,
     BaseCalendar,
     HeaderRecordForm,
+    BaseButton,
   },
   props: { isShowForm: Boolean, closeForm: Function },
   mixins: [v_model],

src/pages/newMedicalCard/components/ConfidantForms/ConfidantForm.vue

@@ -44,13 +44,10 @@
                         :rule-input="ruleInputNetwork"
                       )
                       .w-fit
-                        q-btn(
+                        base-button(
-                          color="primary",
                           label="Добавить",
-                          type="button"
-                          no-caps,
                           @click="saveNetwork",
-                          padding="8px 24px"
+                          width="126px"
                         )
             .flex.w-full.relative(v-else)
               q-menu.h-fit(

src/pages/newMedicalCard/components/HealthState/HealthStateCreateModal.vue

@@ -36,22 +36,16 @@
               :text-color="!dataEntry.comment ? 'var(--font-grey-color)' : 'var(--font-dark-blue-color)'"
               )
       .flex.gap-x-2.text-smm
-        q-btn(
+        base-button(
-          color="primary",
+          width="126px",
-          outline,
+          type="secondary",
-          size="16px",
+          @click="closeModal",
-          no-caps,
+          label="Отменить"
-          label="Отменить",
-          padding="10px 24px 10px 24px",
-          @click="closeModal"
         )
-        q-btn(
+        base-button(
-          color="primary",
+          width="126px",
-          size="16px",
-          no-caps,
           label="Сохранить",
-          padding="10px 24px 10px 24px",
+          @click="createNewEntry",
-          @click="createNewEntry"
         )
 </template>
 
@@ -62,10 +56,11 @@ import BaseDownload from "@/components/base/BaseDownload.vue";
 import { mapActions } from "vuex";
 import { v_model } from "@/shared/mixins/v-model";
 import moment from "moment";
+import BaseButton from "@/components/base/BaseButton.vue";
 
 export default {
   name: "HealthStateCreateModal",
-  components: { BaseModal, BaseDownload, BaseInput },
+  components: { BaseModal, BaseDownload, BaseInput, BaseButton },
   mixins: [v_model],
   data() {
     return {

src/pages/newMedicalCard/components/HealthState/HealthStateHeader.vue

@@ -1,11 +1,10 @@
 <template lang="pug">
   .header.flex.w-full.rounded.justify-between.items-center.py-5.pl-6.pr-5
     .span.text-2xl.font-bold Карты здоровья
-    q-btn(
+    base-button(
-      @click="() => {isOpenModal = true}"
+      width="206px",
-      color="primary",
+      @click="() => {isOpenModal = true}",
-      no-caps
+    )
-      )
       q-icon.mr-2(size="20px" name="add")
       span Добавить запись
     health-state-create-modal(v-model="isOpenModal")
@@ -13,11 +12,13 @@
 
 <script>
 import HealthStateCreateModal from "@/pages/newMedicalCard/components/HealthState/HealthStateCreateModal.vue";
+import BaseButton from "@/components/base/BaseButton.vue";
 
 export default {
   name: "HealthStateHeader",
   components: {
     HealthStateCreateModal,
+    BaseButton,
   },
   data() {
     return {

src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DataForm.vue

@@ -5,7 +5,6 @@
     :open-edit="openCard",
     :cancel="closeCard",
     :tag="fillInspection || change",
-    template
   )
     .protocol-body.flex.flex-col
       .flex.items-center.gap-x-11px(:class="{'open-header': change || fillInspection}")
@@ -61,8 +60,11 @@
                 )
                 .name.flex.items-center.font-medium.text-smm {{ name }}
           .flex.h-10.w-10.absolute.right-4.bottom-4
-            q-btn(@click="showModal = true", color="primary", dense, padding="4px 12px")
+            base-button(
-              q-icon(name="app:icon-plus", size="17px")
+              width="40px",
+              @click="showModal = true",
+            )
+              q-icon(name="app:plus", size="16px")
         base-modal(v-model="showModal", title="Создание тега", modal-padding)
           tag-creation-form(:close-modal="closeModal", :create-tag="createTag")
     .flex.gap-x-20.w-full(v-if="change || fillInspection")

src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormTag.vue

@@ -48,14 +48,17 @@
                 )
                 .name.flex.items-center.font-medium.text-smm {{ name }}
           .flex.h-10.w-10.absolute.right-4.bottom-4
-            q-btn(@click="showModal = true", color="primary", dense, padding="4px 12px")
+            base-button(
-              q-icon(name="app:icon-plus", size="17px")
+              width="40px",
+              @click="showModal = true",
+            )
+              q-icon(name="app:plus", size="16px")
         base-modal(v-model="showModal", title="Создание тега", modal-padding)
           tag-creation-form(:close-modal="closeModal", :create-tag="createTag")
     .flex(v-if="data.title === 'Осмотр полости рта' && (fillInspection || change)", :style="{color: 'var(--btn-blue-color)'}")
-      q-btn(no-caps, flat padding="2px 4px")
+      q-btn(no-caps, flat, padding="2px 4px")
-        q-icon(left, name="app:plus", size="11px")
+        q-icon(left, name="app:plus", size="12px")
-        span.text-smm.font-medium Добавить описание зуба
+        span.font-medium Добавить описание зуба
 </template>
 
 <script>
@@ -203,4 +206,11 @@ export default {
 
 .q-checkbox :deep(.q-checkbox__inner:before)
   background: none !important
+
+.q-btn :deep(.q-focus-helper)
+  display: none
+.q-btn :deep(.q-ripple)
+  display: none
+.on-left
+  margin-right: 8px
 </style>

src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/TagCreationForm.vue

@@ -31,34 +31,28 @@
       .flex.flex-col(class="gap-x-1.5")
         base-input(v-model="model.tag", label="Текст тега", placeholder="Введите тег", outlined)
     .buttons-group.flex
-      q-btn(
+      base-button(
-        @click="closeModal",
+        type="secondary",
-        color="primary",
+        width="146px"
-        outline,
-        size="16px",
-        no-caps,
         label="Отменить",
-        :style="{width: '100%', height: '40px'}",
+        padding="0",
-        padding="10px 24px"
+        @click="closeModal"
       )
-      q-btn(
+      base-button(
+        width="146px",
+        label="Создать",
         :disable="!(model.category && model.tag)",
         @click="createTag(model)",
-        color="primary",
-        size="16px",
-        no-caps,
-        label="Создать"
-        :style="{width: '100%', height: '40px'}",
-        padding="10px 24px"
       )
 </template>
 
 <script>
 import BaseInput from "@/components/base/BaseInput.vue";
+import BaseButton from "@/components/base/BaseButton.vue";
 
 export default {
   name: "TagCreationForm",
-  components: { BaseInput },
+  components: { BaseInput, BaseButton },
   props: {
     closeModal: Function,
     createTag: Function,

src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolCreateModal.vue

@@ -33,23 +33,15 @@
           span.text-sm.color-blue.line-height.mb-2px {{ employeeName }}
           span.color-grey.line-height.text-sm {{ userData?.job_title ? userData?.job_title : "Терапевт" }}
     .flex.gap-2.mt-8
-      q-btn(
+      base-button(
-        color="primary",
+        type="secondary",
-        outline,
+        label="Отменить",
-        size="16px",
+        width="126px",
-        no-caps,
-        label="Отменить"
-        :style="{width: '126px', height: '40px'}",
-        padding="0",
         @click="changeShownCreateModal(false)"
       )
-      q-btn(
+      base-button(
-        color="primary",
+        width="174px",
-        size="16px",
+        label="Создать осмотр",
-        no-caps,
-        label="Создать осмотр"
-        :style="{width: '174px', height: '40px'}",
-        padding="0",
         @click="saveProtocol"
       )
 </template>
@@ -61,6 +53,7 @@ import BaseInputDate from "@/components/base/BaseInputDate.vue";
 import BaseInputTime from "@/components/base/BaseInputTime.vue";
 import * as moment from "moment/moment";
 import { mapGetters, mapActions } from "vuex";
+import BaseButton from "@/components/base/BaseButton.vue";
 export default {
   name: "MedicalProtocolCreateModal",
   components: {
@@ -68,6 +61,7 @@ export default {
     BaseAvatar,
     BaseInputDate,
     BaseInputTime,
+    BaseButton,
   },
   props: {
     changeShownCreateModal: Function,

src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolsList.vue

@@ -2,16 +2,12 @@
   .list-wrapper.h-full.flex.gap-y-1.flex-col
     .background.h-72px.flex.w-full.justify-between.items-center.p-4.rounded
       span.text-2xl.font-bold Осмотры
-      q-btn(
+      base-button(
+        width="40px",
+        @click="changeShownCreateModal(true)",
         v-if="createInspection"
-        color="primary",
-        size="16px",
-        no-caps,
-        icon="add",
-        :style="{width: '40px', height: '40px'}"
-        padding="0",
-        @click="changeShownCreateModal(true)"
       )
+        q-icon(name="app:plus", size="18px")
     .p-4.rounded.background.list.flex.flex-col.gap-y-6
       .flex
         base-select(
@@ -50,6 +46,7 @@ import BaseAvatar from "@/components/base/BaseAvatar.vue";
 import MedicalProtocolCard from "@/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolCard.vue";
 import BaseModal from "@/components/base/BaseModal.vue";
 import MedicalProtocolCreateModal from "@/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolCreateModal.vue";
+import BaseButton from "@/components/base/BaseButton.vue";
 import { mapState } from "vuex";
 export default {
   name: "MedicalProtocolsList",
@@ -59,6 +56,7 @@ export default {
     MedicalProtocolCard,
     BaseModal,
     MedicalProtocolCreateModal,
+    BaseButton,
   },
   props: {
     openInspection: Function,

src/pages/newMedicalCard/components/MedicalFormWrapper.vue

@@ -29,11 +29,7 @@
             v-if="!template",
             :style="{color: 'var(--btn-blue-color)'}"
             )
-            q-btn(
+            base-button(type="secondary", width="142px")
-              no-caps,
-              outline,
-              padding="10px 24px"
-              )
               img.mr-2(:src="layers")
               span.text-smm.font-medium Шаблоны
         .flex.w-fit.gap-10px.items-center.delete-button.cursor-pointer(
@@ -44,25 +40,17 @@
           span.text-smm.font-medium {{ titleDelete }}
       slot
       .flex.h-fit.w-fit.gap-2(v-if="isEdit && buttonsPresence")
-        q-btn(
+        base-button(
-          color="primary",
+          type="secondary"
-          outline,
-          size="16px",
-          no-caps,
           label="Отменить",
-          :style="{width: '126px', height: '40px'}",
+          width="126px",
-          padding="0",
           @click="cancel"
         )
-        q-btn(
+        base-button(
           v-if="isCheckChange",
-          color="primary",
+          width="222px",
-          size="16px",
-          no-caps,
           label="Сохранить изменения",
-          :style="{width: '222px', height: '40px'}",
+          @click="save",
-          padding="0",
-          @click="save"
         )
 </template>
 

src/pages/newMedicalCard/components/MedicalRemoveModal.vue

@@ -1,31 +1,29 @@
 <template lang="pug">
   .modal
-    .text.mt-4.mb-6.text-base Вы действительно хотите удалить медкарту?
+    .text.mt-4.mb-10.text-base Вы действительно хотите удалить медкарту?
     .flex.gap-x-3
-      q-btn(
+      base-button(
+        type="secondary",
         label="Отменить",
-        no-caps,
+        width="126px"
-        outline,
-        color="primary",
-        padding="10px 24px",
         @click="changeShownRemoveModal(false)"
       )
-      q-btn(
+      base-button(
+        type="remove",
         label="Удалить",
-        no-caps,
+        width="126px",
-        outline,
-        style="color: var(--border-red-color)",
-        padding="10px 24px",
         @click="removeMedicalCard"
       )
 </template>
 
 <script>
+import BaseButton from "@/components/base/BaseButton.vue";
 export default {
   name: "MedicalRemoveModal",
   props: {
     changeShownRemoveModal: Function,
   },
+  components: { BaseButton },
   data() {
     return {};
   },

src/pages/schedule/components/ScheduleHeader.vue

@@ -59,10 +59,11 @@
 <script>
 import * as moment from "moment";
 import BaseInput from "@/components/base/BaseInput.vue";
+import BaseButton from "@/components/base/BaseButton.vue";
 
 export default {
   name: "ScheduleHeader",
-  components: { BaseInput },
+  components: { BaseInput, BaseButton },
   props: {
     showTime: Boolean,
     startMonth: Object,

src/pages/schedule/components/ScheduleTable.vue

@@ -11,16 +11,8 @@
             size="18px",
             style="color: var(--font-dark-blue-color)"
           )
-      q-btn(
+      base-button(width="188px")
-        color="primary",
+        q-icon(name="app:plus", size="12px", left)
-        padding="8px 25px",
-        no-caps
-      )
-        q-icon(
-          name="app:icon-plus",
-          size="12px",
-          style="margin-right: 10px"
-        )
         span Создать смену
     schedule-table-header(
       :result="result",
@@ -54,6 +46,7 @@ import ScheduleTableSelect from "@/pages/schedule/components/ScheduleTableSelect
 import ScheduleBar from "@/pages/schedule/components/ScheduleBar.vue";
 import BaseSelect from "@/components/base/BaseSelect.vue";
 import BaseInput from "@/components/base/BaseInput.vue";
+import BaseButton from "@/components/base/BaseButton.vue";
 
 export default {
   name: "ScheduleTable",
@@ -64,6 +57,7 @@ export default {
     ScheduleBar,
     BaseInput,
     BaseSelect,
+    BaseButton,
   },
   props: {
     scheduleList: Array,
@@ -263,4 +257,7 @@ export default {
   border-radius: 4px
   width: 400px
   height: 500px
+
+.on-left
+  margin-right: 10px
 </style>