chore: update templates with unocss

core/client/src/entities/template/ui/ImportTemplate.vue

@@ -1,9 +1,12 @@
-\<template>
-  <div :class="$style.container">
-    <span i-jenda-custom-file-import :class="$style.icon" />
-    <p class="text-sm">
+<template>
+  <div
+    class="flex items-center justify-center flex-col gap-14px mb-25px w-full h-240px bg-neutral-50 border border-dashed border-neutral-200 rounded-md cursor-pointer
+    dark:bg-neutral-700/40 dark:border-neutral-600"
+  >
+    <span i-jenda-custom-file-import class="text-30px text-neutral-600 dark:text-neutral-400" />
+    <p class="text-sm text-neutral-700 dark:text-neutral-200">
       {{ $t('templates.import') }}
-      <span>.json</span>
+      <span class="text-blue-400">.json</span>
     </p>
   </div>
 </template>

core/client/src/entities/template/ui/TemplateItem.vue

@@ -8,96 +8,36 @@ defineProps<{
 </script>
 
 <template>
-  <div :class="$style.item">
-    <div :class="$style.main_content">
-      <UiBadge variant="outline" style="margin-bottom: 12px">
+  <div
+    class="relative flex flex-col justify-between items-start h-fit w-100% border border-solid border-neutral-200
+    rounded-lg cursor-pointer dark:(bg-neutral-700/40 border-neutral-600)"
+  >
+    <div class="py-2 px-3">
+      <UiBadge
+        variant="outline"
+        class="mb-3 !bg-blue-100 text-blue-500 dark:(!bg-blue-800 !text-blue-100 !border-blue-800)"
+      >
         {{ template.tag }}
       </UiBadge>
-      <div :class="$style.text">
+      <div class="flex flex-col gap-1.5 mb-3">
         <p class="text-sm">
           {{ template.title }}
         </p>
-        <span class="text-xs">{{ template.description }}</span>
+        <span
+          class="text-xs text-neutral-500 overflow-hidden text-ellipsis line-clamp-2 break-words
+          dark:text-neutral-400"
+        >
+          {{ template.description }}
+        </span>
       </div>
-      <div :class="$style.bottom">
-        <span class="text-xs">{{ template.date }}</span>
-        <img v-tooltip.bottom-end="$t('templates.user')" :src="template.user" />
+      <div class="flex items-center w-full justify-between">
+        <span class="text-xs text-neutral-600 dark:text-neutral-300">{{ template.date }}</span>
+        <img
+          v-tooltip.bottom-end="$t('templates.user')"
+          :src="template.user"
+          class="w-5 h-5 rounded-full"
+        />
       </div>
     </div>
   </div>
 </template>
-
-<style module lang="scss">
-@use '@/app/styles/mixins' as *;
-
-.item {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  background-color: white;
-  border: 1px solid var(--zinc-200);
-  width: 100%;
-  height: fit-content;
-  border-radius: 10px;
-  cursor: pointer;
-  align-items: flex-start;
-  @include transition;
-
-  .main_content {
-    padding: 8px 12px;
-    width: 100%;
-
-    .text {
-      display: flex;
-      flex-direction: column;
-      gap: 6px;
-      margin-bottom: 12px;
-
-      & > span {
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 2;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        word-wrap: break-word;
-      }
-    }
-
-    & span {
-      color: var(--zinc-500);
-    }
-  }
-
-  .bottom {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-
-    & img {
-      width: 20px;
-      height: 20px;
-      border-radius: 50%;
-    }
-  }
-}
-
-: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>

core/client/src/entities/template/ui/__tests__/__snapshots__/TemplateItem.spec.ts.snap

@@ -1,13 +1,13 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`tests for TemplateItem.vue > should render correctly 1`] = `
-"<div class="item">
-  <div class="main_content">
-    <ui-badge-stub variant="outline" style="margin-bottom: 12px;"></ui-badge-stub>
-    <div class="text">
-      <p class="text-sm">Base Kanban</p><span class="text-xs">Create a basic project with "Base Kanban" template</span>
+"<div class="relative flex flex-col justify-between items-start h-fit w-100% border border-solid border-neutral-200 rounded-lg cursor-pointer dark:bg-neutral-700/40 dark:border-neutral-600">
+  <div class="py-2 px-3">
+    <ui-badge-stub variant="outline" class="mb-3 !bg-blue-100 text-blue-500 !dark:bg-blue-800 !dark:text-blue-100 !dark:border-blue-800"></ui-badge-stub>
+    <div class="flex flex-col gap-1.5 mb-3">
+      <p class="text-sm">Base Kanban</p><span class="text-xs text-neutral-500 overflow-hidden text-ellipsis line-clamp-2 break-words dark:text-neutral-400">Create a basic project with "Base Kanban" template</span>
     </div>
-    <div class="bottom"><span class="text-xs">June 12, 2024</span><img src="https://avatars.githubusercontent.com/u/121057011?v=4"></div>
+    <div class="flex items-center w-full justify-between"><span class="text-xs text-neutral-600 dark:text-neutral-300">June 12, 2024</span><img src="https://avatars.githubusercontent.com/u/121057011?v=4" class="w-5 h-5 rounded-full"></div>
   </div>
 </div>"
 `;

core/client/src/entities/user/ui/UserAvatar.vue

@@ -1,21 +1,8 @@
 <template>
-  <div class="text-sm" :class="[$style.avatar]">
+  <div
+    class="flex items-center justify-center h-30px w-30px select-none overflow-hidden text-sm
+  bg-neutral-100 text-neutral-950 rounded-full"
+  >
     <slot />
   </div>
 </template>
-
-<style module lang="scss">
-.avatar {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 30px;
-  width: 30px;
-  user-select: none;
-  overflow: hidden;
-  background-color: var(--zinc-100);
-  color: var(--zinc-950);
-  border-radius: 50%;
-  cursor: pointer;
-}
-</style>

core/client/src/pages/TemplatesPage.vue

@@ -9,32 +9,11 @@ useHead({
 </script>
 
 <template>
-  <div :class="$style.top">
-    <p class="text-sm">
+  <div class="flex flex-col items-start mb-5">
+    <p class="text-sm text-neutral-600 dark:text-neutral-300">
       {{ $t('templates.description') }}
     </p>
   </div>
   <ImportTemplate />
   <AllTemplates />
 </template>
-
-<style module lang="scss">
-.top {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  margin-bottom: 20px;
-
-  & > p {
-    color: var(--zinc-500);
-  }
-}
-
-:global(html.dark) {
-  .top {
-    & > p {
-      color: var(--zinc-300);
-    }
-  }
-}
-</style>