Изменил стиль всплывающего окна для ивентов, поправил стили loginPage

src/pages/calendar/components/CalendarFormAddEvent.vue

@@ -1,49 +1,41 @@
 <template lang="pug">
   .flex.flex-col.gap-y-6.pt-6.pb-7.px-8.event-form.absolute.right-2.bottom-14
-    .flex.flex-col.gap-y-2
+    .flex.justify-between
-      .flex.justify-between.pt-2
+      span.title.text-xl.font-bold Назначение события
-        span.text-xs.opacity-40.font-bold.leading-3 Ответственный
+      .flex.pt-2
-        .icon-cancel.close-icon.text-xs.cursor-pointer(@click="clearForm")
+        .icon-cancel.close-icon.tesxt-xs.cursor-pointer(@click="clearForm")
-      base-select.select(
+    .flex.flex-col.gap-y-8
-        v-if="!selectedEventData.employees",
+      .flex.flex-col.gap-y-2
-        :items="ownersList",
+        span.text-xs.opacity-40.font-bold.leading-3 Вид события
-        v-model="employees.employee",
+        base-select.select(
-        placeholder="Выберите ответственного",
+          v-model="kind"
-        separator
+          :items="kindEvents"
-        border-none
+          placeholder="Вид события"
-      )  
+          :style="{width: '570px'}"
-      base-input(
+        )
-        v-else,
+      .flex.flex-col(class="gap-y-1.5")
-        v-model:value="employeeName",
+        span.text-sm Сотрудник
-        :width-input="72",
+        base-select.select(
-        disabled,
+          v-if="!selectedEventData.employees",
-        border-none
+          :items="ownersList",
-      )
+          v-model="employees.employee",
-    .flex.flex-col.gap-y-2
+          placeholder="Выберите сотрудника",
-      span.text-xs.opacity-40.font-bold.leading-3 Основная информация
+          border-none
-      .flex.gap-x-4.items-center
+        )  
-        .flex.gap-x-2.items-center
+        base-input(
-          base-input-date(v-model:value="eventDate")
+          v-else,
-      .flex.items-center
+          v-model:value="employeeName",
-        .flex.gap-x-2.items-center
+          :width-input="570",
-          base-input-time.item-input.text-base.cursor-text(
+          disabled,
-            v-model:value="startTime",
+          border-none
-            :width-input="72"
+        )
-          )
+      .flex.flex-col(class="gap-y-1.5")
-          span —
+        span.text-sm Клиент
-          base-input-time.item-input.text-base.cursor-text(
-            v-model:value="endTime",
-            :width-input="72"
-          )
-      .flex.gap-x-4.items-center
-        .icon-person.text-xl.icon
         base-select.select(
           v-if="!selectedEventData.members",
           :items="membersList",
           v-model="members.person",
-          placeholder="Выберите ответственного",
+          placeholder="Выберите клиента",
-          separator
-          border-none
         )  
         base-input(
           v-else,
@@ -51,52 +43,33 @@
           disabled,
           :width-input="346"
           border-none
-       )
-    .flex.flex-col.gap-y-2
-      span.text-xs.opacity-40.font-bold.leading-3 Вид события
-      base-select.select(
-        v-model="kind"
-        :items="kindEvents"
-        placeholder="Вид события"
-        separator
-        border-none
-        :style="kindSelectWidth"
-      )
-    .flex.flex-col.gap-y-2
-      .flex.gap-x-4.items-center
-        span.text-xs.opacity-40.font-bold.leading-3 Контакты
-        base-button(
-          left-icon="icon-plus"
-          rounded secondary
-          :size="24"
-          :icon-left-size="10"
-          id="addContact"
-          @click="(e)=>addContact(e)"
         )
-      .flex.gap-x-4.items-center(
+    .flex.flex-col.gap-y-8
-        v-for="(contact, index) in listContacts"
+      .flex.gap-x-4
-        :key="index"
+        .flex.gap-x-2
-      )
+          .flex.flex-col(class="gap-y-1.5")
-        .icon-mail.text-xl.icon
+            span.text-xs.opacity-40.font-bold.leading-3 Дата
-        .form-item.flex.gap-x-2.items-center
+            base-input-date.select(v-model:value="eventDate")
-          base-input(
+        .flex.gap-x-2.items-center
-            border-none
+          .flex.flex-col(class="gap-y-1.5")
-            v-model="contacts"
+            span.text-xs.opacity-40.font-bold.leading-3 Начало
-            placeholder="E-mail"
+            base-input-time.item-input.text-base.cursor-text.select(
-            :width-input="72"
+              v-model:value="startTime",
-          )
+              :width-input="72"
+            )
+          span.mt-4 —
+          .flex.flex-col(class="gap-y-1.5")
+            span.text-xs.opacity-40.font-bold.leading-3 Конец
+            base-input-time.item-input.text-base.cursor-text.select(
+              v-model:value="endTime",
+              :width-input="72"
+            )
     base-button.create-button.text-base.font-semibold(
       v-if="!selectedEventData.id",
       :size="40",
       :disabled="disabledCreateButton",
       @click="sendEventData"
     ) Создать событие
