done: theme, add: more features (theme, settings page), fix: colors

package.json

@@ -27,6 +27,7 @@
     "@formkit/auto-animate": "^0.8.2",
     "@unhead/vue": "^1.9.14",
     "@vee-validate/zod": "^4.13.1",
+    "@vueuse/components": "^10.11.0",
     "@vueuse/core": "^10.11.0",
     "@vueuse/integrations": "^10.11.0",
     "axios": "^1.7.2",

src/app/App.vue

@@ -1,5 +1,16 @@
 <script setup lang="ts">
+import { useColorMode, useDark } from '@vueuse/core';
+import { computed } from 'vue';
 import { Toaster } from 'vue-sonner';
+
+type ToasterTheme = 'dark' | 'light';
+
+useColorMode();
+const isDark = useDark();
+
+const toasterTheme = computed<ToasterTheme>(() => {
+  return isDark.value ? 'dark' : 'light';
+});
 </script>
 
 <template>
@@ -10,5 +21,5 @@ import { Toaster } from 'vue-sonner';
       </KeepAlive>
     </RouterView>
   </component>
-  <Toaster position="bottom-right" close-button />
+  <Toaster :theme="toasterTheme" position="bottom-right" />
 </template>

src/app/providers/router/index.ts

@@ -81,7 +81,7 @@ export const router = createRouter({
 router.beforeEach((to, from) => {
   // TODO(@mnenie): Add guards logic
   // Needs to add guard auth logic in router
-  // if (to.meta.requiresAuth === true) {
-  //   return router.push({ name: RouteNames.login });
-  // }
+  if (to.meta.requiresAuth === true) {
+    return router.push({ name: RouteNames.login });
+  }
 });

src/app/styles/primary/base.scss

@@ -12,12 +12,18 @@ html {
   text-size-adjust: 100%;
 }
 
+html.dark {
+  background-color: var(--zinc-700);
+  color-scheme: dark;
+}
+
 body {
   height: 100%;
   width: 100%;
   font-family: Geist, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  overscroll-behavior: none;
 }
 
 .container {

src/app/styles/primary/colors.scss

@@ -1,15 +1,26 @@
 :root {
-  --zinc-950: rgb(9 9 11);
-  --zinc-900: rgb(24 24 27);
-  --zinc-800: rgb(39 39 42);
-  --zinc-700: rgb(63 63 70);
-  --zinc-600: rgb(82 82 91);
-  --zinc-500: rgb(113 113 122);
-  --zinc-400: rgb(161 161 170);
-  --zinc-300: rgb(212 212 216);
-  --zinc-200: rgb(228 228 231);
-  --zinc-100: rgb(244 244 245);
+  --zinc-950: rgb(10 10 10);
+  --zinc-900: rgb(23 23 23);
+  --zinc-800: rgb(28, 28, 28);
+  --zinc-700: rgb(38 38 38);
+  --zinc-600: rgb(64 64 64);
+  --zinc-500: rgb(82 82 82);
+  --zinc-400: rgb(115 115 115);
+  --zinc-300: rgb(163 163 163);
+  --zinc-200: rgb(229 229 229);
+  --zinc-100: rgb(245 245 245);
   --zinc-50: rgb(250 250 250);
   --destructive: rgb(239 68 68);
-  --purple-main: rgb(105 101 219);
+  --purple-main: rgb(136, 133, 226);
+  --dark-border: rgb(28, 28, 28);
+  --dark-destructive: rgb(135, 34, 34);
+
+  // rgb for hover
+  --zinc-rgb-900: 24, 24, 27;
+  --zinc-rgb-800: 28, 28, 28;
+  --zinc-rgb-700: 38, 38, 38;
+  --zinc-rgb-600: 64, 64, 64;
+  --zinc-rgb-50: 250, 250, 250;
+  --purple-rgb: 136, 133, 226;
+  --dark-rgb-destructive: 135, 34, 34;
 }

src/app/styles/primary/exceptions.scss

@@ -21,23 +21,27 @@ a {
   padding: 4px 10px !important;
 }
 
-.v-popper__arrow-container{
+.v-popper__arrow-container {
   display: none !important;
 }
 
-canvas{
+canvas {
   width: 100% !important;
   height: 100% !important;
 }
 
-.splitpanes--vertical .splitpanes__pane{
+.splitpanes--vertical .splitpanes__pane {
   transition: none;
 }
 
 .splitpanes--vertical > .splitpanes__splitter {
   display: none;
 }
 
-.splitpanes__pane{
-  overflow: unset;
+[data-sonner-toaster][data-theme='dark'] {
+  --normal-bg: var(--zinc-700) !important;
+  --normal-border: hsl(0, 0%, 20%);
+  --normal-text: var(--gray1);
+  --success-border: hsl(147, 100%, 12%);
+  --info-bg: var(--zinc-700);
 }

src/app/styles/primary/typography.scss

@@ -51,3 +51,60 @@
   line-height: 16px;
   font-weight: 400;
 }
+
+@media screen and (max-width: 1440px) {
+  .heading-1 {
+    font-size: 32px;
+    line-height: 44px;
+    font-weight: 600;
+  }
+
+  .heading-2 {
+    font-size: 30px;
+    line-height: 40px;
+    font-weight: 600;
+  }
+
+  .heading-3 {
+    font-size: 26px;
+    line-height: 32px;
+    font-weight: 600;
+  }
+
+  .heading-4 {
+    font-size: 22px;
+    line-height: 32px;
+    font-weight: 500;
+  }
+
+  .text-xl {
+    font-size: 20px;
+    line-height: 28px;
+    font-weight: 500;
+  }
+
+  .text-lg {
+    font-size: 18px;
+    line-height: 28px;
+    font-weight: 400;
+  }
+
+  .text-base {
+    font-size: 14px;
+    line-height: 24px;
+    font-weight: 400;
+  }
+
+  .text-sm {
+    font-size: 13px;
+    line-height: 20px;
+    font-weight: 400;
+  }
+
+  .text-xs {
+    font-size: 11px;
+    line-height: 16px;
+    font-weight: 400;
+  }
+
+}

src/entities/board/ui/BoardPreviewCard.vue

@@ -5,8 +5,8 @@ import { UserAvatar } from '@/entities/user';
 import { computed } from 'vue';
 
 defineProps<{
-  board: BoardPreview,
-}>()
+  board: BoardPreview;
+}>();
 
 const userPosition = computed(() => {
   return (board: BoardPreview, user: UserType) => {
@@ -16,12 +16,12 @@ const userPosition = computed(() => {
 </script>
 <template>
   <div :class="$style.active_board">
-    <div>
+    <div :class="$style.text">
       <p class="text-base" style="font-weight: 500">{{ board.title }}</p>
-      <span class="text-xs" style="color: var(--zinc-500)">{{ board.description }}</span>
+      <span class="text-xs">{{ board.description }}</span>
     </div>
     <div :class="$style.bottom_part">
-      <span class="text-xs" style="color: var(--zinc-500)"> Updated: May 2024</span>
+      <span class="text-xs"> Updated: May 2024</span>
       <div :class="$style.users">
         <template v-for="user in board.users" :key="user._id">
           <UserAvatar
@@ -54,12 +54,22 @@ const userPosition = computed(() => {
   padding: 15px;
   cursor: pointer;
 
+  .text {
+    & span {
+      color: var(--zinc-500);
+    }
+  }
+
   .bottom_part {
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     width: 100%;
 
+    & > span {
+      color: var(--zinc-500);
+    }
+
     .users {
       position: relative;
       display: flex;
@@ -76,4 +86,27 @@ const userPosition = computed(() => {
     }
   }
 }
+
+:global(html.dark) {
+  .active_board {
+    background-color: rgba(var(--zinc-rgb-600), 0.4);
+    border-color: var(--zinc-600);
+    color: var(--zinc-100);
+
+    .text {
+      & p {
+        color: var(--zinc-100);
+      }
+      & span {
+        color: var(--zinc-200);
+      }
+    }
+
+    .bottom_part{
+      & > span {
+        color: var(--zinc-300)
+      }
+    }
+  }
+}
 </style>

src/entities/chart/ui/ChartItem.vue

@@ -9,7 +9,7 @@ defineProps<{
 <template>
   <div :class="$style.chart_container">
     <h4 class="heading-4">{{ chart.title }}</h4>
-    <p class="text-sm" style="color: var(--zinc-500)">
+    <p class="text-sm">
       {{ chart.description }}
     </p>
     <div :class="$style.chart">
@@ -23,11 +23,23 @@ defineProps<{
   display: flex;
   flex-direction: column;
   width: 100%;
+
+  & > p {
+    color: var(--zinc-500);
+  }
+
+  .chart {
+    width: 100%;
+    height: 100%;
+    margin-top: 20px;
+  }
 }
 
-.chart {
-  width: 100%;
-  height: 100%;
-  margin-top: 20px;
+:global(html.dark) {
+  .chart_container {
+    & > p {
+      color: var(--zinc-300);
+    }
+  }
 }
 </style>

src/entities/template/ui/TemplateItem.vue

@@ -42,7 +42,7 @@ defineProps<{
   align-items: flex-start;
   @include transition;
 
-  &:hover{
+  &:hover {
     border: 1px solid var(--purple-main);
   }
 
@@ -85,4 +85,22 @@ defineProps<{
     }
   }
 }
+
+:global(html.dark) {
+  .item {
+    background-color: rgba(var(--zinc-rgb-600), 0.4);
+    border-color: var(--zinc-600);
+    &:hover {
+      border-color: var(--zinc-400);
+    }
+    .img_wrapper{
+      border-color: var(--zinc-600);
+    }
+    .main_content{
+      & span {
+        color: var(--zinc-200);
+      }
+    }
+  }
+}
 </style>

src/entities/user/ui/UserAvatar.vue

@@ -9,8 +9,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  height: 32px;
-  width: 32px;
+  height: 29px;
+  width: 29px;
   user-select: none;
   overflow: hidden;
   background-color: var(--zinc-100);

src/features/auth/config/reviews.ts

@@ -15,6 +15,6 @@ export const reviews = ref<Review[]>([
   {
     id: '2',
     author: '@alexpeshkov',
-    text: `Jenda is just 🔥 Now I understand why many people like to use it instead of analogues.`
+    text: `So, Jenda is just 🔥 Now I understand why many people like to use it.`
   }
 ]);