Merge branch '19-design-bugs' into 'master'

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

Closes #19

See merge request astra/astra-frontend!506

src/components/base/BaseCategorySelection.vue

@@ -15,7 +15,7 @@
             iconLeft
           )
             template(v-slot:iconLeft)
-              q-icon(name="app:icon-search", size="20px", style="color: var(--font-grey-color)")
+              q-icon.icon(name="app:search", size="20px", style="color: var(--font-grey-color)")
         .field.flex.flex-col.overflow-y-scroll(:class="{'filed-category': findSelected(selected?.id)}")
           .flex.items-center(v-for="benefit in benefitData", :key="benefit.id")
             q-item(tag="label", :style="{alignItems: benefit.name.length > 28 ? 'start' : 'center'}")
@@ -43,7 +43,7 @@
           @click="saveCategories(selected)"
         )
     .right-side.flex.px-10.font-bold.relative
-      q-icon(name="app:icon-cancel").text-sm.absolute.top-4.right-4.cursor-pointer(@click="closeModalCategories")
+      q-icon(name="app:cancel").text-sm.absolute.top-4.right-4.cursor-pointer(@click="closeModalCategories")
       .flex.gap-y-6.flex-col.w-full(v-if="selected?.id && selected?.name !== 'Без льготы'")
         .right-header.flex
           span.text-6xl {{selected?.name}}
@@ -185,6 +185,9 @@ export default {
 .grey-color
   color: var(--font-grey-color)
 
+.icon :deep(path)
+  fill: var(--font-grey-color)
+
 .q-item
   padding: 0
   min-height: 40px

src/components/base/BaseUploadPhoto.vue

@@ -21,7 +21,7 @@
           round,
           padding="2px 0 0 0"
         )
-          q-icon(name="app:ok", size="20px")
+          q-icon.icon(name="app:ok", size="40px")
 </template>
 
 <script>
@@ -118,4 +118,7 @@ export default {
   min-height: 400px
   height: 100%
   border-radius: 50%
+
+.icon :deep(path)
+  fill: var(--default-white)
 </style>

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

src/pages/newMedicalCard/components/AllergiesForms/AllergiesForm.vue

@@ -46,7 +46,7 @@
       padding="0",
       @click="(e) => addNewAllergy(e)" 
     )
-      q-icon(name="app:icon-plus", size="12px", left)
+      q-icon.icon(name="app:plus", size="24px", left)
       span Добавить
 </template>
 
@@ -158,7 +158,9 @@ export default {
 .label-field
   color: var(--font-grey-color)
 .on-left
-  margin-right: 10px
+  margin-right: 4px
 .q-btn :deep(.q-ripple)
   display: none
+.icon :deep(path)
+  fill: var(--btn-blue-color)
 </style>

src/pages/newMedicalCard/components/BasicDataForms/DocumentsForm.vue

@@ -31,7 +31,7 @@
                 rounded,
                 @click="removeImage(data?.dataKey, field?.key)"
               )
