WIP Сделала BaseButton

src/components/TheHeader.vue

@@ -7,52 +7,42 @@
         @click="redirectHomePage"
       )
       header-inputs
-    .flex.ml-auto
-      q-btn.mr-9(
-        color="primary",
-        outline,
-        dense,
-        padding="4px 22px",
+    .flex.ml-auto.items-center.gap-x-8
+      base-button(
+        type="secondary",
+        width="80px",
+        no-padding,
         @click="openForm"
       )
-        q-icon(
-          name="app:icon-plus",
-          size="10px",
-          style="margin-right: 4px",
-        )
-        q-icon(
-          name="app:icon-person",
-          size="18px",
-          style="margin-left: 4px"
-        )
+        q-icon(name="app:plus", size="12px")
+        q-icon(name="app:person", size="20px", right)
       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)",
-        padding="4px 8px",
-        icon="app:icon-bell",
-        size="18px",
+        :style="{color: 'var(--font-dark-blue-color)', 'min-width': '24px', 'min-height': '24px'}",
         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"
-          flat
-          icon="app:icon-down-arrow",
-          style="color: var(--font-dark-blue-color)",
-          size="10px",
-          padding="4px 2px 2px 2px"
-          dense,
+          @click="openPopup",
+          flat,
+          padding="0",
+          style="color: var(--font-grey-color)"
         )
-          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>