Подняла информацию из LayoutSwitch до родителя

src/assets/sass/variables.sass

@@ -1,6 +1,5 @@
 \:root
   --bg-lavender-color: #e9e9f6
-  --bg-white-color: #f8f8ff
   --bg-ligth-blue-color: #e6eafc
   --font-dark-blue-color: #252850
   --font-black-color: #090a15
@@ -10,5 +9,5 @@
   --border-light-grey-color: #d3d4dc
   --default-shadow: 4px 4px 8px rgba(9, 10, 21, 0.1), -4px -4px 8px rgba(9, 10, 21, 0.1)
   --bg-hover-row-table: rgba(215, 217, 255, 0.25)
-  --default-white: #FFFFFF
-  --btn-red-color: #FF6F6F
+  --default-white: #fff
+  --btn-red-color: #ff6f6f

src/components/HeaderInputs.vue

@@ -9,7 +9,7 @@
         .option-list.cursor-pointer.flex.flex-row.mb-4(v-for="filter in filters" :key="filter" @click="selectFilter(filter)")
           .icon-wrapper.mr-2.flex.justify-center
             .icon-ok.text-xs.flex.justify-center.items-center(v-if="filter === selectedFilter")
-          .options-text {{ filter }}
+          .flex.items-center {{ filter }}
     input.custom-input.search-input.inline-block.box-border.align-middle.px-4(class="py-2.5" placeholder="Искать ...")
 </template>
 
@@ -41,10 +41,8 @@ export default {
   .arrow
     transform: rotate(180deg)
 
-.wrapper
-  background-color: var(--bg-white-color)
-  display: flex
-  align-items: center
+.header-inputs-wrapper
+  background-color: var(--default-white)
 
 .select-container
   border-radius: 4px 0 0 4px
@@ -71,7 +69,7 @@ export default {
 
 .options-wrapper
   width: 172px
-  background-color: var(--bg-white-color)
+  background-color: var(--default-white)
   color: var(--font-dark-blue-color)
   border-radius: 4px
   position: absolute
@@ -89,10 +87,6 @@ export default {
   &:hover
     color: var(--btn-blue-color)
 
-.options-text
-  display: flex
-  align-items: center
-
 .arrow
   color: var(--btn-blue-color)
 

src/components/TheHeader.vue

@@ -35,7 +35,7 @@ export default {
 
 .header-wrapper
   width: 100%
-  background-color: var(--bg-white-color)
+  background-color: var(--default-white)
   position: relative
   z-index: 2
 

src/components/base/buttons/BaseAddEvent.vue

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

src/pages/calendar/TheCalendar.vue

@@ -2,7 +2,8 @@
   calendar-header(
     :currentDay="currentDate"
     @previous-date="switchPreviousDate"
-    @next-date="switchNextDate")
+    @next-date="switchNextDate"
+    @selectedLayout="changeCalendarLayout")
 </template>
 
 <script>
@@ -14,6 +15,7 @@ export default {
   data() {
     return {
       currentDate: moment(),
+      calendarLayout: "",
     };
   },
   methods: {
@@ -23,7 +25,9 @@ export default {
     switchNextDate() {
       this.currentDate = this.currentDate.clone().add(1, "day");
     },
+    changeCalendarLayout(option) {
+      this.calendarLayout = option;
+    },
   },
 };
 </script>
-,

src/pages/calendar/components/CalendarFormAddEvent.vue

@@ -131,7 +131,7 @@ 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

src/pages/calendar/components/CalendarHeader.vue

@@ -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

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