[WIP] Поправил хедер модалки создания записи, обновление пациентов медкарточек

src/components/base/BaseTimeModal.vue

@@ -1,13 +1,13 @@
 <template lang="pug">
-  .flex.flex-col.gap-y-6.pt-6
+  .flex.flex-col.gap-y-6.pt-6.dark-blue
     .table-time.flex.p-4
-      .flex.flex-col.gap-1(v-for="time in timeCoil")
-        .flex {{ time }}
-        .side.flex.p-1.h-9(:style="{columnGap: '2px'}")
-          q-btn.left-side(size="9px", padding="0 8px", color="primary")
-            q-icon(name="app:icon-ok")
-          q-btn.right-side(size="4px", padding="0 4px")
-            img(:src="lockIcon")
+      .top-block.flex.flex-col.-mr-4(v-for="time in timeCoil")
+        .timeline.flex.text-smm.font-medium {{time}}
+        .side.flex.p-1.h-9
+          q-btn.plus-btn(size="9px", padding="0 8px")
+            q-icon.icon-grey(name="app:plus", size="20px")
+          q-btn.lock-btn(size="4px", padding="0 4px")
+            q-icon.icon(name="app:lock", size="20px")
     .flex.justify-between.items-center
       .flex.gap-2
         base-button(
@@ -21,11 +21,10 @@
           label="Сохранить",
           @click="closeModalTime"
         )
-      .text.font-bold.text-6xl {{`${times.from} - ${times.to}`}}
+      .dark-blue.font-bold.text-6xl {{`${times.from} - ${times.to}`}}
 </template>
 
 <script>
-import lockIcon from "@/assets/icons/locked.svg";
 import BaseButton from "@/components/base/BaseButton.vue";
 
 export default {
@@ -33,7 +32,7 @@ export default {
   props: { times: Object, closeModalTime: Function },
   components: { BaseButton },
   data() {
-    return { lockIcon, select: false };
+    return { select: false };
   },
   computed: {
     validateStartTime() {
@@ -64,22 +63,29 @@ export default {
 .table-time
   width: 463px
   height: 174px
-  border: 1px solid var(--border-light-grey-color)
   border-radius: 6px
   flex-wrap: wrap !important
+  border: 1px solid var(--gray-secondary)
 
-.text
+.dark-blue
   color: var(--font-dark-blue-color)
 
 .side
-  border-left: 1px solid var(--border-light-grey-color)
-  border-right: 1px solid var(--border-light-grey-color)
+  border-left: 1px solid var(--font-dark-blue-color)
+  margin-left: 16px
+  margin-bottom: 24px
 
-.left-side
+.plus-btn
   border-radius: 6px 1px 1px 6px
-  background: #4772F2
+  border: 1px solid var(--gray-secondary)
 
-.right-side
+.lock-btn
   border-radius: 1px 6px 6px 1px
-  background: #FF6565
+  border: 1px solid var(--gray-secondary)
+
+.icon :deep(path)
+  fill: var(--system-color-red)
+
+.icon-grey :deep(path)
+  fill: var(--font-grey-color)
 </style>