Поправлены стили формы добавления ивента, исправлены зависимости package.json

src/components/base/BaseSelect.vue

@@ -0,0 +1,63 @@
+<template lang="pug">
+  .flex.gap-2.py-2.px-4.w-full.container(@click="selectOpen")
+    .relative.flex.flex-col
+      .not-italic.text-base.select(: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}")
+</template>
+
+<script>
+export default {
+  name: "BaseSelect",
+  props: {
+    id: String,
+    width: String,
+    optionData: String,
+    listData: Array,
+    chooseOption: Function,
+    isOpen: Boolean,
+    selectOpen: Function,
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.container
+  align-items: center
+  cursor: pointer
+  border-radius: 4px
+  width: fit-content
+  background-color: var(--bg-ligth-blue-color)
+.select
+  appearance: none
+  border: none
+  outline: none
+  cursor: pointer
+  color: rgba(9, 10, 21, 0.5)
+  background-color: rgba(9, 10, 21, 0)
+  &::-webkit-calendar-picker-indicator
+    display: none
+    -webkit-appearance: none
+.options
+  z-index: 3
+  width: max-content
+  background-color: var(--bg-ligth-blue-color)
+.option
+  color: var(--font-black-color)
+  &:hover
+    background-color: var(--btn-blue-color)
+.select-form-separator
+  background-color: rgba(65, 105, 225, 0.2)
+  height: 24px
+  width: 1px
+  border-radius: 1px
+.icon
+  text-align: center
+  color: var(--font-dark-blue-color)
+  &:hover
+    color: var(--btn-blue-color)
+  &.open
+    transform: rotate(180deg)
+</style>

src/components/base/buttons/BaseAddEvent.vue

@@ -3,18 +3,18 @@
 </template>
 
 <script>
-  export default {
-    name: "AddEventButton"
-  }
+export default {
+  name: "AddEventButton",
+};
 </script>
 
 <style lang="sass" scoped>
-  .event-button
-    outline: none
-    border: none
-    cursor: pointer
-    width: fit-content
-    color: var(--bg-white-color)
-    background-color: var(--btn-blue-color)
-    border-radius: 4px
+.event-button
+  outline: none
+  border: none
+  cursor: pointer
+  width: fit-content
+  color: var(--bg-white-color)
+  background-color: var(--btn-blue-color)
+  border-radius: 4px
 </style>

src/components/base/buttons/BaseButtonPlus.vue

@@ -3,20 +3,20 @@
 </template>
 
 <script>
-  export default {
-    name: "ButtonPlus",
-  }
+export default {
+  name: "ButtonPlus",
+};
 </script>
 
 <style lang="sass" scoped>
-  .button-plus
-    outline: none
-    border: none
-    cursor: pointer
-    width: 24px
-    height: 24px
-    max-height: 24px
-    color: #4772F2
-    background-color: rgba(65, 105, 225, 0.25)
-    border-radius: 50%
+.button-plus
+  outline: none
+  border: none
+  cursor: pointer
+  width: 24px
+  height: 24px
+  max-height: 24px
+  color: #4772F2
+  background-color: rgba(65, 105, 225, 0.25)
+  border-radius: 50%
 </style>

src/components/base/buttons/BaseSidebarButton.vue

@@ -5,39 +5,39 @@
 </template>
 
 <script>
-  export default {
-    name: "ButtonSidebar",
-    props: {
-      path: String,
-      id: String,
-      changeStyle: Function
-    },
-    data(){
-      return {
-        selectedStyle: false
-      }
-    }
-  }
+export default {
+  name: "ButtonSidebar",
+  props: {
+    path: String,
+    id: String,
+    changeStyle: Function,
+  },
+  data() {
+    return {
+      selectedStyle: false,
+    };
+  },
+};
 </script>
 
 <style lang="sass" scoped>
-  .button
-    width: fit-content
-    cursor: pointer
-    background-color: rgb(65, 105, 225, 0)
-    border-radius: 0 4px 4px 0
-    border-left-color: rgb(65, 105, 225, 0)
-    border-left-width: 4px
-    border-right: none
-    border-top: none
-    border-bottom: none
-    border-left-style: solid
-  .button:focus
-    background-color: rgb(65, 105, 225, 0.3)
-    border-left-color: rgb(65, 105, 225, 1)
-    color: #4169E1
-  .button:hover
-    background-color: rgb(65, 105, 225, 0.3)
-    border-left-color: rgb(65, 105, 225, 1)
-    color: #4169E1
+.button
+  width: fit-content
+  cursor: pointer
+  background-color: rgba(65, 105, 225, 0)
+  border-radius: 0 4px 4px 0
+  border-left-color: rgba(65, 105, 225, 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)
+  color: #4169E1
+.button:hover
+  background-color: rgba(65, 105, 225, 0.3)
+  border-left-color: rgba(65, 105, 225, 1)
+  color: #4169E1
 </style>