Фикс багов дизайна

src/pages/newCalendar/components/CalendarHeader.vue

@@ -54,19 +54,22 @@
         dense,
         @click="nextWeek"
       ) 
-    .h-10.p-1.flex.items-center.justify-between.bg-secondary.rounded.text-grey-color.ml-52
+    .h-10.p-1.flex.items-center.justify-between.bg-secondary.rounded.text-grey-color.ml-52.border
       q-btn-toggle(
         v-model="value",
         :options="displayTypesList",
         no-caps,
-        toggle-color="light-blue-4",
         padding="0px"
       )
         template(v-slot:one)
-          .w-12.h-8.flex.items-center.justify-center
+          .w-12.h-8.flex.items-center.justify-center.rounded(
+            :class="{'active-toggle': value === 'expanded'}"
+          )
             date-switcher-svg(name-svg="expanded", :active="value === 'expanded'")
         template(v-slot:two)
-          .w-12.h-8.flex.items-center.justify-center
+          .w-12.h-8.flex.items-center.justify-center.rounded(
+            :class="{'active-toggle': value === 'collapsed'}"
+          )
             date-switcher-svg(name-svg="compressed", :active="value === 'collapsed'")
 </template>
 
@@ -199,6 +202,12 @@ export default {
 
 .calendar-icon :deep(path)
   fill: var(--font-dark-blue-color)
+
+.active-toggle
+  background: var(--btn-blue-color)
+
+.border-toggle
+  border: 1px solid var(--gray-secondary)
 </style>
 <style lang="sass">
 .q-field--outlined.q-field--readonly .q-field__control:before