feat: add test for layout widget and media styles, fix: vercel 404

src/app/styles/primary/typography.scss

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

src/features/auth/ui/BgPanel.vue

@@ -109,4 +109,10 @@ const imgBlockquote = computed(() => {
     }
   }
 }
+
+@media screen and (max-width: 1440px){
+  .container{
+    padding: 0 100px;
+  }
+}
 </style>

src/layouts/ui/AppLayout.vue

@@ -1,5 +1,19 @@
+<script setup lang="ts">
+import { useWindowSize } from '@vueuse/core';
+import { defineAsyncComponent } from 'vue';
+
+const { width } = useWindowSize();
+
+const NotAvailable = defineAsyncComponent(() => {
+  return import('@/widgets/device/ui/NotAvailable.vue');
+});
+</script>
+
 <template>
-  <component :is="$route.meta.layoutComponent">
-    <slot />
-  </component>
+  <div v-if="width >= 1100">
+    <component :is="$route.meta.layoutComponent">
+      <slot />
+    </component>
+  </div>
+  <NotAvailable v-else />
 </template>

src/layouts/ui/DefaultLayout.vue

@@ -6,12 +6,15 @@ import { computed, ref } from 'vue';
 import { Sidebar, HeaderMain } from '@/widgets/layout';
 import { useLocalStorage } from '@vueuse/core';
 import { RouteNames } from '@/shared/config/consts';
