fix: espresso design on Daily, Weekly page

shariquerik · Sep 21, 2023 · 3417600 · 3417600
1 parent c409c93
commit 3417600
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 14 deletions.
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -148,30 +148,28 @@ notes.list.fetch()
         </div>
       </div>
     </div>
-    <div class="main flex-1 p-6">
-      <div class="head flex justify-center items-center">
-        <Button appearance="minimal" @click="store.change_to_previous_date">
+    <div class="main flex-1">
+      <div class="head flex justify-center items-center border-b p-3 mb-3">
+        <Button variant="ghosted" @click="store.change_to_previous_date">
           <FeatherIcon
             name="chevron-left"
             :stroke-width="2"
             class="h-5 w-5 text-gray-600 cursor-pointer"
           />
         </Button>
-        <div class="px-2 py-0.5 flex-1 text-center text-gray-600 text-2xl">
+        <div class="flex-1 text-center text-gray-700 text-xl">
           {{ store.date_text }}
         </div>
-        <Button appearance="minimal" @click="store.change_to_next_date">
+        <Button variant="ghosted" @click="store.change_to_next_date">
           <FeatherIcon
             name="chevron-right"
             :stroke-width="2"
             class="h-5 w-5 text-gray-600 cursor-pointer"
           />
         </Button>
       </div>
-      <div class="border-b border-gray-200 my-6"></div>
       <div
-        class="notes flex justify-center overflow-y-auto"
-        :style="{ height: 'calc(100vh - 8rem)' }"
+        class="notes flex justify-center overflow-y-auto h-[calc(100vh-5rem)]"
       >
         <router-view />
       </div>

diff --git a/frontend/src/pages/Daily.vue b/frontend/src/pages/Daily.vue
@@ -1,10 +1,10 @@
 <template>
   <div
     v-if="notes_data?.length === 0"
-    class="flex flex-col gap-2 justify-center items-center h-full"
+    class="flex flex-col gap-3 justify-center items-center h-full"
   >
     <div class="text-gray-500 text-xl">No notes found</div>
-    <Button class="ml-2" appearance="primary" @click="store.open_new_dialog">
+    <Button class="ml-2" variant="solid" @click="store.open_new_dialog">
       + Add Note
     </Button>
   </div>

diff --git a/frontend/src/pages/Weekly.vue b/frontend/src/pages/Weekly.vue
@@ -1,10 +1,10 @@
 <template>
   <div
     v-if="notes_data?.length === 0"
-    class="flex flex-col gap-2 justify-center items-center h-full"
+    class="flex flex-col gap-3 justify-center items-center h-full"
   >
     <div class="text-gray-500 text-xl">No notes found</div>
-    <Button class="ml-2" appearance="primary" @click="store.open_new_dialog">
+    <Button class="ml-2" variant="solid" @click="store.open_new_dialog">
       + Add Note
     </Button>
   </div>
@@ -17,12 +17,12 @@
     item-key="name"
     @end="update_note_sequence(notes_data)"
   >
-    <template #item="{ element, index }">
+    <template #item="{ element }">
       <div class="group flex items-center py-2 last:mb-0 cursor-pointer">
         <Note v-if="element.type != 'Weekly'" :note="element" />
         <div
           v-else
-          class="flex-1 text-center text-gray-900 bg-gray-100 rounded-md text-2xl mx-6"
+          class="flex-1 text-center text-gray-900 bg-gray-100 rounded-md text-xl mx-6 py-1"
         >
           {{ element.title }}
         </div>