-    base-button.update-button.text-base.font-semibold(
-      v-else,
-      :size="40",
-      :disabled="disabledUpdateButton",
-      @click="updateEventData",
-    ) Сохранить
 </template>
 
 <script>
@@ -139,7 +112,6 @@ export default {
   },
   data() {
     return {
-      listContacts: [1],
       kindEvents: [
         {
           id: 1,
@@ -161,7 +133,6 @@ export default {
       EMPLOYEE_TYPE: "owner",
       MEMBER_TYPE: "primary",
       eventData: {},
-      contacts: [],
       startTime: "",
       endTime: "",
       members: {},
@@ -201,7 +172,6 @@ export default {
               elem.first_name,
               elem.patronymic
             ),
-            contacts: elem.contacts,
           });
         });
         return filteredArray;
@@ -294,20 +264,8 @@ export default {
     eventId() {
       return this.selectedEventData.id ? this.selectedEventData.id : "";
     },
-    kindSelectWidth() {
-      return {
-        width: this.kind ? `${this.kind.length * 9 + 86}px` : "180px",
-      };
-    },
   },
   methods: {
-    addContact(e) {
-      if (e.currentTarget.id === "addContact") {
-        this.listContacts.push(
-          this.listContacts[this.listContacts.length - 1] + 1
-        );
-      }
-    },
     trimOwnerName(lastName, firsName, patronymic) {
       return `${lastName} ${firsName[0]}.${patronymic[0]}.`;
     },
@@ -418,9 +376,9 @@ export default {
 <style lang="sass" scoped>
 .event-form
   height: fit-content
-  min-width: 448px
+  width: 634px
-  background-color: var(--bg-ligth-blue-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)
+  box-shadow: var(--default-shadow)
   border-radius: 4px
   z-index: 5
 
@@ -459,10 +417,15 @@ export default {
   color: var(--font-dark-blue-color)
   &:hover
     color: var(--btn-blue-color)
+
 .create-button
   width: 183px
+
 .select
   height: 40px
+  border: 2px solid var(--border-light-grey-color)
+  border-radius: 4px
+
 .update-button
   width: 132px
 </style>

src/pages/login/TheLogin.vue

@@ -12,19 +12,19 @@
           .flex.flex-col.gap-y-6px
             .flex.non-italic.font-semibold.text-xss Логин
             base-input.h-12.font-medium(
-            :style="{borderColor: !this.authorized ? this.redColor : ''}"
+            :style="{borderColor: wrongData ? this.redColor : ''}"
             v-model:value="user.username"
             type="text"
             placeholder="Введите ваш логин")
           .flex.flex-col.gap-y-6px.relative
             .flex.non-italic.font-semibold.text-xss Пароль
             base-input.h-12(
-            :style="{borderColor: this.authorized ? '' : this.redColor}"
+            :style="{borderColor: wrongData ? this.redColor : ''}"
             v-model:value="user.password"
             :type="changeType"
             placeholder="Введите ваш пароль")
             img.absolute.z-10.right-4.bottom-14px.cursor-pointer(:src="changeIcon", alt="eyePassword", @click="changeView")
-          span.font-medium(:style="{color: this.redColor}", v-show="!authorized") Неверный логин или пароль
+          span.font-medium(:style="{color: this.redColor}", v-show="wrongData") Неверный логин или пароль
           .flex.items-center.gap-x-11px
             input.w-4.h-4.checkbox.cursor-pointer(@click="persist", type="checkbox")
             .flex.non-italic.font-medium.base Запомнить меня
@@ -38,7 +38,6 @@ import BaseInput from "@/components/base/BaseInput";
 import BaseButton from "@/components/base/BaseButton";
 import viewPasswordIcon from "@/assets/icons/eye.svg";
 import hidePasswordIcon from "@/assets/icons/openEye.svg";
-import loginBackground from "@/assets/images/loginBG.svg";
 
 import logoMark from "@/assets/images/logoMark.svg";
 export default {
@@ -50,7 +49,6 @@ export default {
       isView: false,
       viewPassword: viewPasswordIcon,
       hidePassword: hidePasswordIcon,
-      loginBackground,
       logoMark,
       authorized: true,
       user: { username: "", password: "" },
@@ -58,6 +56,9 @@ export default {
     };
   },
   computed: {
+    wrongData() {
+      return !this.authorized && !this.user.username && !this.user.password;
+    },
     changeIcon() {
       return !this.isView ? this.viewPassword : this.hidePassword;
     },
@@ -67,6 +68,11 @@ export default {
     disabledButton() {
       return this.user.username && this.user.password ? false : true;
     },
+    showBorder() {
+      return !this.authorized && !this.user.username && !this.user.password
+        ? true
+        : false;
+    },
   },
   methods: {
     changeView() {
@@ -88,10 +94,8 @@ export default {
             return result.json();
           } else {
             this.authorized = false;
-            if (!this.authorized) {
+            this.user.username = "";
-              this.user.username = "";
+            this.user.password = "";
-              this.user.password = "";
-            }
           }
         })
         .then((token) => {