[WIP] Исправил стили, добавил расписание

src/assets/sass/variables.sass

@@ -50,6 +50,7 @@
   --btn-light-green-color: rgba(60, 217, 75, 0.2)
   --border-light-grey-color-1: rgba(211, 212, 220, 0.5)
   --bg-white-color-0: rgba(255, 255, 255, 0.3)
+  --bg-white-color-1: rgba(255, 255, 255, 0.5)
   --border-red-color: #ff6565
   --btn-grey-color: #e8e8f3
   --pagination-item-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%)

src/components/TheHeader.vue

@@ -84,7 +84,7 @@ export default {
   methods: {
     logout() {
       localStorage.removeItem("tokenAccess");
-      this.$router.push("/login");
+      this.$router.go("/login");
     },
     openPopup() {
       this.showPopup = !this.showPopup;

src/pages/clients/components/ClientsTableRow.vue

@@ -769,5 +769,5 @@ export default {
 .closed-detail .detail
   max-height: 0
 .dots-wrapper
-  width: 36px
+  width: 53px
 </style>

src/pages/clients/components/cells/TableCellBodyName.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .flex.box-border.px-8.pr-4.items-center.gap-x-3.w-full.text-sm(
+  .flex.box-border.px-4.items-center.gap-x-3.w-full.text-sm(
     :style="{ minWidth : width + 'px', maxWidth : width + 'px' }",
   )
     base-avatar(:size="36", :color="avatarColor", v-if="!photo") {{avatar}}

src/pages/login/TheLogin.vue

@@ -25,7 +25,7 @@
               :type="changeType",
               placeholder="Введите ваш пароль"
             )
-            img.absolute.z-10.right-4.bottom-14px.cursor-pointer(:src="changeIcon", alt="eyePassword", @click="changeView")
+            img.absolute.z-10.right-4.bottom-10px.cursor-pointer(:src="changeIcon", alt="eyePassword", @click="changeView")
           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")

src/pages/schedule/TheSchedule.vue

@@ -0,0 +1,86 @@
+<template lang="pug">
+  .wrapper.flex.w-full.relative.mx-2
+    .schedule-wrapper.relative.flex.flex-col.px-6.py-6.h-full.w-full
+      .schedule.flex-col
+        .schedule-header.flex.w-full
+          .flex.items-center(:style="{padding: '16px 102px'}")
+            .text.font-bold Сотрудник
+          .column-wrapper.flex
+            .schedule-column.flex.flex-col.items-center.justify-center.px-2(
+              v-for="day in result",
+              :style="{backgroundColor: day.format('ddd') === 'сб' || day.format('ddd') === 'вс' ? 'var(--bg-white-color-1)' : ''}"
+            )
+              .day.flex {{day.format("D")}}
+              .week.flex {{day.format("ddd")}}
+        .schedule-body.flex.w-full
+          .edit.flex.items-center.justify-center.h-9.w-9
+            .flex.icon-edit
+          .name.flex
+</template>
+
+<script>
+import * as moment from "moment";
+export default {
+  name: "TheSchedule",
+  data() {
+    return {
+      days: "",
+      result: [],
+      startMonth: moment("2022-12-01"),
+    };
+  },
+  methods: {
+    changeDays() {
+      this.days = moment().daysInMonth();
+    },
+    pushMonth() {
+      this.result.push(this.startMonth);
+      for (let i = 2; i <= this.days; i++) {
+        this.result.push(this.startMonth.clone().add(i - 1, "d"));
+      }
+    },
+  },
+  mounted() {
+    this.changeDays();
+    this.pushMonth();
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.wrapper
+  overflow: auto
+  border-top-left-radius: 4px
+  border-top-right-radius: 4px
+
+.schedule-wrapper
+  background-color: var(--default-white)
+  height: calc(100vh - 64px)
+
+.schedule
+  border: 1.5px solid var(--border-light-grey-color-1)
+  border-radius: 4px
+  min-height: 87px
+
+.schedule-header
+  height: 50px
+  background-color: #D7D9FF
+  border-bottom: 1.5px solid var(--border-light-grey-color-1)
+  border-top-left-radius: 2px
+  border-top-right-radius: 2px
+
+.column-wrapper
+  max-width: 1080px
+  overflow: auto
+
+.text
+  color: var(--btn-blue-color)
+
+.name
+  min-width: 255px
+  max-width: 255px
+  border-right: 1.5px solid var(--border-light-grey-color-1)
+
+.edit
+  border-right: 1.5px solid var(--border-light-grey-color-1)
+</style>

src/pages/settings/TheSettings.vue

@@ -1,58 +1,11 @@
 <template lang="pug">
-  div
+  the-schedule
-    v-select(:items="items", placeholder="Выберите значение", v-model="value" )
-    BaseButton(@click="showModal = true") Открыть модалку
-    base-modal(v-model="showModal", title="Тестовый заголовок окна" )
-    base-button(@click="addNotification") Добавить уведомление
-    base-loader
 </template>
 
 <script>
-import VSelect from "@/components/base/BaseSelect";
+import TheSchedule from "@/pages/schedule/TheSchedule.vue";
-import BaseModal from "@/components/base/BaseModal";
-import BaseButton from "@/components/base/BaseButton";
-import TheNotificationProvider from "@/components/Notifications/TheNotificationProvider";
-import { addNotification } from "@/components/Notifications/notificationContext";
-import BaseLoader from "@/components/Loader/BaseLoader";
 export default {
   name: "TheSettings",
-  components: {
+  components: { TheSchedule },
-    BaseLoader,
-    TheNotificationProvider,
-    BaseButton,
-    BaseModal,
-    VSelect,
-  },
-  data() {
-    return {
-      items: [
-        {
-          id: "1",
-          label: "12312312",
-        },
-        {
-          id: "2",
-          label: "123123afsdfasdf12",
-        },
-        {
-          id: "3",
-          label: "123fasvcbxcvbxcvbxcvbxcvdfasdfasdfasdfasd12312",
-        },
-      ],
-      value: "",
-      showModal: false,
-    };
-  },
-  methods: {
-    addNotification() {
-      addNotification(
-        new Date().getTime(),
-        "test",
-        "test-text",
-        "warning",
-        3000
-      );
-    },
-  },
 };
 </script>