From 7458a1dd328caa34bad3b71f5ecd4dc2f20e7f89 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Wed, 12 Jul 2023 16:13:11 +0300
Subject: [PATCH] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=D0=B0=20=D0=B1=D0=B0=D0=B7=D0=BE=D0=B2=D1=8B=D0=B5=20?=
 =?UTF-8?q?=D0=BA=D0=BD=D0=BE=D0=BF=D0=BA=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/BaseButton.vue            | 11 +++++-
 src/components/base/BaseCategorySelection.vue | 22 ++++-------
 src/components/base/BaseClientFormCreate.vue  | 21 +++++-----
 src/components/base/BaseInputFullName.vue     | 12 +++++-
 src/components/base/BaseTimeModal.vue         | 24 +++++-------
 src/components/base/BaseUploadPhoto.vue       | 13 ++++---
 .../clients/components/ClientsTableHat.vue    | 39 +++++++++----------
 .../components/CalendarOpenSidebar.vue        |  2 +-
 .../components/CalendarSidebar.vue            | 16 ++++----
 .../components/RecordCreationForm.vue         | 23 ++---------
 .../ConfidantForms/ConfidantForm.vue          |  7 +---
 .../HealthState/HealthStateCreateModal.vue    | 25 +++++-------
 .../HealthState/HealthStateHeader.vue         | 11 +++---
 .../Forms/DataForm.vue                        |  8 ++--
 .../Forms/MedicalFormTag.vue                  | 20 +++++++---
 .../Forms/TagCreationForm.vue                 | 26 +++++--------
 .../MedicalProtocolCreateModal.vue            | 24 +++++-------
 .../MedicalProtocolsList.vue                  | 14 +++----
 .../components/MedicalFormWrapper.vue         | 26 ++++---------
 .../components/MedicalRemoveModal.vue         | 20 +++++-----
 .../schedule/components/ScheduleHeader.vue    |  3 +-
 .../schedule/components/ScheduleTable.vue     | 17 ++++----
 22 files changed, 171 insertions(+), 213 deletions(-)

diff --git a/src/components/base/BaseButton.vue b/src/components/base/BaseButton.vue
index e60aed6..9ff607c 100644
--- a/src/components/base/BaseButton.vue
+++ b/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";
     },
