fix: UI

zackha · Jan 24, 2025 · 51df517 · 51df517
1 parent f0e57c1
commit 51df517
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 9 deletions.
diff --git a/app/components/ContentBox.vue b/app/components/ContentBox.vue
@@ -10,9 +10,5 @@
     inset 0.5px 0.5px 1px 0px rgba(255, 255, 255, 0.1),
     inset -0.5px -0.5px 1px 0px rgba(0, 0, 0, 0.1),
     rgba(0, 0, 0, 0.2) 0px 3px 10px -5px;
-  @apply rounded-3xl bg-neutral-300/5 transition;
-  &:hover {
-    @apply bg-white/10;
-  }
 }
 </style>
diff --git a/app/components/HabitCard.vue b/app/components/HabitCard.vue
@@ -94,7 +94,7 @@ const items = (habit: Habit) => [
 </script>
 
 <template>
-  <ContentBox class="mx-4 mb-4 flex cursor-pointer gap-3 p-3" @click="openHabitModal = true">
+  <ContentBox class="mx-4 mb-4 flex cursor-pointer gap-3 rounded-3xl bg-neutral-300/5 p-3 transition hover:bg-white/10" @click="openHabitModal = true">
     <div class="flex flex-1 flex-col gap-1">
       <div class="text-lg font-medium">{{ habit.title }}</div>
       <div class="line-clamp-3 text-xs text-neutral-200" v-html="renderMarkdown(habit.description || '')"></div>
@@ -103,7 +103,7 @@ const items = (habit: Habit) => [
   </ContentBox>
   <UModal v-model="openHabitModal" :ui="{ background: '', shadow: '', overlay: { base: 'backdrop-blur-2xl', background: 'dark:bg-black/60' } }">
     <div class="flex flex-col gap-4">
-      <div class="flex flex-col items-center justify-center gap-2.5 rounded-2xl border border-neutral-400/10 bg-neutral-400/5 p-2.5 shadow-md shadow-black">
+      <ContentBox class="flex flex-col items-center justify-center gap-2.5 rounded-2xl bg-neutral-400/5 p-2.5">
         <div class="flex w-full items-center justify-between gap-2.5 px-0.5 text-neutral-600">
           <div class="text-xs">
             Completion Rate:
@@ -128,7 +128,7 @@ const items = (habit: Habit) => [
           </div>
         </div>
         <HabitHeatmap :habit="habit" :habitDays="287" />
-      </div>
+      </ContentBox>
       <div class="flex flex-col gap-4 px-3">
         <div class="flex items-center justify-between gap-3">
           <UInput v-if="editingHabit === habit.id" :ui="{ wrapper: 'flex-1', rounded: 'rounded-full', size: { sm: 'text-sm font-semibold' } }" v-model="edit.title" />
@@ -146,11 +146,11 @@ const items = (habit: Habit) => [
             </UDropdown>
           </div>
         </div>
-        <div class="flex flex-col gap-2 rounded-2xl border border-neutral-400/10 bg-neutral-200/5 p-3">
+        <ContentBox class="flex flex-col gap-2 rounded-3xl bg-neutral-200/5 p-4 backdrop-blur-xl">
           <div class="text-xs font-medium text-neutral-400">{{ format(habit.createdAt, 'MMM d, yyyy') }}</div>
           <UTextarea v-if="editingHabit === habit.id" v-model="edit.description" autoresize />
           <div v-else class="prose prose-sm dark:prose-invert" v-html="renderMarkdown(habit.description || '')"></div>
-        </div>
+        </ContentBox>
         <div v-if="editingHabit === habit.id" class="flex items-center justify-between">
           <div></div>
           <div class="flex gap-2">