Merge branch 'master' into UC-13

src/pages/calendar/components/CalendarColumn.vue

@@ -0,0 +1,57 @@
+<template lang="pug">
+  .calendar-column-wrapper.flex.flex-col
+    .header.flex.items-center.justify-between.py-2.px-6
+      .flex.items-center
+        img.avatar-wrapper.mr-2(:src="info.avatar" alt="Team member")
+        span.member-name.font-medium.text-base.mr-6 {{ info.name }}
+        img.icon-wrapper.cursor-pointer(src="@/assets/icons/lock.svg")
+      base-doc-ok-button
+    .body.flex.flex-col
+      .line.flex.items-center(v-for="hour in 10" :key="hour")
+        .middle-line
+</template>
+
+<script>
+import BaseDocOkButton from "@/components/base/buttons/BaseDocOkButton.vue";
+export default {
+  name: "CalendarColumn",
+  components: { BaseDocOkButton },
+  props: {
+    info: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.calendar-column-wrapper
+  width: 100%
+  background-color: var(--default-white)
+
+.header
+  height: 48px
+  border-bottom: 1px solid var(--border-light-grey-color)
+
+.avatar-wrapper
+  width: 32px
+  height: 32px
+
+.icon-wrapper
+  width: 24px
+  height: 24px
+
+.member-name
+  color: var(--font-dark-blue-color)
+
+.line
+  border-bottom: 1px solid var(--border-light-grey-color)
+  height: 62px
+
+.middle-line
+  border-top: 1px dashed var(--border-light-grey-color)
+  width: 100%
+</style>

src/pages/calendar/components/CalendarFormAddEvent.vue

@@ -3,7 +3,7 @@
     .flex.flex-col.gap-y-2
       .flex.justify-between.pt-2
         span.not-italic.text-xs.opacity-40.leading-3 Ответственный
-        .icon-cancel.close-icon.cursor-pointer.text-xs(@click="closeEventForm")
+        .icon-cancel.close-icon.text-xs.cursor-pointer(@click="closeEventForm")
       base-select(
         id="responsible"
         width="205px"
@@ -18,11 +18,11 @@
       .flex.gap-x-4.items-center
         .icon-time.text-xl.icon
         .flex.gap-x-2.items-center
-          .form-item.cursor-pointer.flex.gap-x-2.px-4.py-2.items-center
-            input.item-input.cursor-pointer.no-italic.text-base(v-model="eventData.timeEvent.firstTime" type="time" min="08:00" max="18:00")
+          .form-item.flex.gap-x-2.px-4.py-2.items-center
+            input.item-input.no-italic.text-base.cursor-pointer(v-model="eventData.timeEvent.firstTime" type="time" min="08:00" max="18:00")
           span —
-          .form-item.cursor-pointer.flex.gap-x-2.px-4.py-2.items-center
-            input.item-input.cursor-pointer.no-italic.text-base(v-model="eventData.timeEvent.secondTime" type="time" min="08:00" max="18:00")
+          .form-item.flex.gap-x-2.px-4.py-2.items-center
+            input.item-input.no-italic.text-base.cursor-pointer(v-model="eventData.timeEvent.secondTime" type="time" min="08:00" max="18:00")
       .flex.gap-x-4.items-center
         .icon-person.text-xl.icon
         .form-item.cursor-pointer.flex.gap-x-2.px-4.py-2.items-center
@@ -131,26 +131,32 @@ export default {
 .event-form
   height: fit-content
   min-width: 448px
-  background-color: var(--bg-white-color)
+  background-color: var(--default-white)
   box-shadow: -4px -4px 16px rgba(9, 10, 21, 0.25), 4px 4px 16px rgba(9, 10, 21, 0.25)
   border-radius: 4px
+
 .form-item
   border-radius: 4px
   width: fit-content
   background-color: var(--bg-ligth-blue-color)
+
 .item-input
   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)
+  background-color: var(--font-black-color-0)
   &::-webkit-calendar-picker-indicator
     display: none
     -webkit-appearance: none
+  &::placeholder
+    color: var(--font-black-color-1)
+
 .icon
   width: 24px
   height: 24px
   color: var(--font-dark-blue-color)
+
 .close-icon
   color: var(--font-dark-blue-color)
   &:hover

src/pages/calendar/components/CalendarHeader.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .calendar-header-wrapper.flex.items-center.justify-between.ml-2.py-3.pl-5.pr-6
+  .calendar-header-wrapper.flex.items-center.justify-between.py-3.pl-5.pr-6
     .flex
       base-arrow-button.left-arrow.mr-4(@click="previousHandler")
       base-arrow-button.right-arrow.mr-6(@click="nextHandler")
@@ -22,7 +22,6 @@ export default {
   data() {
     return {
       isToday: true,
-      selectedLayout: "",
     };
   },
   computed: {
@@ -39,7 +38,7 @@ export default {
   },
   methods: {
     changeSelectedLayout(option) {
-      this.selectedLayout = option;
+      this.$emit("selectedLayout", option);
     },
     previousHandler() {
       this.$emit("previous-date");
@@ -60,7 +59,7 @@ export default {
 <style lang="sass" scoped>
 .calendar-header-wrapper
   width: 100%
-  background-color: var(--bg-white-color)
+  background-color: var(--default-white)
   height: 56px
   border-radius: 4px
 

src/pages/calendar/components/CalendarLayoutSwitch.vue

@@ -36,8 +36,8 @@ export default {
 
 <style lang="sass" scoped>
 .active
-  background-color: #6787e7
-  color: var(--bg-white-color)
+  background-color: var(--btn-blue-color-4)
+  color: var(--default-white)
   border-radius: 4px
 
 .layout-switch-wrapper