diff --git a/src/components/base/BaseCategorySelection.vue b/src/components/base/BaseCategorySelection.vue
index 2c60608..127ff8c 100644
--- a/src/components/base/BaseCategorySelection.vue
+++ b/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(
-          color="primary",
-          outline,
-          size="16px",
-          no-caps,
-          label="Отменить",
-          :style="{width: '126px', height: '40px'}",
-          padding="0",
+        base-button(
+          type="secondary",
+          label="Сбросить",
+          width="146px",
           @click="closeModalCategories"
         )
-        q-btn(
+        base-button(
           v-if="selected[0]?.id",
-          color="primary",
-          size="16px",
-          no-caps,
-          label="Сохранить изменения",
-          :style="{width: '132px', height: '40px'}",
-          padding="0",
+          label="Сохранить",
+          width="146px",
           @click="saveCategories(selected[0])"
         )
     .right-side.flex.px-14.font-bold.relative
diff --git a/src/components/base/BaseClientFormCreate.vue b/src/components/base/BaseClientFormCreate.vue
index 14861a1..ef4ca01 100644
--- a/src/components/base/BaseClientFormCreate.vue
+++ b/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(
-                      round,
-                      color="primary",
+                    base-button(
+                      width="48px",
                       @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(
-          label="Создать клиента",
-          color="primary",
-          style="height: 40px; width: 180px",
-          no-caps,
-          padding="8px 24px",
-          @click="saveClient",
-        )
+        base-button(label="Создать клиента", width="180px", @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,
diff --git a/src/components/base/BaseInputFullName.vue b/src/components/base/BaseInputFullName.vue
index d531812..e60278c 100644
--- a/src/components/base/BaseInputFullName.vue
+++ b/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 {
diff --git a/src/components/base/BaseTimeModal.vue b/src/components/base/BaseTimeModal.vue
index 559ae43..089e4b6 100644
--- a/src/components/base/BaseTimeModal.vue
+++ b/src/components/base/BaseTimeModal.vue
@@ -10,23 +10,15 @@
             img(:src="lockIcon")
     .flex.justify-between.items-center
       .flex.gap-2
-        q-btn(
-          color="primary",
-          outline,
-          size="16px",
-          no-caps,
+        base-button(
+          type="secondary",
+          width="108px",
           label="Отмена",
-          :style="{width: '108px', height: '40px'}",
-          padding="0",
-          @click="closeModalTime"
+          @click="closeModalTime",
         )
-        q-btn(
-          color="primary",
-          size="16px",
-          no-caps,
-          label="Сохранить"
-          :style="{width: '132px', height: '40px'}",
-          padding="0",
+        base-button(
+          width="132px",
+          label="Сохранить",
           @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 };
   },
diff --git a/src/components/base/BaseUploadPhoto.vue b/src/components/base/BaseUploadPhoto.vue
index 1aed717..088ca72 100644
--- a/src/components/base/BaseUploadPhoto.vue
+++ b/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(
-          round,
-          color="primary",
+        base-button(
+          width="48px",
           @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,
diff --git a/src/pages/clients/components/ClientsTableHat.vue b/src/pages/clients/components/ClientsTableHat.vue
index 1de896b..48e0f73 100644
--- a/src/pages/clients/components/ClientsTableHat.vue
+++ b/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",
-        no-caps
+        width="96px"
       )
-      q-btn(
+      base-button(
         v-if="searchClient.length > 0",
-        outline,
+        type="secondary",
         @click="resetLastName",
-        color="primary",
         label="Сбросить",
-        padding="8px 24px",
-        no-caps
+        width="124px"
       )
     //- clients-table-header-actions(v-if="!!isOpenActions", :is-selected-one="isOpenActions===1")
     .flex.w-fit.h-10.gap-x-2
-      q-btn(
-        outline,
-        icon="icon-download",
-        color="primary",
-        size="12px",
-        padding="8px 24px",
+      base-button(
+        type="secondary",
+        width="64px"
       )
-      q-btn(
+        q-icon(name="app:export", size="16px")
+      base-button(
         @click="openForm",
-        color="primary",
-        icon="add",
-        label="Создать",
-        padding="6px 24px",
-        no-caps
+        width="144px"
       )
+        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>
diff --git a/src/pages/newCalendar/components/CalendarOpenSidebar.vue b/src/pages/newCalendar/components/CalendarOpenSidebar.vue
index 2155c5c..0a19867 100644
--- a/src/pages/newCalendar/components/CalendarOpenSidebar.vue
+++ b/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",
diff --git a/src/pages/newCalendar/components/CalendarSidebar.vue b/src/pages/newCalendar/components/CalendarSidebar.vue
index c8a4a45..a905c32 100644
--- a/src/pages/newCalendar/components/CalendarSidebar.vue
+++ b/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    
-      q-btn(color="primary", dense, padding="14px", @click="createForm")
-        q-icon(name="app:icon-plus", size="12px")
+    .button.flex
+      base-button(width="40px", @click="createForm")
+        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
-  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
-    background: var(--bg-light-blue-color)
+// .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)
+//   &:hover
+//     background: var(--bg-light-blue-color)
 
 .gradient
   width: 232px
diff --git a/src/pages/newCalendar/components/RecordCreationForm.vue b/src/pages/newCalendar/components/RecordCreationForm.vue
index 273737e..a0b017e 100644
--- a/src/pages/newCalendar/components/RecordCreationForm.vue
+++ b/src/pages/newCalendar/components/RecordCreationForm.vue
@@ -51,25 +51,8 @@
         :networks-list="getNetworksList",
       )
   .footer.flex.gap-2
-    q-btn(
-      color="primary",
-      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"
-    )
+    base-button(type="secondary", label="Отменить", width="126px", @click="closeForm")
+    base-button(width="168px", label="Создать запись", @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],
diff --git a/src/pages/newMedicalCard/components/ConfidantForms/ConfidantForm.vue b/src/pages/newMedicalCard/components/ConfidantForms/ConfidantForm.vue
index aa83182..21d1ee0 100644
--- a/src/pages/newMedicalCard/components/ConfidantForms/ConfidantForm.vue
+++ b/src/pages/newMedicalCard/components/ConfidantForms/ConfidantForm.vue
@@ -44,13 +44,10 @@
                         :rule-input="ruleInputNetwork"
                       )
                       .w-fit
-                        q-btn(
-                          color="primary",
+                        base-button(
                           label="Добавить",
-                          type="button"
-                          no-caps,
                           @click="saveNetwork",
-                          padding="8px 24px"
+                          width="126px"
                         )
             .flex.w-full.relative(v-else)
               q-menu.h-fit(
diff --git a/src/pages/newMedicalCard/components/HealthState/HealthStateCreateModal.vue b/src/pages/newMedicalCard/components/HealthState/HealthStateCreateModal.vue
index 96097c0..0ff0e89 100644
--- a/src/pages/newMedicalCard/components/HealthState/HealthStateCreateModal.vue
+++ b/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(
-          color="primary",
-          outline,
-          size="16px",
-          no-caps,
-          label="Отменить",
-          padding="10px 24px 10px 24px",
-          @click="closeModal"
+        base-button(
+          width="126px",
+          type="secondary",
+          @click="closeModal",
+          label="Отменить"
         )
-        q-btn(
-          color="primary",
-          size="16px",
-          no-caps,
+        base-button(
+          width="126px",
           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 {
diff --git a/src/pages/newMedicalCard/components/HealthState/HealthStateHeader.vue b/src/pages/newMedicalCard/components/HealthState/HealthStateHeader.vue
index 6b082a5..ab8dcfd 100644
--- a/src/pages/newMedicalCard/components/HealthState/HealthStateHeader.vue
+++ b/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(
-      @click="() => {isOpenModal = true}"
-      color="primary",
-      no-caps
-      )
+    base-button(
+      width="206px",
+      @click="() => {isOpenModal = true}",
+    )
       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 {
diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DataForm.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DataForm.vue
index a9605c6..2be6984 100644
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DataForm.vue
+++ b/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")
-              q-icon(name="app:icon-plus", size="17px")
+            base-button(
+              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")
diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormTag.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormTag.vue
index 99f02fc..e2acb48 100644
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormTag.vue
+++ b/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")
-              q-icon(name="app:icon-plus", size="17px")
+            base-button(
+              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-icon(left, name="app:plus", size="11px")
-        span.text-smm.font-medium Добавить описание зуба
+      q-btn(no-caps, flat, padding="2px 4px")
+        q-icon(left, name="app:plus", size="12px")
+        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>
diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/TagCreationForm.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/TagCreationForm.vue
index 4012b46..7365fa5 100644
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/TagCreationForm.vue
+++ b/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(
-        @click="closeModal",
-        color="primary",
-        outline,
-        size="16px",
-        no-caps,
+      base-button(
+        type="secondary",
+        width="146px"
         label="Отменить",
-        :style="{width: '100%', height: '40px'}",
-        padding="10px 24px"
+        padding="0",
+        @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,
diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolCreateModal.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolCreateModal.vue
index c75bd62..b1a6fc2 100644
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolCreateModal.vue
+++ b/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(
-        color="primary",
-        outline,
-        size="16px",
-        no-caps,
-        label="Отменить"
-        :style="{width: '126px', height: '40px'}",
-        padding="0",
+      base-button(
+        type="secondary",
+        label="Отменить",
+        width="126px",
         @click="changeShownCreateModal(false)"
       )
-      q-btn(
-        color="primary",
-        size="16px",
-        no-caps,
-        label="Создать осмотр"
-        :style="{width: '174px', height: '40px'}",
-        padding="0",
+      base-button(
+        width="174px",
+        label="Создать осмотр",
         @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,
diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolsList.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolsList.vue
index 181d092..c6d2e6c 100644
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolsList.vue
+++ b/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,
diff --git a/src/pages/newMedicalCard/components/MedicalFormWrapper.vue b/src/pages/newMedicalCard/components/MedicalFormWrapper.vue
index 32b5839..276d821 100644
--- a/src/pages/newMedicalCard/components/MedicalFormWrapper.vue
+++ b/src/pages/newMedicalCard/components/MedicalFormWrapper.vue
@@ -29,11 +29,7 @@
             v-if="!template",
             :style="{color: 'var(--btn-blue-color)'}"
             )
-            q-btn(
-              no-caps,
-              outline,
-              padding="10px 24px"
-              )
+            base-button(type="secondary", width="142px")
               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(
-          color="primary",
-          outline,
-          size="16px",
-          no-caps,
+        base-button(
+          type="secondary"
           label="Отменить",
-          :style="{width: '126px', height: '40px'}",
-          padding="0",
+          width="126px",
           @click="cancel"
         )
-        q-btn(
+        base-button(
           v-if="isCheckChange",
-          color="primary",
-          size="16px",
-          no-caps,
+          width="222px",
           label="Сохранить изменения",
-          :style="{width: '222px', height: '40px'}",
-          padding="0",
-          @click="save"
+          @click="save",
         )
 </template>
 
diff --git a/src/pages/newMedicalCard/components/MedicalRemoveModal.vue b/src/pages/newMedicalCard/components/MedicalRemoveModal.vue
index 5131880..722d66e 100644
--- a/src/pages/newMedicalCard/components/MedicalRemoveModal.vue
+++ b/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,
-        outline,
-        color="primary",
-        padding="10px 24px",
+        width="126px"
         @click="changeShownRemoveModal(false)"
       )
-      q-btn(
+      base-button(
+        type="remove",
         label="Удалить",
-        no-caps,
-        outline,
-        style="color: var(--border-red-color)",
-        padding="10px 24px",
+        width="126px",
         @click="removeMedicalCard"
       )
 </template>
 
 <script>
+import BaseButton from "@/components/base/BaseButton.vue";
 export default {
   name: "MedicalRemoveModal",
   props: {
     changeShownRemoveModal: Function,
   },
+  components: { BaseButton },
   data() {
     return {};
   },
diff --git a/src/pages/schedule/components/ScheduleHeader.vue b/src/pages/schedule/components/ScheduleHeader.vue
index 3d6c83b..6110b66 100644
--- a/src/pages/schedule/components/ScheduleHeader.vue
+++ b/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,
diff --git a/src/pages/schedule/components/ScheduleTable.vue b/src/pages/schedule/components/ScheduleTable.vue
index 85dccdb..8a86857 100644
--- a/src/pages/schedule/components/ScheduleTable.vue
+++ b/src/pages/schedule/components/ScheduleTable.vue
@@ -11,16 +11,8 @@
             size="18px",
             style="color: var(--font-dark-blue-color)"
           )
-      q-btn(
-        color="primary",
-        padding="8px 25px",
-        no-caps
-      )
-        q-icon(
-          name="app:icon-plus",
-          size="12px",
-          style="margin-right: 10px"
-        )
+      base-button(width="188px")
+        q-icon(name="app:plus", size="12px", left)
         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>