refactor(home): lightened tool cards (#882)

src/components/ToolCard.vue

@@ -1,78 +1,41 @@
 <script setup lang="ts">
 import { useThemeVars } from 'naive-ui';
 import FavoriteButton from './FavoriteButton.vue';
-import { useAppTheme } from '@/ui/theme/themes';
 import type { Tool } from '@/tools/tools.types';
 
 const props = defineProps<{ tool: Tool & { category: string } }>();
 const { tool } = toRefs(props);
 const theme = useThemeVars();
-
-const appTheme = useAppTheme();
 </script>
 
 <template>
-  <router-link :to="tool.path">
-    <c-card class="tool-card">
+  <router-link :to="tool.path" class="decoration-none">
+    <c-card class="h-full transition transition-duration-0.5s !border-2px !hover:border-primary">
       <div flex items-center justify-between>
-        <n-icon class="icon" size="40" :component="tool.icon" />
+        <n-icon class="text-neutral-400 dark:text-neutral-600" size="40" :component="tool.icon" />
+
         <div flex items-center gap-8px>
-          <n-tag
+          <div
             v-if="tool.isNew"
-            size="small"
-            class="badge-new"
-            round
-            type="success"
-            :bordered="false"
-            :color="{ color: theme.primaryColor, textColor: theme.tagColor }"
+            class="rounded-full px-8px py-3px text-xs text-white dark:text-neutral-800"
+            :style="{
+              'background-color': theme.primaryColor,
+            }"
           >
             {{ $t('toolCard.new') }}
-          </n-tag>
+          </div>
 
           <FavoriteButton :tool="tool" />
         </div>
       </div>
-      <n-h3 class="title">
-        <n-ellipsis>{{ tool.name }}</n-ellipsis>
-      </n-h3>
 
-      <div class="description">
-        <n-ellipsis :line-clamp="2" :tooltip="false" style="min-height: 44.78px">
-          {{ tool.description }}
-          <br>&nbsp;
-        </n-ellipsis>
+      <div class="truncat my-5px text-lg text-black dark:text-white">
+        {{ tool.name }}
+      </div>
+
+      <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">
+        {{ tool.description }}
       </div>
     </c-card>
   </router-link>
 </template>
-
-<style lang="less" scoped>
-a {
-  text-decoration: none;
-}
-
-.tool-card {
-  transition: border-color ease 0.5s;
-  border-width: 2px !important;
-  color: transparent;
-
-  &:hover {
-    border-color: v-bind('appTheme.primary.colorHover');
-  }
-
-  .icon {
-    opacity: 0.6;
-    color: v-bind('theme.textColorBase');
-  }
-
-  .title {
-    margin: 5px 0;
-  }
-
-  .description {
-    opacity: 0.6;
-    color: v-bind('theme.textColorBase');
-    margin: 5px 0;
-  }
-}
-</style>