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

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>