WIP Переделана часть secondary кнопок

src/components/base/BaseClientFormCreate.vue

@@ -6,16 +6,26 @@
     span.title.text-xl.font-bold.px-4 Создание клиента
     .flex.gap-x-4.h-fit.px-4
       .flex.gap-x-3.w-full
-        base-button.relative(
-          :rounded="true",
-          :secondary="true",
-          :size="40",
+        q-btn.relative(
+          color="secondary",
+          text-color="primary",
+          v-for="img in image",
           @click="changeOpenPopup",
-          v-for="img in image"
+          style="width: 40px; height: 40px",
+          rounded
+          no-caps
+          padding="0 16px"
         )
-          .icon-download.text-xl(v-if="img === defaultIcon")
-          .wrapper-img.flex.w-10.h-10(v-else)
-            img.current-avatar.object-cover(:src="img")
+          q-icon(
+            v-if="img === defaultIcon"
+            name="app:icon-download",
+          )
+          q-avatar(
+            v-else,
+            size="40px",
+            round
+          )
+            img(:src="img")
           base-popup.right-5.top-7(v-if="showPopup", v-click-outside="closePopup", :width="230")
             .flex.items-center.gap-x-2
               img(src="@/assets/icons/computer.svg")
@@ -36,8 +46,12 @@
                 )
                 .avatar.flex.absolute.items-center.gap-x-6(v-for="img in image")
                   img.avatar.object-cover(for="image-upload", :src="img", v-if="img")
-                  base-button(:rounded="true", :size="48", @click="closeAddImage")
-                    .icon-ok
+                  q-btn(
+                    round,
+                    color="primary",
+                    @click="closeAddImage",
+                    icon="app:icon-ok"
+                  )
         base-input.w-full(v-model="infoClient.basic.full_name", placeholder="ФИО*")
     .flex.flex-col.flex-auto.l.gap-y-8
       .flex.px-4
@@ -87,7 +101,6 @@ import FormCreateIdentityDocuments from "@/pages/clients/components/FormCreateId
 import FormCreateAddresses from "@/pages/clients/components/FormCreateAddresses";
 import FormCreateAdditional from "@/pages/clients/components/FormCreateAdditional";
 import BaseInput from "@/components/base/BaseInput";
-import BaseButton from "@/components/base/BaseButton";
 import BasePopup from "@/components/base/BasePopup";
 import BaseModal from "@/components/base/BaseModal";
 import addImageIcon from "@/assets/icons/photo.svg";
@@ -102,7 +115,6 @@ export default {
     FormCreateIdentityDocuments,
     FormCreateAddresses,
     FormCreateAdditional,
-    BaseButton,
     BasePopup,
     BaseModal,
     addImageIcon,

src/components/base/BaseSelectNetworks.vue

@@ -68,7 +68,6 @@ export default {
   border: none
   outline: none
   color: var(--font-dark-blue-color)
-  background-color: var(--font-black-color-0)
   &.default
     color: var(--font-black-color-1)
   &::-webkit-calendar-picker-indicator

src/components/base/BaseSidebarButton.vue

@@ -1,7 +1,13 @@
 <template lang="pug">
-  a(:href="path")
-    button.button.cursor-pointer.text-4xl.py-3.pr-4.pl-3.transition(:id="id" :class="{active:active}" @click="(e) => changeStylePage(e)")
-      slot
+  q-btn(
+    padding="14px 14px 14px 10px",
+    style="width: 76px"
+    :class="checkActive",
+    :href="path",
+    :id="id",
+    @click="(e) => changeStylePage(e)"
+  )
+    slot
 </template>
 
 <script>
@@ -18,20 +24,19 @@ export default {
       selectedStyle: false,
     };
   },
+  computed: {
+    checkActive() {
+      return this.active ? "active button" : "button";
+    },
+  },
 };
 </script>
 
 <style lang="sass" scoped>
 .button
-  width: fit-content
-  background-color: var(--btn-blue-color-0)
+  background-color: trnsparent
   border-radius: 0 4px 4px 0
-  border-left-color: var(--btn-blue-color-0)
-  border-left-width: 4px
-  border-right: none
-  border-top: none
-  border-bottom: none
-  border-left-style: solid
+  border-left: 4px solid transparent
 .active
   background-color: var(--btn-blue-color-1)
   border-left-color: var(--btn-blue-color)