-                q-icon(name="app:icon-cancel", size="8px")
+                q-icon.icon-cancel(name="app:cancel", size="8px")
             .replace-photo.font-medium.text-base.cursor-pointer(
               v-if="isEdit",
               @click="openModal(data.dataKey)",
@@ -370,6 +370,8 @@ export default {
   min-width: 302px
 .icon-copy .cursor
   cursor: pointer !important
+.icon-cancel :deep(path)
+  fill: var(--default-white)
 .q-badge
   padding: 4px
   cursor: pointer

src/pages/newMedicalCard/components/BasicDataForms/InsuranceForm.vue

@@ -29,7 +29,7 @@
                 @click="removeImage(insurance?.insuranceKey, field?.key)",
                 rounded
               )
-                q-icon(name="app:icon-cancel", size="8px")
+                q-icon.icon-cancel(name="app:cancel", size="8px")
             .replace-photo.font-medium.text-base.cursor-pointer(
               v-if="isEdit",
               @click="changeModal(insurance.insuranceKey)"
@@ -44,15 +44,15 @@
                 v-model="basic[photoId][field.key]"
                 :confirm-upload="confirmChangePhoto" 
               )
-          .flex.h-10.relative(
+          .category.flex.h-10.relative.gap-x-2(v-else-if="field.type === 'select'")
-            v-else-if="field.type === 'select'",
+            .category-select.flex.items-center.change.px-4.rounded {{selectCategory(basic[insurance.insuranceKey][field.key])}}
-            @click="openModalCategories"
+            q-btn.change.flex.w-7.h-9.rounded-md(
+              v-if="isEdit", 
+              @click="showModalCategories = true", 
+              dense, 
+              padding="8px"
             )
-            q-field.items-center.categories(
+              q-icon.icon(name="app:folder", size="24px")
-              :style="{cursor: isEdit ? 'pointer' : 'default'}",
-              :readonly="!isEdit",
-              outlined
-            ) {{selectCategory(basic[insurance.insuranceKey][field.key])}}
             base-modal(
               default-padding,
               hide-header,
@@ -84,9 +84,9 @@
               :type="field.type",
               size="M"
             )
-              q-icon.my-auto.text-lg.label-field.cursor-pointer(
+              q-icon.my-auto.text-lg.label-field.cursor-pointer.copy(
                 size="18px",
-                name="app:icon-copy",
+                name="app:copy",
                 v-if="checkCopiedFields(field.key, basic[insurance.insuranceKey])",
                 @click="copyValue(basic[insurance.insuranceKey][field.key])"
               )
@@ -134,8 +134,8 @@ export default {
       initDataBasic: "getBasicData",
     }),
     ...mapState({
-      basic: (state) => state.medical.basicData,
+      basic: (state) => state.medical?.basicData,
-      benefitData: (state) => state.medical.benefitData,
+      benefitData: (state) => state.medical?.benefitData,
     }),
   },
   methods: {
@@ -176,9 +176,6 @@ export default {
     closeModalCategories() {
       this.showModalCategories = false;
     },
-    openModalCategories() {
-      if (this.isEdit) this.showModalCategories = true;
-    },
     checkChangeInput() {
       this.isCheckChange =
         JSON.stringify(this.initDataBasic) !== JSON.stringify(this.basic)
@@ -363,14 +360,6 @@ export default {
         });
     },
   },
-  watch: {
-    showModalCategories: {
-      immediate: true,
-      handler(newVal) {
-        if (newVal) this.$store.dispatch("getBenefitData");
-      },
-    },
-  },
 };
 </script>
 
@@ -415,27 +404,25 @@ export default {
 .delete
   background-color: var(--btn-red-color)
 
+.category
+  width: 324px
 
-.categories :deep(.q-field__control)
+.category-select
-  height: 40px
+  min-width: 276px
-  color: var(--font-dark-blue-color)
-  padding: 0 16px
-  background: var(--bg-light-grey) !important
-  &:before
-    border: none !important
-    transition: none
-  &:after
-    border: none !important
-    transition: none
-    transform: none !important
 
-.categories :deep(.q-field__native)
+.icon :deep(path)
-  font-weight: 500
+  fill: var(--font-grey-color)
-  font-size: 16px
+
-  line-height: normal
+.icon-cancel :deep(path)
-  color: var(--font-dark-blue-color)
+  fill: var(--default-white)
-  padding: 8px 0
+
-  background: var(--bg-light-grey) !important
+.copy :deep(path)
+  fill: var(--font-grey-color)
+
+.change
+  background: var(--bg-light-grey)
+  color: var(--font-grey-color)
+  border: 1px solid var(--gray-secondary)
 
 .q-field--outlined.q-field--readonly :deep(.q-field__control)
   background: var(--bg-light-grey) !important

src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ClinicalForm.vue

@@ -27,19 +27,19 @@
                 icon-left
               )
                 template(v-slot:iconLeft)
