Изменил стиль всплывающего окна для ивентов, поправил стили 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.justify-between
+      span.title.text-xl.font-bold Назначение события
+      .flex.pt-2
+        .icon-cancel.close-icon.tesxt-xs.cursor-pointer(@click="clearForm")
+    .flex.flex-col.gap-y-8
       .flex.flex-col.gap-y-2
-      .flex.justify-between.pt-2
+        span.text-xs.opacity-40.font-bold.leading-3 Вид события
-        span.text-xs.opacity-40.font-bold.leading-3 Ответственный
+        base-select.select(
-        .icon-cancel.close-icon.text-xs.cursor-pointer(@click="clearForm")
+          v-model="kind"
+          :items="kindEvents"
+          placeholder="Вид события"
+          :style="{width: '570px'}"
+        )
+      .flex.flex-col(class="gap-y-1.5")
+        span.text-sm Сотрудник
         base-select.select(
           v-if="!selectedEventData.employees",
           :items="ownersList",
           v-model="employees.employee",
-        placeholder="Выберите ответственного",
+          placeholder="Выберите сотрудника",
-        separator
           border-none
         )  
         base-input(
           v-else,
           v-model:value="employeeName",
-        :width-input="72",
+          :width-input="570",
           disabled,
           border-none
         )
-    .flex.flex-col.gap-y-2
+      .flex.flex-col(class="gap-y-1.5")
-      span.text-xs.opacity-40.font-bold.leading-3 Основная информация
+        span.text-sm Клиент
-      .flex.gap-x-4.items-center
-        .flex.gap-x-2.items-center
-          base-input-date(v-model:value="eventDate")
-      .flex.items-center
-        .flex.gap-x-2.items-center
-          base-input-time.item-input.text-base.cursor-text(
-            v-model:value="startTime",
-            :width-input="72"
-          )
-          span —
-          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,
@@ -52,37 +44,24 @@
           :width-input="346"
           border-none
         )
-    .flex.flex-col.gap-y-2
+    .flex.flex-col.gap-y-8
-      span.text-xs.opacity-40.font-bold.leading-3 Вид события
+      .flex.gap-x-4
-      base-select.select(
+        .flex.gap-x-2
-        v-model="kind"
+          .flex.flex-col(class="gap-y-1.5")
-        :items="kindEvents"
+            span.text-xs.opacity-40.font-bold.leading-3 Дата
-        placeholder="Вид события"
+            base-input-date.select(v-model:value="eventDate")
-        separator
+        .flex.gap-x-2.items-center
-        border-none
+          .flex.flex-col(class="gap-y-1.5")
-        :style="kindSelectWidth"
+            span.text-xs.opacity-40.font-bold.leading-3 Начало
+            base-input-time.item-input.text-base.cursor-text.select(
+              v-model:value="startTime",
+              :width-input="72"
             )
-    .flex.flex-col.gap-y-2
+          span.mt-4 —
-      .flex.gap-x-4.items-center
+          .flex.flex-col(class="gap-y-1.5")
-        span.text-xs.opacity-40.font-bold.leading-3 Контакты
+            span.text-xs.opacity-40.font-bold.leading-3 Конец
-        base-button(
+            base-input-time.item-input.text-base.cursor-text.select(
-          left-icon="icon-plus"
+              v-model:value="endTime",
-          rounded secondary
-          :size="24"
-          :icon-left-size="10"
-          id="addContact"
-          @click="(e)=>addContact(e)"
-        )
-      .flex.gap-x-4.items-center(
-        v-for="(contact, index) in listContacts"
-        :key="index"
-      )
-        .icon-mail.text-xl.icon
-        .form-item.flex.gap-x-2.items-center
-          base-input(
-            border-none
-            v-model="contacts"
-            placeholder="E-mail"
               :width-input="72"
             )
     base-button.create-button.text-base.font-semibold(
@@ -91,12 +70,6 @@
       :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,11 +94,9 @@ export default {
             return result.json();
           } else {
             this.authorized = false;
-            if (!this.authorized) {
             this.user.username = "";
             this.user.password = "";
           }
-          }
         })
         .then((token) => {
           if (token) {