fix: HabitForm UI

Author: zackha

app/components/EmptyHabits.vue

@@ -17,7 +17,7 @@ const createHabitModal = ref(false);
       <div class="text-xs text-neutral-400">Create a new habit to track your progress</div>
     </div>
   </ContentBox>
-  <UModal v-model="createHabitModal" :ui="{ width: 'w-80', background: '', shadow: '', overlay: { base: 'backdrop-blur-2xl', background: 'dark:bg-black/60' } }">
+  <UModal v-model="createHabitModal" :ui="{ width: 'w-96', background: '', shadow: '', overlay: { base: 'backdrop-blur-2xl', background: 'dark:bg-black/60' } }">
     <HabitForm @habitAdded="createHabitModal = false" />
   </UModal>
 </template>

app/components/HabitForm.vue

@@ -44,13 +44,66 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
 </script>
 
 <template>
-  <UForm :schema="schema" :state="formState" class="flex flex-col gap-4" @submit="onSubmit">
-    <UFormGroup name="title">
-      <UInput size="lg" v-model="formState.title" placeholder="Title" />
-    </UFormGroup>
-    <UFormGroup name="description">
-      <UTextarea size="lg" v-model="formState.description" placeholder="Description (Markdown supported)" autoresize :maxrows="3" />
-    </UFormGroup>
-    <UButton size="lg" type="submit" label="Add Habit" block />
-  </UForm>
+  <div class="p-8">
+    <UForm :schema="schema" :state="formState" class="flex flex-col gap-4" @submit="onSubmit">
+      <UFormGroup name="title">
+        <div class="input-container">
+          <input v-model="formState.title" placeholder="Title..." />
+        </div>
+      </UFormGroup>
+      <UFormGroup name="description">
+        <div class="input-container">
+          <textarea rows="5" v-model="formState.description" placeholder="Description (Markdown supported)..."></textarea>
+        </div>
+      </UFormGroup>
+      <button type="submit" class="button bg-green-400 px-2.5 py-3 font-semibold text-green-950 outline-none hover:bg-green-300">Add Habit</button>
+    </UForm>
+  </div>
 </template>
+
+<style lang="postcss" scoped>
+.input-container {
+  @apply relative flex w-full items-center;
+}
+
+input,
+textarea {
+  box-shadow:
+    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 w-full rounded-2xl bg-white/10 p-4 outline-none transition-all placeholder:text-white/35;
+  &:focus {
+    @apply bg-white/15;
+  }
+}
+
+textarea {
+  resize: none;
+  --sb-track-color: rgba(0, 0, 0, 0);
+  --sb-thumb-color: #666;
+  --sb-size: 12px;
+}
+
+textarea::-webkit-scrollbar {
+  width: var(--sb-size);
+}
+
+textarea::-webkit-scrollbar-track {
+  background: var(--sb-track-color);
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+textarea::-webkit-scrollbar-thumb {
+  background: var(--sb-thumb-color);
+  border-radius: 12px;
+  border: 4px solid #242724;
+}
+
+textarea {
+  &:focus::-webkit-scrollbar-thumb {
+    border: 4px solid #333633;
+  }
+}
+</style>

app/components/ProfileActions.vue

@@ -10,7 +10,7 @@ const createHabitModal = ref(false);
     </button>
     <Dropdown />
   </div>
-  <UModal v-model="createHabitModal" :ui="{ width: 'w-80', background: '', shadow: '', overlay: { base: 'backdrop-blur-2xl', background: 'dark:bg-black/60' } }">
+  <UModal v-model="createHabitModal" :ui="{ width: 'w-96', background: '', shadow: '', overlay: { base: 'backdrop-blur-2xl', background: 'dark:bg-black/60' } }">
     <HabitForm @habitAdded="createHabitModal = false" />
   </UModal>
 </template>