-                  q-icon(name="app:search", size="20px", style="color: var(--font-grey-color)")
+                  q-icon.icon-grey(name="app:search", size="20px" )
               .button
                 q-btn(
-                  icon="filter_alt",
+                  :style="{width: '40px', height: '40px'}",
-                  :style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}",
                   padding="0"
                 )
+                  q-icon.icon-grey(name="app:filter", size="24px")
               .button
                 q-btn(
-                  icon="app:sort-number",
+                  :style="{width: '40px', height: '40px'}",
-                  :style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}",
                   padding="0"
                 )
+                  q-icon.icon-grey(name="app:sort-number", size="24px")
             .field.flex.flex-col.overflow-y-scroll.gap-y-1(v-if="data.results.diseases")
               .letter.flex.items-center.font-bold.text-base Некоторые инфекционные и паразитарные болезни
               .checkbox.flex.gap-x-2.items-center(v-for="disease in data.results.diseases")
@@ -171,4 +171,7 @@ export default {
 
 .search :deep(.q-field__prepend)
   padding-right: 6px
+
+.icon-grey :deep(path)
+  fill: var(--font-grey-color)
 </style>

src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DataForm.vue

@@ -42,19 +42,19 @@
               size="M",
             )
               template(v-slot:iconLeft)
-                q-icon(name="app:search", size="20px", style="color: var(--font-grey-color)")
+                q-icon.icon-grey(name="app:search", size="20px" )
             .button
               q-btn(
-                icon="filter_alt",
+                :style="{width: '40px', height: '40px'}",
-                :style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}",
                 padding="0"
               )
+                q-icon.icon-grey(name="app:filter", size="24px")
             .button
               q-btn(
-                icon="app:sort-number",
+                :style="{width: '40px', height: '40px'}",
-                :style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}",
                 padding="0"
               )
+                q-icon.icon-grey(name="app:sort-number", size="24px")
           .field.flex.flex-col.overflow-y-scroll
             .checkbox.flex.flex-col(v-for="complaint in textSorting(data.results.tags)")
               .letter.flex.items-center.font-bold.justify-center {{ complaint.sym }}
@@ -71,7 +71,7 @@
               width="40px",
               @click="showModal = true",
             )
-              q-icon(name="app:plus", size="16px")
+              q-icon.icon-white(name="app:plus", size="24px")
         base-modal(v-model="showModal", title="Создание тега", modal-padding)
           tag-creation-form(:close-modal="closeModal", :create-tag="createTag")
     .flex.gap-x-20.w-full(v-if="change || fillInspection")
@@ -365,4 +365,10 @@ export default {
   &::placeholder
     color: var(--font-grey-color)
     opacity: 1
+
+.icon-grey :deep(path)
+  fill: var(--font-grey-color)
+
+.icon-white :deep(path)
+  fill: var(--default-white)
 </style>

src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormTag.vue

@@ -25,19 +25,19 @@
               size="M"
             )
               template(v-slot:iconLeft)
-                q-icon(name="app:search", size="20px", style="color: var(--font-grey-color)")
+                q-icon.icon-grey(name="app:search", size="20px" )
             .button
               q-btn(
-                icon="filter_alt",
+                :style="{width: '40px', height: '40px'}",
-                :style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}",
                 padding="0"
               )
+                q-icon.icon-grey(name="app:filter", size="24px")
             .button
               q-btn(
-                icon="app:sort-number",
+                :style="{width: '40px', height: '40px'}",
-                :style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}",
                 padding="0"
               )
+                q-icon.icon-grey(name="app:sort-number", size="24px")
           .field.flex.flex-col.overflow-y-scroll(v-if="data.results.tags")
             .checkbox.flex.flex-col(v-for="complaint in textSorting(data.results.tags)")
               .letter.flex.items-center.font-bold.justify-center {{ complaint.sym }}
@@ -54,12 +54,12 @@
               width="40px",
               @click="showModal = true",
             )
