Merge branch 'ASTRA-157' into 'master'

WIP Сделала BaseButton

See merge request andrusyakka/urban-couscous!466

src/assets/sass/variables.sass

@@ -12,16 +12,27 @@
   --font-black-color-1: rgba(9, 10, 21, 0.5)
   --icon-light-blue: #d7d9ff
   --btn-blue-color: #4772f2
-  --btn-blue-sec-color: #c6d2f6
   --btn-blue-color-hover: #7e9cf6
-  --btn-blue-sec-color-hover: #a0b4f0
   --btn-blue-color-disabled: #c8d5fb
+  --btn-blue-sec-border-color: rgba(71, 114, 242, 0.35)
+  --btn-blue-sec-color-hover: rgba(71, 114, 242, 0.08)
+  --btn-blue-sec-color-active: rgba(71, 114, 242, 0.16)
+  --btn-blue-sec-border-color-disabled: #e5ebfd
+  --btn-blue-sec-color-disabled: #afc0f2
   --btn-blue-color-1: rgba(65, 105, 225, 0.3)
   --btn-blue-color-2: rgba(65, 105, 225, 0.5)
   --btn-blue-color-3: rgba(65, 105, 225, 0.2)
   --btn-blue-color-4: rgba(65, 105, 225, 0.8)
   --btn-blue-color-5: rgba(65, 105, 225, 0.4)
+  --btn-mini-color: rgba(65, 105, 225, 0.2)
+  --btn-mini-color-active: rgba(60, 217, 75, 0.2)
+  --border-red-color: #ff6565
+  --btn-red-border-color: rgba(255, 101, 101, 0.35)
+  --btn-red-color-hover: rgba(255, 101, 101, 0.08)
+  --btn-red-color-active: rgba(255, 101, 101, 0.16)
   --bg-btn-icons-color: rgba(215, 217, 255, 0.6)
+  --btn-red-border-color-disabled: rgba(255, 201, 201, 0.3)
+  --btn-red-color-disabled: rgba(255, 101, 101, 0.35)
   --font-grey-color: #9294a7
   --font-grey-color-0: #85858b
   --font-dark-grey-color: #7a88a8
@@ -67,7 +78,6 @@
   --border-light-grey-color-1: rgba(211, 212, 220, 0.5)
   --bg-white-color-0: rgba(255, 255, 255, 0.3)
   --bg-white-color-1: rgba(255, 255, 255, 0.5)
-  --border-red-color: #ff6565
   --btn-grey-color: #e8e8f3
   --pagination-item-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%)
   --pagination-current-item-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%)

src/components/TheHeader.vue

@@ -7,52 +7,42 @@
         @click="redirectHomePage"
       )
       header-inputs
