From 507aedceeede4c794299feb4b4d12164cf667e6a Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Wed, 23 Nov 2022 16:08:49 +0800
Subject: [PATCH] ui: restyling navbar

---
 components/account/AccountPaginator.vue       |  1 -
 components/common/CommonTabs.vue              | 28 +++++++++++++++----
 .../conversation/ConversationPaginator.vue    |  1 -
 components/main/MainContent.vue               | 13 ++++++---
 components/notification/NotificationCard.vue  |  2 +-
 .../notification/NotificationPaginator.vue    |  3 +-
 components/timeline/TimelinePaginator.vue     |  1 -
 pages/bookmarks.vue                           |  4 +--
 pages/conversations.vue                       |  4 +--
 pages/explore.vue                             |  2 +-
 pages/favourites.vue                          |  4 +--
 pages/home.vue                                |  4 +--
 pages/notifications.vue                       |  8 ++++--
 pages/public/index.vue                        |  4 +--
 pages/public/local.vue                        |  5 ++--
 pages/tags/[tag].vue                          |  4 +--
 styles/vars.css                               |  4 +--
 17 files changed, 56 insertions(+), 36 deletions(-)

diff --git a/components/account/AccountPaginator.vue b/components/account/AccountPaginator.vue
index add4b7d0..271a4f88 100644
--- a/components/account/AccountPaginator.vue
+++ b/components/account/AccountPaginator.vue
@@ -9,7 +9,6 @@ const { paginator } = defineProps<{
 <template>
   <CommonPaginator
     :paginator="paginator"
-    border="t base"
   >
     <template #default="{ item }">
       <AccountCard
diff --git a/components/common/CommonTabs.vue b/components/common/CommonTabs.vue
index c5ab6c6d..e89c2d6b 100644
--- a/components/common/CommonTabs.vue
+++ b/components/common/CommonTabs.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
 defineProps<{
-  modelValue: string
   options: string[]
 }>()
-defineEmits(['update:modelValue'])
+
+const { modelValue } = defineModel<{
+  modelValue: string
+}>()
 
 function toValidName(otpion: string) {
   return otpion.toLowerCase().replace(/[^a-zA-Z0-9]/g, '-')
@@ -11,11 +13,27 @@ function toValidName(otpion: string) {
 </script>
 
 <template>
-  <div flex w-full>
+  <div flex w-full text-lg>
     <template v-for="option in options" :key="option">
       <input
-        :id="`tab-${toValidName(option)}`" :checked="modelValue === option" :value="option" type="radio" name="tabs" display="none" @change="$emit('update:modelValue', option)"
-      ><label flex w-full justify-center h-8 cursor-pointer :for="`tab-${toValidName(option)}`" :class="modelValue === option ? 'color-primary' : 'hover:color-purple'" tabindex="1" @keypress.enter="$emit('update:modelValue', option)">{{ option }}</label>
+        :id="`tab-${toValidName(option)}`"
+        :checked="modelValue === option"
+        :value="option"
+        type="radio"
+        name="tabs"
+        display="none"
+        @change="modelValue = option"
+      ><label
+        flex flex-1 cursor-pointer pt2 m1 rounded transition-all
+        :for="`tab-${toValidName(option)}`"
+        tabindex="1"
+        hover:bg-active
+        @keypress.enter="modelValue = option"
+      ><span
+        mxa px2
+        :class="modelValue === option ? 'font-bold border-b-3 border-primary' : 'op50 hover:op50'"
+      >{{ option }}</span>
+      </label>
     </template>
   </div>
 </template>
diff --git a/components/conversation/ConversationPaginator.vue b/components/conversation/ConversationPaginator.vue
index 29cd2b42..5a0a3e70 100644
--- a/components/conversation/ConversationPaginator.vue
+++ b/components/conversation/ConversationPaginator.vue
@@ -9,7 +9,6 @@ const { paginator } = defineProps<{
 <template>
   <CommonPaginator
     :paginator="paginator"
-    border="t base"
   >
     <template #default="{ item }">
       <ConversationCard
diff --git a/components/main/MainContent.vue b/components/main/MainContent.vue
index b30d991a..b2f6fd51 100644
--- a/components/main/MainContent.vue
+++ b/components/main/MainContent.vue
@@ -1,14 +1,19 @@
 <template>
   <div relative>
-    <div sticky top-0 bg="#222" z10>
-      <div flex justify-between>
-        <div p3 flex gap-1>
+    <div
+      sticky top-0 z10
+      border="b base"
+      backdrop="blur-10px brightness-120 dark:brightness-80"
+    >
+      <div flex justify-between px5 py4>
+        <div flex gap-1>
           <slot name="title" />
         </div>
-        <div p3 flex>
+        <div flex>
           <slot name="actions" />
         </div>
       </div>
+      <slot name="header" />
     </div>
     <div>
       <slot />
diff --git a/components/notification/NotificationCard.vue b/components/notification/NotificationCard.vue
index 64a067a1..a445ce24 100644
--- a/components/notification/NotificationCard.vue
+++ b/components/notification/NotificationCard.vue
@@ -18,7 +18,7 @@ const displayName = $computed(() => getDisplayName(notification.account))
     </template>
     <template v-if="notification.type === 'follow_request'">
       <div flex ml-4>
-        <div i-ri:user-follow-fill mr-3 color-gray />{{ displayName }} requested to follow you
+        <div i-ri:user-follow-fill mr-3 />{{ displayName }} requested to follow you
       </div>
       <!-- TODO: accept request -->
       <AccountCard :account="notification.account" p3 />
diff --git a/components/notification/NotificationPaginator.vue b/components/notification/NotificationPaginator.vue
index 36d480e8..3f0e04bd 100644
--- a/components/notification/NotificationPaginator.vue
+++ b/components/notification/NotificationPaginator.vue
@@ -9,12 +9,11 @@ const { paginator } = defineProps<{
 <template>
   <CommonPaginator
     :paginator="paginator"
-    border="t base"
   >
     <template #default="{ item }">
       <NotificationCard
         :notification="item"
-        border="t base" pt-4
+        border="b base" pt-4
       />
     </template>
   </CommonPaginator>
diff --git a/components/timeline/TimelinePaginator.vue b/components/timeline/TimelinePaginator.vue
index ed65d43a..ff308602 100644
--- a/components/timeline/TimelinePaginator.vue
+++ b/components/timeline/TimelinePaginator.vue
@@ -9,7 +9,6 @@ const { paginator } = defineProps<{
 <template>
   <CommonPaginator
     :paginator="paginator"
-    border="t base"
   >
     <template #default="{ item }">
       <StatusCard
diff --git a/pages/bookmarks.vue b/pages/bookmarks.vue
index 336ef6e1..8a545a1a 100644
--- a/pages/bookmarks.vue
+++ b/pages/bookmarks.vue
@@ -9,10 +9,10 @@ const paginator = masto.bookmarks.getIterator()
 <template>
   <MainContent>
     <template #title>
-      <div i-ri:bookmark-fill h-6 mr-1 /><span>Bookmarks</span>
+      <span text-lg font-bold>Bookmarks</span>
     </template>
     <template #actions>
-      <div color-gray i-ri:equalizer-fill mr-1 h-6 />
+      <div i-ri:equalizer-fill mr-1 h-6 />
     </template>
     <slot>
       <TimelinePaginator :paginator="paginator" />
diff --git a/pages/conversations.vue b/pages/conversations.vue
index 0c2bb1c7..bdbb3814 100644
--- a/pages/conversations.vue
+++ b/pages/conversations.vue
@@ -9,10 +9,10 @@ const paginator = masto.conversations.getIterator()
 <template>
   <MainContent>
     <template #title>
-      <div i-ri:at-line h-6 mr-1 /><span>Conversations</span>
+      <span text-lg font-bold>Conversations</span>
     </template>
     <template #actions>
-      <div color-gray i-ri:equalizer-fill mr-1 h-6 />
+      <div i-ri:equalizer-fill mr-1 h-6 />
     </template>
     <slot>
       <ConversationPaginator :paginator="paginator" />
diff --git a/pages/explore.vue b/pages/explore.vue
index 46787e33..f960e2a4 100644
--- a/pages/explore.vue
+++ b/pages/explore.vue
@@ -12,7 +12,7 @@ const paginator = masto.trends.getStatuses()
       <div i-ri:hashtag h-6 mr-1 /><span>Explore</span>
     </template>
     <template #actions>
-      <div color-gray i-ri:equalizer-fill mr-1 h-6 />
+      <div i-ri:equalizer-fill mr-1 h-6 />
     </template>
     <slot>
       <!-- TODO: Tabs for trending statuses, tags, and links -->
diff --git a/pages/favourites.vue b/pages/favourites.vue
index 1ab38091..daca6c5a 100644
--- a/pages/favourites.vue
+++ b/pages/favourites.vue
@@ -9,10 +9,10 @@ const paginator = masto.favourites.getIterator()
 <template>
   <MainContent>
     <template #title>
-      <div i-ri:heart-fill h-6 mr-1 /><span>Favourites</span>
+      <span text-lg font-bold>Favourites</span>
     </template>
     <template #actions>
-      <div color-gray i-ri:equalizer-fill mr-1 h-6 />
+      <div i-ri:equalizer-fill mr-1 h-6 />
     </template>
     <slot>
       <TimelinePaginator :paginator="paginator" />
diff --git a/pages/home.vue b/pages/home.vue
index bb63043f..dc3e1e45 100644
--- a/pages/home.vue
+++ b/pages/home.vue
@@ -9,10 +9,10 @@ const paginator = masto.timelines.getHomeIterable()
 <template>
   <MainContent>
     <template #title>
-      <div i-ri:home-fill h-6 mr-1 /><span>Home</span>
+      <span text-lg font-bold>Home</span>
     </template>
     <template #actions>
-      <div color-gray i-ri:equalizer-fill mr-1 h-6 />
+      <div i-ri:equalizer-fill mr-1 h-6 />
     </template>
     <slot>
       <TimelinePaginator :paginator="paginator" />
diff --git a/pages/notifications.vue b/pages/notifications.vue
index f205c5cb..81825666 100644
--- a/pages/notifications.vue
+++ b/pages/notifications.vue
@@ -14,13 +14,15 @@ const paginator = $computed(() => {
 <template>
   <MainContent>
     <template #title>
-      <div i-ri:notification-2-fill h-6 mr-1 /><span>Notifications</span>
+      <span text-lg font-bold>Notifications</span>
     </template>
     <template #actions>
-      <div color-gray i-ri:equalizer-fill mr-1 h-6 />
+      <div i-ri:equalizer-fill mr-1 h-6 />
+    </template>
+    <template #header>
+      <CommonTabs v-model="tab" :options="tabNames" />
     </template>
     <slot>
-      <CommonTabs v-model="tab" :options="tabNames" />
       <NotificationPaginator :key="tab" :paginator="paginator" />
     </slot>
   </MainContent>
diff --git a/pages/public/index.vue b/pages/public/index.vue
index c41566f5..a1a80813 100644
--- a/pages/public/index.vue
+++ b/pages/public/index.vue
@@ -6,10 +6,10 @@ const paginator = masto.timelines.getPublicIterable()
 <template>
   <MainContent>
     <template #title>
-      <div i-ri:earth-fill h-6 mr-1 /><span>Federated Timeline</span>
+  <span text-lg font-bold>Federated Timeline</span>
     </template>
     <template #actions>
-      <div color-gray i-ri:equalizer-fill mr-1 h-6 />
+      <div i-ri:equalizer-fill mr-1 h-6 />
     </template>
     <slot>
       <TimelinePaginator :paginator="paginator" />
diff --git a/pages/public/local.vue b/pages/public/local.vue
index 08459eed..104cc20a 100644
--- a/pages/public/local.vue
+++ b/pages/public/local.vue
@@ -4,17 +4,16 @@ const router = useRouter()
 if (!token.value)
   router.replace('/public')
 
-
 const { data: timelines } = await useAsyncData('timelines-home', () => masto.timelines.fetchPublic({ local: true }).then(r => r.value))
 </script>
 
 <template>
   <MainContent>
     <template #title>
-      <div i-ri:group-fill h-6 mr-1 /><span>Local timeline</span>
+      <span text-lg font-bold>Local timeline</span>
     </template>
     <template #actions>
-      <div color-gray i-ri:equalizer-fill mr-1 h-6 />
+      <div i-ri:equalizer-fill mr-1 h-6 />
     </template>
     <slot>
       <TimelineList :timelines="timelines" />
diff --git a/pages/tags/[tag].vue b/pages/tags/[tag].vue
index 611fa13d..75305ac3 100644
--- a/pages/tags/[tag].vue
+++ b/pages/tags/[tag].vue
@@ -8,10 +8,10 @@ const paginator = masto.timelines.getHashtagIterable(tag)
 <template>
   <MainContent>
     <template #title>
-      <div i-ri:hashtag h-6 mr-1 /><span>{{ tag }}</span>
+      <span text-lg font-bold>#{{ tag }}</span>
     </template>
     <template #actions>
-      <div color-gray i-ri:equalizer-fill mr-1 h-6 />
+      <div i-ri:equalizer-fill mr-1 h-6 />
     </template>
     <slot>
       <TimelinePaginator :paginator="paginator" />
diff --git a/styles/vars.css b/styles/vars.css
index 4d5bb14c..59480ba6 100644
--- a/styles/vars.css
+++ b/styles/vars.css
@@ -3,13 +3,13 @@
   --c-primary-active: #3a7b8c;
   --c-border: #88888820;
   --c-bg-base: #fff;
-  --c-bg-active: #efefef;
+  --c-bg-active: #f6f6f6;
   --c-text-base: #222;
   --c-text-secondary: #888;
 }
 
 .dark {
   --c-bg-base: #111;
-  --c-bg-active: #222;
+  --c-bg-active: #151515;
   --c-text-base: #fff;
 }