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

src/pages/newCalendar/components/HeaderRecordForm.vue

@@ -2,28 +2,29 @@
   .flex.gap-x-10
     .flex.flex-col.gap-y-4.text-smm
       .flex.gap-x-3.items-center
-        .text.font-semibold Статус
+        .text.font-semibold Статус:
         .flex.gap-x-1
           .input.flex.items-center.pl-4.gap-x-1.rounded-md
             img(:src="currentStatus.icon")
             .dark-blue.font-medium {{currentStatus.name}}
           q-btn.change.flex.w-7.h-7.rounded-md(dense, padding="4px 4px")
-            img(:src="folder")
-            q-menu
-              .status.flex.items-center.gap-x-1.font-medium.text-smm.rounded.h-7(
-                v-for="status in statuses",
-                @click="choiceStatus(status)",
-                v-close-popup
-              )
-                img(:src="status.icon")
-                span {{status.name}}
+            q-icon.icon(name="app:folder", size="20px")
+            q-menu(:offset="[140, 8]")
+              .flex.p-2.flex-col
+                .status.flex.items-center.gap-x-1.font-medium.text-smm.rounded.h-7(
+                  v-for="status in statuses",
+                  @click="choiceStatus(status)",
+                  v-close-popup
+                )
+                  img(:src="status.icon")
+                  span {{status.name}}
       .flex.gap-x-3.items-center
         .text.font-semibold Дата:
         .flex.gap-x-1
           .input.flex.items-center.pl-4.rounded-md
             .dark-blue.font-medium {{currentDate.format("DD MMMM YYYY")}}
           q-btn.change.flex.w-7.h-7.rounded-md(dense, padding="4px 4px")
-            img(:src="calendar")
+            q-icon.icon(name="app:calendar", size="20px")
             q-menu(
               transition-show="scale",
               transition-hide="scale",
@@ -37,7 +38,7 @@
           .input.flex.items-center.pl-4.rounded-md
             .dark-blue.font-medium 13:00 - 14:00
           q-btn.change.flex.w-7.h-7.rounded-md(@click="isShowTime = true", dense, padding="4px 4px")
-            img(:src="time")
+            q-icon.icon(name="app:time", size="20px")
           base-modal(v-model="isShowTime", title="Время", modal-padding)
             base-time-modal(:times="times", :close-modal-time="closeModalTime")
     .flex.h-14.gap-x-3.items-center.text-smm
@@ -45,20 +46,17 @@
       .flex.gap-x-1 
         .name.flex.items-center.px-4.pt-2.pb-1.gap-x-2.rounded-md
           .photo.flex.h-10.w-10.items-center.justify-center
-            img(:src="noname")
+            q-icon.icon(name="app:noname", size="24px")
           .flex.flex-col.font-medium
             .dark-blue Имя Фамилия
             .grey-color.text-xsx.rounded-md Дата
         .change.flex.items-center.rounded-md
-          q-btn(dense, padding="24px 8px")
-            q-icon(name="app:icon-plus", size="12px")
+          q-btn(dense, padding="18px 4px")
+            q-icon.icon(name="app:folder", size="20px")
 </template>
 
 <script>
-import folder from "@/assets/icons/folder.svg";
-import time from "@/assets/icons/time.svg";
 import noname from "@/assets/icons/noname.svg";
-import calendar from "@/assets/icons/calendar-grey.svg";
 import BaseCalendar from "@/components/base/Calendar/BaseCalendar.vue";
 import BaseModal from "@/components/base/BaseModal.vue";
 import BaseTimeModal from "@/components/base/BaseTimeModal.vue";
@@ -70,9 +68,6 @@ export default {
   props: { currentStatus: Object, statuses: Array, choiceStatus: Function },
   data() {
     return {
-      folder,
-      calendar,
-      time,
       noname,
       currentDate: moment().clone(),
       isShowTime: false,
@@ -90,7 +85,10 @@ export default {
 <style lang="sass" scoped>
 .input
   width: 200px
-  background: var(--bg-light-grey)
+  border: 1px solid var(--gray-secondary)
+
+.icon :deep(path)
+  fill: var(--font-grey-color)
 
 .dark-blue
   color: var(--font-dark-blue-color)
@@ -101,7 +99,9 @@ export default {
   color: var(--font-grey-color)
 
 .status
-  padding: 8px 8px 8px 5px
+  width: 160px
+  height: 40px
+  padding: 8px 10px
   &:hover
     background: var(--bg-light-grey)
     cursor: pointer