From df9e4edde74f7c72e0711f3493d8d0d659624fad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Mon, 28 Nov 2022 15:16:22 +0800
Subject: [PATCH] ui: add tooltip for footer buttons

---
 components/nav/NavFooter.vue      | 17 +++++++++++------
 components/nav/SelectLanguage.vue |  2 +-
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/components/nav/NavFooter.vue b/components/nav/NavFooter.vue
index 35182589..361d438b 100644
--- a/components/nav/NavFooter.vue
+++ b/components/nav/NavFooter.vue
@@ -6,12 +6,17 @@ const buildTimeAgo = useTimeAgo(buildTime)
 <template>
   <footer p4 text-sm text-secondary-light flex="~ col">
     <div flex="~ gap2" items-center mb4>
-      <button i-ri-sun-line dark:i-ri-moon-line text-lg @click="toggleDark()" />
-      <button
-        text-lg
-        :class="isZenMode ? 'i-ri:layout-right-2-line' : 'i-ri:layout-right-line'"
-        @click="toggleZenMode()"
-      />
+      <CommonTooltip content="Toggle theme">
+        <button flex i-ri-sun-line dark:i-ri-moon-line text-lg @click="toggleDark()" />
+      </CommonTooltip>
+      <CommonTooltip content="Zen mode">
+        <button
+          flex
+          text-lg
+          :class="isZenMode ? 'i-ri:layout-right-2-line' : 'i-ri:layout-right-line'"
+          @click="toggleZenMode()"
+        />
+      </CommonTooltip>
       <NavSelectLanguage />
     </div>
     <div>
diff --git a/components/nav/SelectLanguage.vue b/components/nav/SelectLanguage.vue
index 96e1abe4..2e40f423 100644
--- a/components/nav/SelectLanguage.vue
+++ b/components/nav/SelectLanguage.vue
@@ -20,7 +20,7 @@ const languageList = [
 <template>
   <CommonTooltip placement="bottom" content="Select Language">
     <CommonDropdown>
-      <button align-top>
+      <button flex>
         <div i-ri:earth-line text-lg />
       </button>