Update components styles

heyform · Jul 1, 2024 · 18b838e · 18b838e
1 parent b4ff987
commit 18b838e
Show file tree

Hide file tree

Showing 11 changed files with 12,014 additions and 15 deletions.
diff --git a/components/content/Card.vue b/components/content/Card.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="[&:not(:first-child)]:mt-5 group-has-[div]:mt-4">
-    <NuxtLink :to="to" :target="target">
-      <UiCard class="transition-all relative" :class="[to && 'hover:bg-muted']">
+    <NuxtLink class="h-full" :to="to" :target="target">
+      <UiCard class="h-full transition-all relative" :class="[to && 'hover:bg-muted']">
         <UiCardHeader v-if="icon || title || $slots.title || description || $slots.description">
-          <Icon v-if="icon" class="my-4" :name="icon" size="32" />
+          <Icon v-if="icon" class="mb-1.5" :name="icon" size="24" />
           <UiCardTitle v-if="title || $slots.title">
             <ContentSlot :use="$slots.title" unwrap="p" />
             {{ title }}

diff --git a/components/content/Gif.vue b/components/content/Gif.vue
@@ -0,0 +1,18 @@
+<template>
+  <div
+    style="margin-top: 24px; padding: 40px 40px 0 40px; border-radius: 0.5rem; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); background: linear-gradient(to right, rgb(224, 232, 248), rgb(199, 215, 245));">
+    <div
+      style="box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 40px, rgba(0, 0, 0, 0.1) 0px 0px 13.3333px; border-radius: 16px 16px 0px 0px;">
+      <div style="padding: 6px; background: rgb(243, 244, 246); border-radius: 16px 16px 0px 0px;">
+        <img :src="src" :alt="alt" style="border-radius: 16px 16px 0px 0px;" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  src: string
+  alt?: string
+}>();
+</script>
diff --git a/components/layout/Breadcrumb.vue b/components/layout/Breadcrumb.vue
@@ -3,11 +3,8 @@
     <UiBreadcrumbList>
       <template v-for="(breadcrumb, index) in breadcrumbs" :key="breadcrumb.title">
         <UiBreadcrumbItem>
-          <UiBreadcrumbLink
-            class="capitalize"
-            :href="index === 0 ? undefined : breadcrumb.href"
-            :class="{ 'text-foreground': index === breadcrumbs.length - 1 }"
-          >
+          <UiBreadcrumbLink class="capitalize" :href="breadcrumb.href"
+            :class="{ 'text-foreground': index === breadcrumbs.length - 1 }">
             {{ breadcrumb.title }}
           </UiBreadcrumbLink>
         </UiBreadcrumbItem>

diff --git a/components/layout/PrevNextButton.vue b/components/layout/PrevNextButton.vue
@@ -1,12 +1,12 @@
 <template>
   <NuxtLink v-if="prevNext && prevNext._path" :to="prevNext._path" class="basis-1/3">
-    <div class="border p-4 rounded-lg hover:bg-muted/50 transition-all space-y-2 mb-4">
+    <div class="border px-3.5 py-2 rounded-lg hover:bg-muted/50 transition-all space-y-2 mb-4">
       <div class="flex flex-row gap-3">
         <div v-if="side === 'left'" class="flex h-6 w-6 min-w-6">
           <Icon name="lucide:arrow-left" size="20" class="self-center mx-auto" />
         </div>
         <span class="self-center space-y-2">
-          <div class="font-semibold">
+          <div class="font-medium text-sm/6">
             {{ prevNext.title }}
           </div>
         </span>

diff --git a/components/ui/alert/index.ts b/components/ui/alert/index.ts
@@ -5,7 +5,7 @@ export { default as AlertTitle } from './AlertTitle.vue';
 export { default as AlertDescription } from './AlertDescription.vue';
 
 export const alertVariants = cva(
-  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
+  'relative w-full rounded-lg border px-4 py-2.5 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
   {
     variants: {
       variant: {

diff --git a/components/ui/card/CardContent.vue b/components/ui/card/CardContent.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="cn('p-6 pt-0', props.class)">
+  <div :class="cn('px-6 pb-4 text-sm text-muted-foreground', props.class)">
     <slot />
   </div>
 </template>

diff --git a/components/ui/card/CardFooter.vue b/components/ui/card/CardFooter.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="cn('flex items-center p-6 pt-0', props.class)">
+  <div :class="cn('flex items-center px-6 pb-4 text-sm text-muted-foreground', props.class)">
     <slot />
   </div>
 </template>

diff --git a/components/ui/card/CardHeader.vue b/components/ui/card/CardHeader.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="cn('flex flex-col gap-y-1.5 p-6', props.class)">
+  <div :class="cn('flex flex-col gap-y-1.5 px-6 py-4', props.class)">
     <slot />
   </div>
 </template>

diff --git a/components/ui/card/CardTitle.vue b/components/ui/card/CardTitle.vue
@@ -1,5 +1,5 @@
 <template>
-  <h3 :class="cn('text-xl font-semibold leading-none tracking-tight', props.class)
+  <h3 :class="cn('text-base font-medium leading-none tracking-tight', props.class)
     ">
     <slot />
   </h3>

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -10,6 +10,14 @@ export default defineNuxtConfig({
     '@nuxt/icon',
     '@nuxtjs/color-mode',
   ],
+  image: {
+    quality: 100,
+    ipx: {
+      sharpOptions: {
+        limitInputPixels: 0
+      }
+    }
+  },
   shadcn: {
     /**
      * Prefix for all the imported component