WIP добавил возможность редактирования детальной информации клиента

src/components/base/buttons/BaseButtonOk.vue

@@ -0,0 +1,45 @@
+<template lang="pug">
+  button.button-ok.flex.items-center.justify-center.cursor-pointer.text-xs.box-border(:style="{width:size + 'px', height:size + 'px'}" :class="{change:darkStyle}")
+    .flex.w-fit.h-fit
+      span.icon-ok.leading-none(:style="{fontSize:iconSize + 'px'}")
+</template>
+
+<script>
+export default {
+  name: "BaseButtonOk",
+  props: {
+    size: {
+      default: 24,
+    },
+    iconSize: {
+      default: 14,
+    },
+    darkStyle: {
+      default: false,
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.button-ok
+  color: var(--btn-blue-color)
+  border: 1.5px solid var(--btn-blue-color-3)
+  border-radius: 50%
+  &:hover
+    border: none
+    background-color: var(--btn-blue-color-3)
+  &:active
+    border: none
+    background-color: var(--btn-light-green-color)
+    color: var(--btn-green-color)
+.change
+  border-color: var(--btn-blue-color)
+  &:hover
+    border: none
+    background-color: var(--btn-blue-color)
+    color: var(--default-white)
+  &:active
+    background-color: var(--btn-light-green-color)
+    color: var(--btn-green-color)
+</style>

src/components/base/buttons/BaseButtonPlus.vue

@@ -1,10 +1,23 @@
 <template lang="pug">
-  button.cursor-pointer.icon-plus.button-plus.text-xs.pt-1
+  button.flex.items-center.justify-center.cursor-pointer.button-plus.text-xs.box-border(:style="{width:size + 'px', height:size + 'px'}" :class="{change:withBorder}")
+    .flex.w-fit.h-fit
+      span.icon-plus.leading-none(:style="{fontSize:iconSize + 'px'}")
 </template>
 
 <script>
 export default {
-  name: "ButtonPlus",
+  name: "BaseButtonPlus",
+  props: {
+    size: {
+      default: 24,
+    },
+    iconSize: {
+      default: 14,
+    },
+    withBorder: {
+      default: false,
+    },
+  },
 };
 </script>
 
@@ -12,10 +25,14 @@ export default {
 .button-plus
   outline: none
   border: none
-  width: 24px
-  height: 24px
-  max-height: 24px
   color: var(--btn-blue-color)
-  background-color: var(--bg-ligth-blue-color)
   border-radius: 50%
+.change
+  background-color: var(--btn-blue-color-0)
+  color: var(--btn-blue-color)
+  border: 1.5px solid var(--btn-blue-color)
+  &:hover
+    border: none
+    background-color: var(--btn-blue-color)
+    color: var(--default-white)
 </style>