-    .flex.ml-auto
+    .flex.ml-auto.items-center.gap-x-8
-      q-btn.mr-9(
+      base-button(
-        color="primary",
+        type="secondary",
-        outline,
+        width="80px",
-        dense,
+        no-padding,
-        padding="4px 22px",
         @click="openForm"
       )
-        q-icon(
+        q-icon(name="app:plus", size="12px")
-          name="app:icon-plus",
+        q-icon(name="app:person", size="20px", right)
-          size="10px",
-          style="margin-right: 4px",
-        )
-        q-icon(
-          name="app:icon-person",
-          size="18px",
-          style="margin-left: 4px"
-        )
       base-client-form-create(
         v-model="isOpenFormInternal",
         :set-updated-clients="setUpdatedClients",
         :write-created-client-id="writeCreatedClientId",
       )
-      q-btn.mr-8(
+      q-btn(
         flat,
         dense,
-        style="color: var(--font-dark-blue-color)",
+        :style="{color: 'var(--font-dark-blue-color)', 'min-width': '24px', 'min-height': '24px'}",
-        padding="4px 8px",
-        icon="app:icon-bell",
-        size="18px",
         round,
       )
+        q-icon(name="app:icon-bell", size="20px")
       .flex.justify-centflexer.items-center.relative
-        base-avatar.mr-2(:size="36", :color="userData?.color", v-if="!userData?.photo") {{changeName}}       
-        base-avatar.mr-2(:size="32", v-else)
-          img.h-full.object-cover(:src="url + userData?.photo", alt="Avatar")
         q-btn(
-          @click="openPopup"
+          @click="openPopup",
-          flat
+          flat,
-          icon="app:icon-down-arrow",
+          padding="0",
-          style="color: var(--font-dark-blue-color)",
+          style="color: var(--font-grey-color)"
-          size="10px",
-          padding="4px 2px 2px 2px"
-          dense,
         )
-          q-menu(style="margin-top: 19px !important")
+          base-avatar(:size="36", :color="userData?.color", v-if="!userData?.photo") {{changeName}}       
+          base-avatar(:size="32", v-else)
+            img.h-full.object-cover(:src="url + userData?.photo", alt="Avatar")
+          .h-6.w-6.flex.items-center.justify-center.ml-2
+            q-icon(name="app:icon-down-arrow", size="12px")
+          q-menu(
+            :offset="[60, 6]"
+          )
             .menu.p-4
               .text-popup.flex.cursor-pointer.pl-2(@click="logout", v-close-popup) Выйти
 </template>
@@ -64,6 +54,7 @@ import HeaderInputs from "./HeaderInputs.vue";
 import BaseAvatar from "@/components/base/BaseAvatar";
 import BasePopup from "@/components/base/BasePopup.vue";
 import BaseClientFormCreate from "@/components/base/BaseClientFormCreate";
+import BaseButton from "@/components/base/BaseButton.vue";
 export default {
   name: "TheHeader",
   components: {
@@ -71,6 +62,7 @@ export default {
     BaseAvatar,
     BasePopup,
     BaseClientFormCreate,
+    BaseButton,
   },
   props: {
     url: String,
@@ -162,4 +154,10 @@ export default {
   max-width: 160px !important
   border-radius: 4px
   background-color: var(--default-white)
+.on-right
+  margin-left: 8px
+.q-btn :deep(.q-ripple)
+  display: none
+.q-btn :deep(.q-focus-helper)
+  display: none
 </style>

src/components/base/BaseButton.vue

@@ -1,180 +1,123 @@
 <template lang="pug">
-  button.base-button.text-base(
+  q-btn(
-    type="button",
+    :label="miniSize || round ? '' : label",
-    :disabled="disabled",
+    no-caps, 
-    :class="{'rounded': rounded, 'outlined': outlined, 'outlined-red': outlinedRed, 'secondary': secondary, 'confirm': confirm, 'added': added, 'added-border-none': addedBorderNone}"
+    :class="btnClass"
-    :style="{height: size + 'px', minWidth: size + 'px'}"
+    :style="{width: miniSize ? '40px' : width, 'min-width': (miniSize || round) && '0px', ...btnStyle}",
+    :round="miniSize || round",
+    :padding="computedPadding",
+    :disable="disable"
   )
-    .button-container
+    q-icon(v-if="miniSize", name="app:ok", size="20px")
-      span.icon-container(
+    slot(v-else)
-        :class="leftIcon",
-        v-if="leftIcon",
-        :style="{fontSize: iconLeftSize + 'px'}"
-      )
-      slot
-      .split(v-if="split")
-      span.icon-container(
-        :class="rightIcon",
-        v-if="rightIcon",
-        :style="{fontSize: iconRightSize + 'px', marginLeft: marginLeftIcon + 'px'}"
-      )
 </template>
 
 <script>
 export default {
   name: "BaseButton",
   props: {
-    confirm: Boolean,
+    type: {
-    outlined: Boolean,
-    outlinedRed: Boolean,
-    added: Boolean,
-    addedBorderNone: Boolean,
-    rounded: Boolean,
-    disabled: Boolean,
-    split: Boolean,
-    secondary: Boolean,
-    rightIcon: {
       type: String,
-      default: "",
+      default: "primary",
-    },
-    leftIcon: {
-      type: String,
-      default: "",
-    },
-    iconLeftSize: {
-      type: Number,
-      default: 10,
-    },
-    iconRightSize: {
-      type: Number,
-      default: 10,
     },
     size: {
-      type: Number,
+      type: String,
-      default: 24,
+      default: "M",
     },
-    marginLeftIcon: {
+    width: {
-      type: Number,
+      type: String,
-      default: 0,
+      default: "auto",
+    },
+    round: Boolean,
+    label: String,
+    disable: Boolean,
+    noPadding: Boolean,
+    padding: String,
+  },
+  computed: {
+    btnClass() {
+      return {
+        [this.type]: true,
+      };
+    },
+    btnStyle() {
+      if (this.size === "L")
+        return {
+          height: "48px",
+          "min-height": "48px",
+        };
+      return {
+        height: "40px",
+        "min-height": "40px",
+      };
+    },
+    miniSize() {
+      return this.type === "mini";
+    },
+    computedPadding() {
+      if (this.miniSize) return "2px 0 0 0";
+      if (this.noPadding) return "0";
+      if (this.padding) return this.padding;
+      return "";
     },
   },
 };
 </script>
 
 <style scoped lang="sass">
-.base-button
+.primary
-  padding: 8px 23px
+  color: white
   background-color: var(--btn-blue-color)
-  border: 1px solid var(--btn-blue-color)
+  &:hover
-  color: var(--default-white)
+    background-color: var(--btn-blue-color-hover)
-  display: flex
-  justify-content: center
-  align-items: center
-  border-radius: 4px
-  white-space: nowrap
   &:active
     background-color: var(--font-dark-blue-color)
-    border: 1px solid var(--font-dark-blue-color)
-  &:hover
-    background-color: var(--btn-blue-color-hover)
-    border: 1px solid var(--btn-blue-color-hover)
   &:disabled, &[disabled]
+    opacity: 1 !important
     background-color: var(--btn-blue-color-disabled)
-    border: 1px solid var(--btn-blue-color-disabled)
-  &:focus
-    outline: 0
-.rounded
-  padding: 0
-  border-radius: 50%
 
-.outlined
-  background-color: var(--default-white)
-  border: 1.5px solid var(--btn-blue-color)
-  color: var(--btn-blue-color)
-  &:active
-    background-color: var(--default-white)
-    border: 1.5px solid var(--font-dark-blue-color)
-    color: var(--font-dark-blue-color)
-  &:hover
-    background-color: var(--default-white)
-    border: 1.5px solid var(--btn-blue-color-hover)
-    color: var(--btn-blue-color-hover)
-  &:disabled, &[disabled]
-    background-color: var(--default-white)
-    border: 1.5px solid var(--btn-blue-color-1)
-    color: var(--btn-blue-color-1)
-
-.outlined-red
-  background-color: var(--default-white)
-  border: 1.5px solid var(--border-red-color)
-  color: var(--border-red-color)
-  &:active
-    background-color: var(--default-white)
-    border: 1.5px solid var(--bg-event-red-color)
-    color: var(--bg-event-red-color)
-  &:hover
-    background-color: var(--default-white)
-    border: 1.5px solid var(--bg-event-red-color-1)
-    color: var(--bg-event-red-color-1)
-  &:disabled, &[disabled]
-    background-color: var(--default-white)
-    border: 1.5px solid var(--bg-event-red-color-0)
-    color: var(--bg-event-red-color-0)
-
-.added
-  border: 2px solid var(--btn-blue-color)
-  &:hover
-    border: none
-    background-color: var(--btn-blue-color)
-    color: var(--default-white)
-.added-border-none
-    border: none
-    width: fit-content
-    background-color: var(--bg-opacity-0)
-    color: var(--btn-blue-color)
-    padding: 0
-    row-gap: 10px
-    &:hover
-      border: none
-      color: var(--btn-blue-color-hover)
-      background-color: var(--bg-opacity-0)
 .secondary
-  background-color: var(--btn-blue-sec-color)
-  border: 1px solid var(--btn-blue-sec-color)
   color: var(--btn-blue-color)
+  border: 1.5px solid var(--btn-blue-sec-border-color)
+  background-color: white
   &:hover
-    background-color: var(--btn-blue-color-hover)
+    background-color: var(--btn-blue-sec-color-hover)
-    border: 1px solid var(--btn-blue-color-hover)
+  &:active
-    color: var(--btn-blue-color)
+    background-color: var(--btn-blue-sec-color-active)
   &:disabled, &[disabled]
-    background-color: var(--btn-blue-sec-color)
+    opacity: 1 !important
-    border: 1px solid var(--btn-blue-sec-color)
+    color: var(--btn-blue-sec-color-disabled)
-    color: var(--btn-blue-color)
+    background-color: white
+    border: 1.5px solid var(--btn-blue-sec-border-color-disabled)
 
-.confirm
+.remove
-  border-color: var(--btn-blue-color)
+  color: var(--border-red-color)
-  border: 2px solid var(--btn-blue-color)
+  border: 1.5px solid var(--btn-red-border-color)
+  background-color: white
+  &:hover
+    background-color: var(--btn-red-color-hover)
+  &:active
+    background-color: var(--btn-red-color-active)
+  &:disabled, &[disabled]
+    opacity: 1 !important
+    color: var(--btn-red-color-disabled)
+    background-color: white
+    border: 1.5px solid var(--btn-red-border-color-disabled)
+
+.mini
+  color: var(--btn-blue-color)
+  border: 1.5px solid var(--btn-mini-color)
+  background-color: white
   &:hover
     border: none
-    background-color: var(--btn-blue-color)
+    background-color: var(--btn-mini-color)
-    color: var(--default-white)
   &:active
-    background-color: var(--btn-light-green-color)
+    border: none
-    color: var(--btn-green-color)
+    background-color: var(--btn-mini-color-active)
+    color: var(--bg-status-green)
 
-.button-container
+.q-btn :deep(.q-focus-helper)
-  display: flex
+  display: none
-  gap: 8px
+.q-btn :deep(.q-ripple)
-
+  display: none
-.split
-  height: 19px
-  width: 1px
-  border-radius: 1px
-  background-color: var(--default-white)
-  opacity: 0.3
-
-.icon-container
-  display: flex
-  align-items: center
-  justify-content: center
 </style>

src/components/base/BaseCategorySelection.vue

@@ -31,12 +31,26 @@
           )
           .name.flex.items-center.font-medium.text-xm {{benefit.name}}
       .buttons-group.flex.py-4.px-8.justify-center
-        base-button.text-base.font-semibold(outlined, :size="40", @click="closeModalCategories") Отменить
+        q-btn(
-        base-button.text-base.font-semibold(
+          color="primary",
+          outline,
+          size="16px",
+          no-caps,
+          label="Отменить",
+          :style="{width: '126px', height: '40px'}",
+          padding="0",
+          @click="closeModalCategories"
+        )
+        q-btn(
           v-if="selected[0]?.id",
-          :size="40",
+          color="primary",
+          size="16px",
+          no-caps,
+          label="Сохранить изменения",
+          :style="{width: '132px', height: '40px'}",
+          padding="0",
           @click="saveCategories(selected[0])"
-        ) Сохранить
+        )
     .right-side.flex.px-14.font-bold.relative
       q-icon(name="app:icon-cancel").text-sm.absolute.top-4.right-4.cursor-pointer(@click="closeModalCategories")
       .flex.py-10.gap-y-6.flex-col(v-if="selected[0]?.id && selected[0]?.name !== 'Без льготы'")

src/pages/clients/components/TableCreatePackageDoc.vue

@@ -3,12 +3,12 @@
     .flex.flex.flex-col.gap-y-9
       span.font-bold.text-xl Договор
       .flex.justify-center.items-center.gap-x-2
-        base-button.button(:size="32", :rounded="true")
+        //- base-button.button(:size="32", :rounded="true")
-          span(v-if="!isServices") 1
+        //-   span(v-if="!isServices") 1
-          .icon-ok.text-xs(v-else)
+        //-   .icon-ok.text-xs(v-else)
         span(:style="{color: 'var(--btn-blue-color)'}") Основное
         .line.flex.mx-2
-        base-button.button(:class="{'active-button': !isServices}", :size="32", :rounded="true") 2
+        //base-button.button(:class="{'active-button': !isServices}", :size="32", :rounded="true") 2
         span(:style="{color: isServices ? 'var(--btn-blue-color)' : 'var(--font-dark-blue-color)' }") Услуги
     .base.flex.flex-col.gap-y-6(v-if="!isServices")
       .flex.flex-col.gap-y-6

src/pages/login/TheLogin.vue

@@ -35,12 +35,11 @@
           .flex.items-center.gap-x-8px
             q-checkbox(@click="persist", v-model="isView", type="checkbox")
             .flex.non-italic.font-medium.base Запомнить меня
-        q-btn(
+        base-button(
           :disable="disabledButton",
-          @click="login",
           label="Войти в аккаунт",
-          color="primary",
+          size="L",
-          no-caps
+          @click="login",
         )
       .absolute.left-12.bottom-12 2023 © Астра
     .right-col.flex.items-center.justify-center.relative
@@ -50,10 +49,11 @@
 import { fetchWrapper } from "@/shared/fetchWrapper";
 import BaseInput from "@/components/base/BaseInput";
 import logoMark from "@/assets/images/logoMark.svg";
+import BaseButton from "@/components/base/BaseButton.vue";
 
 export default {
   name: "TheLogin",
-  components: { BaseInput },
+  components: { BaseInput, BaseButton },
   data() {
     return {
       underTextColor: "var(--font-grey-color)",

src/pages/newCalendar/components/CalendarOpenSidebar.vue

@@ -9,16 +9,12 @@
       )
         img(:src="arrow")
     .form.flex.p-4
-      q-btn(
+      base-button(
-        color="primary",
+        width="100%",
-        size="16px",
-        label="Создать запись",
         @click="createForm",
-        no-caps,
-        icon="add",
-        :style="{width: '100%', height: '40px'}",
-        padding="0"
       )
+        q-icon(name="app:plus", size="12px", left)
+        span Создать событие
     .flex.flex-col.gap-y-1
       q-expansion-item.expansion.font-bold.text-xm(
         v-for="(elem, index) in patientList",
@@ -83,11 +79,11 @@ import sort_word from "@/assets/icons/sort_word.svg";
 import BaseInput from "@/components/base/BaseInput.vue";
 import { patientList } from "@/pages/newCalendar/utils/calendarConfig.js";
 import { trimName } from "@/pages/newCalendar/utils/calendarFunctions.js";
-
+import BaseButton from "@/components/base/BaseButton.vue";
 export default {
   name: "CalendarOpenSidebar",
   props: { openSidebar: Function, createForm: Function },
-  components: { BaseInput },
+  components: { BaseInput, BaseButton },
   data() {
     return {
       val: [],

src/pages/newCalendar/components/CalendarSidebar.vue

@@ -115,11 +115,12 @@ import { patientData } from "@/pages/newCalendar/utils/calendarConfig.js";
 import { patientList } from "@/pages/newCalendar/utils/calendarConfig.js";
 import CalendarSidebarSvg from "@/pages/newCalendar/components/CalendarSidebarSvg.vue";
 import { trimName } from "@/pages/newCalendar/utils/calendarFunctions.js";
+import BaseButton from "@/components/base/BaseButton.vue";
 
 export default {
   name: "CalendarSidebar",
   props: { openSidebar: Function, createForm: Function },
-  components: { BaseInput, CalendarSidebarSvg },
+  components: { BaseInput, CalendarSidebarSvg, BaseButton },
   data() {
     return {
       arrow,

src/pages/newMedicalCard/components/AllergiesForms/AllergiesForm.vue

@@ -45,19 +45,21 @@
               v-if="isEdit" 
               @click="() => deleteAllergy(index)"
             )
-    base-button(
+    q-btn.ml-2px(
-      v-if="isEdit"
+      v-if="isEdit",
-      left-icon="icon-plus" 
+      color="primary",
-      added-border-none
+      flat,
+      :style="{'font-weight': 500, width: '104px', height: '24px'}",
+      no-caps,
+      padding="0",
       @click="(e) => addNewAllergy(e)" 
-      :icon-left-size="12"
+    )
-      )
+      q-icon(name="app:icon-plus", size="12px", left)
-      span.font-medium.text-base Добавить
+      span Добавить
 </template>
 
 <script>
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
-import BaseButton from "@/components/base/BaseButton.vue";
 import BaseInput from "@/components/base/BaseInput.vue";
 import TheNotificationProvider from "@/components/Notifications/TheNotificationProvider.vue";
 import { getFieldsNameUnvalidated } from "@/shared/utils/changesObjects";
@@ -71,7 +73,6 @@ export default {
   name: "AllergiesForm",
   components: {
     MedicalFormWrapper,
-    BaseButton,
     BaseInput,
     TheNotificationProvider,
   },
@@ -164,4 +165,8 @@ export default {
   color: var(--font-grey-color)
 .label-field
   color: var(--font-grey-color)
+.on-left
+  margin-right: 10px
+.q-btn :deep(.q-ripple)
+  display: none
 </style>

src/pages/newMedicalCard/components/BasicDataForms/ContactsForm.vue

@@ -58,20 +58,22 @@
               v-if="isEdit" 
               @click="() => deleteContact(key, index)"
               )
-        base-button.ml-6px(
+        q-btn.ml-2px(
-            v-if="isEdit" 
+          v-if="isEdit",
-            left-icon="icon-plus" 
+          color="primary",
-            added-border-none
+          flat,
-            :icon-left-size="12"
+          :style="{'font-weight': 500, width: '104px', height: '24px'}",
-            @click="(e) => addNewContact(e, key)"
+          no-caps,
-          )
+          padding="0",
-          span.font-medium.text-base Добавить
+          @click="(e) => addNewContact(e, key)"
+        )
+          q-icon(name="app:icon-plus", size="12px", left)
+          span Добавить
 </template>
 
 <script>
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
 import BaseInput from "@/components/base/BaseInput.vue";
-import BaseButton from "@/components/base/BaseButton.vue";
 import BaseSelectNetworks from "@/components/base/BaseSelectNetworks.vue";
 import { mapNetworks } from "@/pages/newMedicalCard/utils/medicalConfig";
 import TheNotificationProvider from "@/components/Notifications/TheNotificationProvider.vue";
@@ -90,7 +92,6 @@ export default {
     MedicalFormWrapper,
     BaseInput,
     BaseSelectNetworks,
-    BaseButton,
     TheNotificationProvider,
   },
   data() {
@@ -233,4 +234,8 @@ export default {
   color: var(--font-grey-color)
 .delete-contact
   color: var(--font-grey-color)
+.on-left
+  margin-right: 10px
+.q-btn :deep(.q-ripple)
+  display: none
 </style>

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

@@ -26,8 +26,8 @@
         component(v-bind:is="form.component", :data="form", :fill-inspection="fillInspection", :abc="abc")
       .protocol.flex.justify-between.p-6(v-if="fillInspection")
         .flex.h-fit.w-fit.gap-2
-          base-button.text-base.font-semibold(outlined, :size="40") Отменить
+          base-button(label="Отменить", type="secondary", width="126px")
-          base-button.text-base.font-semibold(:size="40") Сохранить
+          base-button(label="Сохранить", width="132px")
         .flex.items-center.gap-x-3(:style="{color: 'var(--font-grey-color)'}")
           .flex.font-semibold.text-7xl {{ percent + "%" }}
           .flex.font-medium.text-smm.w-20 заполнение осмотра

src/pages/newMedicalCard/components/MedicalConfidantWrapper.vue

@@ -2,24 +2,26 @@
   .wrapper.flex.flex-col.gap-27px.h-full.pb-4
     .flex.flex-col.gap-2
       confidant-form(v-for="(confidant, index) in confidants" :index="index" :confidant="confidant")
-    base-button.ml-30px(
+    q-btn.ml-2px(
-      left-icon="icon-plus" 
+      color="primary",
-      added-border-none
+      flat,
-      :icon-left-size="12"
+      :style="{'font-weight': 500, width: '174px', height: '24px'}",
+      no-caps,
+      padding="0",
       @click="addNewConfidant" 
-      )
+    )
-      span.font-medium.text-base Добавить контакт
+      q-icon(name="app:icon-plus", size="12px", left)
+      span Добавить контакт
 </template>
 
 <script>
 import ConfidantForm from "@/pages/newMedicalCard/components/ConfidantForms/ConfidantForm.vue";
-import BaseButton from "@/components/base/BaseButton.vue";
 import { getConfidantObject } from "@/pages/newMedicalCard/utils/gettersObjects";
 import { mapState } from "vuex";
 
 export default {
   name: "MedicalConfidantWrapper",
-  components: { ConfidantForm, BaseButton },
+  components: { ConfidantForm },
   computed: {
     ...mapState({
       confidants: (state) => state.medical.confidantData,
@@ -43,4 +45,8 @@ export default {
     width: fit-content
   &::-webkit-scrollbar
     width: 0
+.on-left
+  margin-right: 10px
+.q-btn :deep(.q-ripple)
+  display: none
 </style>