Merge branch 'master' into UC-13

src/components/base/BaseSelect.vue

@@ -1,11 +1,11 @@
 <template lang="pug">
-  .flex.gap-2.py-2.px-4.w-full.container.cursor-pointer(@click="selectOpen")
+  .flex.gap-2.py-2.px-4.w-full.container.items-center.cursor-pointer(@click="selectOpen")
     .relative.flex.flex-col
       .not-italic.text-base.select.cursor-pointer(:style="{ minWidth : width}") {{optionData}}
         .absolute.options(v-if="isOpen" :id="id" @click="(event)=>chooseOption(event)")
           .not-italic.text-base.option(v-for="(responsible, index) in listData" :key="index" :id="index") {{responsible}}
-    .select-form-separator
-    .text-sm.ml-2.pt-1.icon-down-arrow.icon(:class="{ open: isOpen}")
+    .select-form-separator.cursor-pointer
+    .text-sm.ml-2.pt-1.icon-down-arrow.icon.text-center(:class="{ open: isOpen}")
 </template>
 
 <script>
@@ -25,7 +25,6 @@ export default {
 
 <style lang="sass" scoped>
 .container
-  align-items: center
   border-radius: 4px
   width: fit-content
   background-color: var(--bg-ligth-blue-color)
@@ -33,8 +32,8 @@ export default {
   appearance: none
   border: none
   outline: none
-  color: rgba(9, 10, 21, 0.5)
-  background-color: rgba(9, 10, 21, 0)
+  color: var(--font-black-color-1)
+  background-color: var(--font-black-color-0)
   &::-webkit-calendar-picker-indicator
     display: none
     -webkit-appearance: none
@@ -47,12 +46,11 @@ export default {
   &:hover
     background-color: var(--btn-blue-color)
 .select-form-separator
-  background-color: rgba(65, 105, 225, 0.2)
+  background-color: var(--btn-blue-color-3)
   height: 24px
   width: 1px
   border-radius: 1px
 .icon
-  text-align: center
   color: var(--font-dark-blue-color)
   &:hover
     color: var(--btn-blue-color)

src/components/base/buttons/BaseAddEvent.vue

@@ -13,7 +13,7 @@ export default {
   outline: none
   border: none
   width: fit-content
-  color: var(--bg-white-color)
+  color: var(--default-white)
   background-color: var(--btn-blue-color)
   border-radius: 4px
 </style>

src/components/base/buttons/BaseArrowButton.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  button.arrow-button.flex.items-center.icon-down-arrow.px-2.pt-px
+  button.arrow-button.flex.items-center.icon-down-arrow.text-base.px-2.pt-1
 </template>
 
 <script>
@@ -15,10 +15,9 @@ export default {
 .arrow-button
   width: 32px
   height: 32px
-  background: var(--btn-light-blue-color)
+  background-color: var(--btn-blue-color-1)
   color: var(--btn-blue-color)
   border-radius: 50%
-  font-size: 16px
   &:hover
-    background: #a0b4f0
+    background-color: var(--btn-blue-color-2)
 </style>

src/components/base/buttons/BaseButtonPlus.vue

@@ -16,6 +16,6 @@ export default {
   height: 24px
   max-height: 24px
   color: var(--btn-blue-color)
-  background-color: rgba(65, 105, 225, 0.25)
+  background-color: var(--bg-ligth-blue-color)
   border-radius: 50%
 </style>

src/components/base/buttons/BaseDocOkButton.vue

@@ -0,0 +1,37 @@
+<template lang="pug">
+  button.icon-wrap.flex.items-center.justify-center.py-1.px-2(:class="{disable: isDisable}")
+    span(v-if="numberIsVisible") 3
+    .icon-doc-ok.text-xxl
+</template>
+
+<script>
+export default {
+  name: "DocOkButton",
+  data() {
+    return {
+      numberIsVisible: false,
+      isDisable: true,
+    };
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.disable
+  opacity: 0.5
+
+.icon-wrap
+  height: 32px
+  background-color: var(--btn-blue-color-1)
+  color: var(--btn-blue-color)
+  border-radius: 4px
+  &:hover
+    background-color: var(--btn-blue-color-2)
+  &:active
+    background-color: var(--font-dark-blue-color)
+    color: var(--default-white)
+
+.icon-doc-ok
+  width: 24px
+  height: 24px
+</style>

src/components/base/buttons/BaseSidebarButton.vue

@@ -23,20 +23,20 @@ export default {
 <style lang="sass" scoped>
 .button
   width: fit-content
-  background-color: rgba(65, 105, 225, 0)
+  background-color: var(--btn-blue-color-0)
   border-radius: 0 4px 4px 0
-  border-left-color: rgba(65, 105, 225, 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
 .button:focus
-  background-color: rgba(65, 105, 225, 0.3)
-  border-left-color: rgba(65, 105, 225, 1)
+  background-color: var(--btn-blue-color-1)
+  border-left-color: var(--btn-blue-color)
   color: var(--btn-blue-color)
 .button:hover
-  background-color: rgba(65, 105, 225, 0.3)
-  border-left-color: rgba(65, 105, 225, 1)
+  background-color: var(--btn-blue-color-1)
+  border-left-color: var(--btn-blue-color)
   color: var(--btn-blue-color)
 </style>