+import { useWindowSize } from '@vueuse/core';
+
+const { width } = useWindowSize();
 
 const isExpanded = useLocalStorage('isExpanded', true);
 const transitionFl = ref(false);
 
 const widthSidebar = computed(() => {
-  return isExpanded.value ? '22%' : '4%';
+  return isExpanded.value ? (width.value >= 1380 ? '22%' : '26%') : width.value >= 1380 ? '4%' : '5%';
 });
 const widthMainContainer = computed(() => {
   return `calc(100% - ${widthSidebar.value})`;

src/widgets/auth/ui/AuthContainer.vue

@@ -50,7 +50,7 @@ const info = computed(() => {
 .container {
   position: relative;
   height: 100%;
-  width: 66.6%;
+  width: 68%;
   margin-right: auto;
   margin-left: auto;
   padding-right: 2rem;

src/widgets/device/index.ts

@@ -0,0 +1 @@
+export * from './ui';

src/widgets/device/ui/NotAvailable.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { useDark } from '@vueuse/core';
+import { UiBadge, UiButton } from '@/shared/ui';
+import { redirect } from '@/shared/lib/helpers';
+import { TriangleAlert } from 'lucide-vue-next';
+
+const isDark = useDark();
+</script>
+
+<template>
+  <div class="container">
+    <div :class="$style.items">
+      <div :class="$style.name">
+        <TriangleAlert
+          :class="$style.icon"
+          :color="!isDark ? 'rgb(39 39 42)' : 'rgb(212 212 216)'"
+          :stroke-width="1"
+        />
+        <UiBadge variant="secondary" :class="$style.badge">dev 🔧</UiBadge>
+      </div>
+      <h2 class="heading-2">Jenda is not available for your device type :/</h2>
+
+      <p class="text-sm">
+        Please use our application on devices such as laptops or computers. For more information contact with
+        us.
+      </p>
+      <div :class="$style.btns">
+        <UiButton variant="outline" :class="$style.btn" @click="redirect('https://github.com/mnenie/jenda')">
+          <img :src="!isDark ? '/icons/github.png' : '/icons/github-d.png'" />
+          GitHub
+        </UiButton>
+        <UiButton variant="outline" :class="$style.btn" @click="redirect('https://t.me/youngjuicycashrussia')">
+          <img src="/icons/telegram.webp" />
+          Telegram
+        </UiButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style module lang="scss">
+.items {
+  position: relative;
+  height: 100dvh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  text-align: center;
+
+  .icon {
+    position: relative;
+    margin-bottom: -4px;
+    height: 180px;
+    width: 180px;
+    margin-top: -32px;
+  }
+
+  & > img {
+    width: 200px;
+  }
+
+  .name {
+    position: relative;
+  }
+
+  & >  h2{
+    margin-bottom: 4px;
+  }
+
+  & > p {
+    margin-bottom: 16px;
+    color: var(--zinc-500);
+  }
+
+  .btns {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+
+    .btn {
+      & > img {
+        width: 16px;
+        height: 16px;
+        margin-right: 6px;
+      }
+    }
+  }
+
+  .badge {
+    position: absolute;
+    bottom: 40px;
+    right: 0;
+  }
+}
+
+:global(html.dark){
+  .items {
+    & > p {
+      color: var(--zinc-300);
+    }
+  }
+}
+</style>

src/widgets/device/ui/index.ts

@@ -0,0 +1,3 @@
+import NotAvailable from './NotAvailable.vue';
+
+export { NotAvailable };

src/widgets/layout/ui/header/UserMenu.vue

@@ -2,6 +2,7 @@
 import { useI18n } from 'vue-i18n';
 import { UserAvatar } from '@/entities/user';
 import { UiDropdown, UiDropdownItem, UiDropdownShortcut } from '@/shared/ui';
+import { RouteNames } from '@/shared/config/consts';
 
 const { t } = useI18n();
 </script>
@@ -17,7 +18,7 @@ const { t } = useI18n();
       <span class="text-sm" style="font-weight: 500">[email protected]</span>
     </template>
     <template #content>
-      <UiDropdownItem>
+      <UiDropdownItem @click="$router.push({ name: RouteNames.welcome })">
         {{ t('header.user.welcome') }}
         <UiDropdownShortcut>⌘B</UiDropdownShortcut>
       </UiDropdownItem>

src/widgets/layout/ui/header/__tests__/UserMenu.spec.ts

@@ -0,0 +1,53 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import UserMenu from '../UserMenu.vue';
+import i18n from '@/shared/lib/i18n';
+import { UiDropdownItem } from '@/shared/ui';
+
+vi.mock('@vueuse/integrations/useCookies', () => {
+  return {
+    useCookies: () => ({
+      get: (key: string) => {
+        return key === 'i18n' ? 'en-US' : undefined;
+      }
+    })
+  };
+});
+
+const mockRouter = {
+  push: vi.fn(),
+  beforeEach: vi.fn()
+};
+
+describe('tests for UserMenu.vue', () => {
+  const wrapper = mount(UserMenu, {
+    global: {
+      plugins: [i18n],
+
+      mocks: {
+        t: (key: string) => {
+          const translations: Record<string, string> = {
+            'header.user.welcome': 'welcome',
+            'header.user.logout': 'logout'
+          };
+          return translations[key];
+        },
+        $router: mockRouter
+      }
+    }
+  });
+
+  it('should be render correctly', async () => {
+    await wrapper.findComponent({ name: 'UiDropdown' }).vm.handleDropdown();
+    await nextTick();
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it('should redirect coorectly', async () => {
+    const welcomeTrigger = wrapper.find('.content').findAllComponents(UiDropdownItem).at(0);
+
+    await welcomeTrigger.trigger('click');
+    expect(mockRouter.push).toHaveBeenCalledWith({ name: 'welcome' });
+  });
+});

src/widgets/layout/ui/header/__tests__/__snapshots__/UserMenu.spec.ts.snap

@@ -0,0 +1,20 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`tests for UserMenu.vue > should be render correctly 1`] = `
+"<div class="dropdown">
+  <div class="wrapper">
+    <div class="avatar text-sm"><img src="https://avatars.githubusercontent.com/u/121057011?v=4" style="width: 100%;"></div>
+  </div>
+  <transition-stub name="dropdown" appear="false" persisted="false" css="true">
+    <div class="inside">
+      <div class="header"><span class="text-sm" style="font-weight: 500;">[email protected]</span></div>
+      <div class="content">
+        <div class="item">welcome <div class="shortcut">⌘B</div>
+        </div>
+        <div class="item">logout <div class="shortcut">⇧⌘Q</div>
+        </div>
+      </div>
+    </div>
+  </transition-stub>
+</div>"
+`;

src/widgets/welcome/ui/AboutSection.vue

@@ -96,9 +96,6 @@ const { t } = useI18n();
     & > p {
       color: var(--zinc-300);
     }
-    // & > h1{
-    //   color: var(--zinc-200);
-    // }
   }
 }
 </style>