Изменила кнопки и аватары

src/components/HeaderAddClientButton.vue

@@ -1,28 +0,0 @@
-<template lang="pug">
-  button.add-client-button.flex.items-center.justify-center
-    .icon-wrapper.flex.items-center.justify-center.icon-plus.text-xsm
-    .icon-wrapper.flex.items-center.justify-center.icon-person.text-m
-</template>
-
-<script>
-export default {
-  name: "HeaderAddClientButton",
-};
-</script>
-
-<style lang="sass" scoped>
-.add-client-button
-  width: 80px
-  height: 40px
-  background-color: var(--btn-blue-color)
-  color: var(--default-white)
-  border-radius: 4px
-  &:hover
-    background-color: var(--btn-blue-color-4)
-  &:active
-    background-color: var(--font-dark-blue-color)
-
-.icon-wrapper
-  width: 24px
-  height: 24px
-</style>

src/components/TheHeader.vue

@@ -6,11 +6,11 @@
     //- .charge-person-container
     //-   header-active-client-panel(:info="chargePersonInfo")
     .flex.ml-auto
-      header-add-client-button.mr-9
+      base-button.mr-9(left-icon="icon-plus", :icon-left-size="10", :size="40", right-icon="icon-person", :icon-right-size="18")
       button.header-buttons.flex.justify-center.items-center.mr-8.p-0
         .icon-bell.text-xxl
       .flex.justify-centflexer.items-center
-        BaseAvatar(:size="32").mr-2
+        base-avatar(:size="32").mr-2
           img(:src="avatarSrc")
         button.header-buttons
           .icon-down-arrow.text-xxs.flex.justify-center.items-center.p-0
@@ -20,11 +20,11 @@
 import img from "@/assets/images/avatar.svg";
 import chargePersonAvatar from "@/assets/images/charge-person-avatar.svg";
 import HeaderInputs from "./HeaderInputs.vue";
-import HeaderAddClientButton from "./HeaderAddClientButton.vue";
 import BaseAvatar from "@/components/base/BaseAvatar";
+import BaseButton from "@/components/base/BaseButton.vue";
 export default {
   name: "TheHeader",
-  components: { HeaderInputs, HeaderAddClientButton, BaseAvatar },
+  components: { HeaderInputs, BaseAvatar, BaseButton },
   data() {
     return {
       avatarSrc: img,
@@ -64,10 +64,6 @@ export default {
   height: 24px
   color: var(--font-dark-blue-color)
 
-.avatar-img
-  width: 32px
-  height: 32px
-
 .charge-person-container
   position: absolute
 </style>

src/components/base/buttons/BaseArrowButton.vue

@@ -1,20 +0,0 @@
-<template lang="pug">
-  button.arrow-button.flex.items-center.icon-down-arrow.text-base.px-2.pt-3px
-</template>
-
-<script>
-export default {
-  name: "ArrowButton",
-};
-</script>
-
-<style lang="sass" scoped>
-.arrow-button
-  width: 32px
-  height: 32px
-  background-color: var(--btn-blue-color-1)
-  color: var(--btn-blue-color)
-  border-radius: 50%
-  &:hover
-    background-color: var(--btn-blue-color-2)
-</style>

src/pages/calendar/components/CalendarColumn.vue

@@ -2,10 +2,11 @@
   .calendar-column-wrapper.flex.flex-col
     .header.flex.items-center.justify-between.py-2.px-6.top-0
       .flex.items-center
-        img.avatar-wrapper.mr-2(src="@/assets/images/team-member.svg" alt="Team member")
+        base-avatar.mr-2(:size="32")
+          img(src="@/assets/images/team-member.svg" alt="Team member")
         span.owner-name.font-medium.text-base.mr-6 {{ ownerName }}
         img.icon-wrapper.cursor-pointer(src="@/assets/icons/lock.svg")
-      base-doc-ok-button
+      base-button.btn(left-icon="icon-doc-ok", :icon-left-size="24", :size="32", secondary)
     .body
       calendar-event-card(
         v-for="event in dayEvents"
@@ -16,11 +17,12 @@
 </template>
 
 <script>
-import BaseDocOkButton from "@/components/base/buttons/BaseDocOkButton.vue";
+import BaseAvatar from "@/components/base/BaseAvatar";
+import BaseButton from "@/components/base/BaseButton.vue";
 import CalendarEventCard from "./CalendarEventCard.vue";
 export default {
   name: "CalendarColumn",
-  components: { BaseDocOkButton, CalendarEventCard },
+  components: { CalendarEventCard, BaseButton, BaseAvatar },
   props: {
     ownerData: Object,
     dayEvents: Array,
@@ -88,9 +90,9 @@ export default {
   position: relative
   z-index: 3
 
-.avatar-wrapper
-  width: 32px
-  height: 32px
+.btn
+  opacity: 0.5
+  padding: 7px 13px !important
 
 .icon-wrapper
   width: 24px

src/pages/calendar/components/CalendarHeader.vue

@@ -1,8 +1,10 @@
 <template lang="pug">
   .calendar-header-wrapper.flex.items-center.justify-between.py-3.pl-5.pr-6
     .flex
-      base-arrow-button.left-arrow.mr-4(@click="previousHandler")
-      base-arrow-button.right-arrow.mr-6(@click="nextHandler")
+      base-button.left-arrow.mr-4(left-icon="icon-down-arrow", rounded, secondary,
+        :iconLeftSize="16", :size="32", @click="previousHandler")
+      base-button.right-arrow.mr-6(left-icon="icon-down-arrow", rounded, secondary,
+        :iconLeftSize="16", :size="32", @click="nextHandler")
       .text.flex.items-center
         span.font-medium.text-base {{ dateString }}
           span.today.font-bold.text-xxs(v-if="isCurrentDate")  Сегодня
@@ -10,11 +12,11 @@
 </template>
 
 <script>
-import BaseArrowButton from "@/components/base/buttons/BaseArrowButton.vue";
+import BaseButton from "@/components/base/BaseButton.vue";
 import CalendarLayoutSwitch from "./CalendarLayoutSwitch.vue";
 export default {
   name: "CalendarHeader",
-  components: { BaseArrowButton, CalendarLayoutSwitch },
+  components: { CalendarLayoutSwitch, BaseButton },
   props: {
     currentDate: Object,
     isCurrentDate: Boolean,
@@ -54,9 +56,11 @@ export default {
   z-index: 10
 
 .left-arrow
+  padding: 3px 4px 0 4px !important
   transform: rotate(90deg)
 
 .right-arrow
+  padding: 3px 4px 0 4px !important
   transform: rotate(270deg)
 
 .text