-              q-icon(name="app:plus", size="16px")
+              q-icon.icon-white(name="app:plus", size="24px")
         base-modal(v-model="showModal", title="Создание тега", modal-padding)
           tag-creation-form(:close-modal="closeModal", :create-tag="createTag")
     .flex(v-if="data.title === 'Осмотр полости рта' && (fillInspection || change)", :style="{color: 'var(--btn-blue-color)'}")
       q-btn(no-caps, flat, padding="2px 4px")
-        q-icon(left, name="app:plus", size="12px")
+        q-icon.icon-blue(left, name="app:plus", size="24px")
         span.font-medium Добавить описание зуба
 </template>
 
@@ -175,6 +175,8 @@ export default {
   cursor: pointer
   border-radius: 4px
   background: var(--bg-light-grey)
+  &:hover
+    background: var(--border-light-grey-color)
 
 .field
   margin-right: -10px
@@ -214,7 +216,7 @@ export default {
 .q-btn :deep(.q-ripple)
   display: none
 .on-left
-  margin-right: 8px
+  margin-right: 4px
 
 .input :deep(.q-field__native)
   font-weight: 500
@@ -228,4 +230,13 @@ export default {
 
 .search :deep(.q-field__prepend)
   padding-right: 6px
+
+.icon-grey :deep(path)
+  fill: var(--font-grey-color)
+
+.icon-white :deep(path)
+  fill: var(--default-white)
+
+.icon-blue :deep(path)
+  fill: var(--btn-blue-color)
 </style>

src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/TagCreationForm.vue

@@ -18,16 +18,15 @@
           anchor="bottom left",
           self="top left"
         )          
+          .tag.item.flex.py-2.px-4.items-center.cursor-pointer.w-full.gap-x-2(
+            @click="addCategory"
+          )
+            span Добавить категорию
           .menu-wrapper.flex.flex-col.h-40.overflow-y-auto
             .options.flex(v-for="item in options")
               .item.flex.py-2.px-4.items-center.cursor-pointer(
                 @click="selected(item.label)"
               ) {{item.label}}
-          .tag.item.flex.py-2.px-4.items-center.cursor-pointer.w-full.gap-x-2(
-            @click="addCategory"
-          )
-            q-icon(name="app:icon-plus", size="10px",)
-            span Добавить категорию
       .flex.flex-col(class="gap-x-1.5")
         base-input(
           v-model="model.tag",

src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaForm.vue

@@ -36,16 +36,16 @@
     .toogle.flex.flex-toogle.h-10.p-1.rounded.absolute
       q-btn.w-12.h-full.rounded(
         size="12px",
-        :style="{'backgroundColor': !isShowSecondView ? 'var(--bg-aqua-blue)' : 'var(--bg-light-grey)'}",
+        :style="{'backgroundColor': !isShowSecondView ? 'var(--btn-blue-color)' : 'var(--bg-light-grey)'}",
         @click="()=>{ isShowSecondView=false }",
       )
-        img(:src="teeth")
+        q-icon.tooth(:class="{'tooth-active': !isShowSecondView}", name="app:tooth-outline", size="24px")
       q-btn.w-12.h-full.rounded(
         size="12px",
-        :style="{'backgroundColor': isShowSecondView ? 'var(--bg-aqua-blue)' : 'var(--bg-light-grey)'}",
+        :style="{'backgroundColor': isShowSecondView ? 'var(--btn-blue-color)' : 'var(--bg-light-grey)'}",
         @click="()=>{isShowSecondView=true }",
       )
-        img(:src="teeth_2")
+        q-icon.tooth(:class="{'tooth-active': isShowSecondView}", name="app:tooth", size="22px")
 </template>
 
 <script>
@@ -119,4 +119,10 @@ export default {
   background-color: var(--bg-light-grey)
   top: 16px
   right: 24px
+
+.tooth :deep(path)
+  fill: var(--font-grey-color)
+
+.tooth-active :deep(path)
+  fill: var(--default-white)
 </style>

src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolsInspection.vue

@@ -9,14 +9,14 @@
         .flex.font-bold.text-6xl {{elem.label}}
         .flex.gap-x-4
           .button
-            q-btn(
+            q-btn.btn(
-              icon="print",
+              icon="app:printer",
               size="20px",
               :style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}",
               padding="0"
             )
           .button
-            q-btn(
+            q-btn.btn(
               icon="app:basket",
               size="20px",
               :style="{width: '40px', height: '40px', color: 'var(--font-grey-color)'}",
@@ -204,4 +204,7 @@ export default {
   cursor: pointer
   border-radius: 4px
   background: var(--bg-light-grey)
+
+.btn :deep(path)
+  fill: var(--font-grey-color)
 </style>

src/pages/newMedicalCard/components/MedicalBaseInfo.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .base-info-wrapper.w-full.flex.gap-x-2.flex-1
+  .base-info-wrapper.w-full.flex.gap-x-2.flex-1.font-medium.text-m
     medical-sidebar(v-model="currentMenuItem")
     component(
       v-if="currentMenuItem",
@@ -49,4 +49,5 @@ export default {
 .base-info-wrapper
   height: 80.4%
   max-height: calc(100% - 190px - 8px)
+  color: var(--font-dark-blue-color)
 </style>

src/pages/newMedicalCard/components/MedicalConfidantWrapper.vue

@@ -10,7 +10,7 @@
       padding="0",
       @click="addNewConfidant" 
     )
-      q-icon(name="app:icon-plus", size="12px", left)
+      q-icon.icon(name="app:plus", size="24px", left)
       span Добавить контакт
 </template>
 
@@ -46,7 +46,9 @@ export default {
   &::-webkit-scrollbar
     width: 0
 .on-left
-  margin-right: 10px
+  margin-right: 4px
 .q-btn :deep(.q-ripple)
   display: none
+.icon :deep(path)
+  fill: var(--btn-blue-color)
 </style>

src/pages/newMedicalCard/components/MedicalFormWrapper.vue

@@ -21,7 +21,7 @@
             name="app:edit",
             v-if="!isEdit && !noEditBtn",
             @click="openEdit",
-            size="20"
+            size="20px"
             )
         .flex.w-full.gap-11px.items-center.justify-between(v-else)
           span.font-bold.text-base.whitespace-nowrap {{title}}
@@ -30,13 +30,13 @@
             :style="{color: 'var(--btn-blue-color)'}"
             )
             base-button(type="secondary", width="142px")
-              img.mr-2(:src="layers")
+              q-icon.sample.mr-2(name="app:sample", size="20px")
               span.text-smm.font-medium Шаблоны
         .flex.w-fit.gap-10px.items-center.delete-button.cursor-pointer(
           v-if="!isEdit && titleDelete && deleteItem", 
           @click="deleteItem"
           )
-          q-icon(name="app:basket" size="20")
+          q-icon(name="app:basket" size="20px")
           span.text-smm.font-medium {{ titleDelete }}
       slot
       .flex.h-fit.w-fit.gap-2(v-if="isEdit && buttonsPresence")
@@ -134,4 +134,6 @@ export default {
   transition: 0.3s ease
 .medical-form-move
   transition: 0.3s ease
+.sample :deep(path)
+  fill: var(--btn-blue-color)
 </style>

src/pages/newMedicalCard/components/MedicalHeader.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .patient-info.pt-4.pr-6.flex.flex-col.justify-between.rounded
+  .patient-info.pt-4.pr-6.flex.flex-col.justify-between.rounded.font-medium.text-m
     .ml-6.flex.justify-between
       q-breadcrumbs
         template(v-slot:separator)
@@ -30,6 +30,7 @@
             :style="{color: 'var(--font-dark-blue-color)', 'line-height': '135%'}",
           ) {{patientName}}
           q-chip(
+            v-if="priority?.text",
             square,
             text-color="white",
             :style="{height: '20px', background: priority?.color, padding: '2px 8px'}",