From f0afe67158b4d824e5c879e0ede4bb8dab91ec98 Mon Sep 17 00:00:00 2001
From: wengtad <wengtad93@gmail.com>
Date: Sun, 13 Jun 2021 03:48:09 +0800
Subject: [PATCH] add translate on toggle theme mode (#501)

---
 frontend/src/components/UI/TheAppBar.vue | 12 ++++++++----
 frontend/src/locales/messages/en-US.json |  4 +++-
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/UI/TheAppBar.vue b/frontend/src/components/UI/TheAppBar.vue
index 1203045a270f..9da545d54150 100644
--- a/frontend/src/components/UI/TheAppBar.vue
+++ b/frontend/src/components/UI/TheAppBar.vue
@@ -18,9 +18,14 @@
       </div>
 
       <v-spacer></v-spacer>
-      <v-btn icon class="mr-1" small @click="isDark = !isDark">
-        <v-icon v-text="isDark ? 'mdi-weather-night' : 'mdi-weather-sunny'"> </v-icon>
-      </v-btn>
+      <v-tooltip bottom>
+        <template v-slot:activator="{ on, attrs }">
+          <v-btn icon class="mr-1" small v-bind="attrs" v-on="on" @click="isDark = !isDark">
+            <v-icon v-text="isDark ? 'mdi-weather-sunny' : 'mdi-weather-night'"> </v-icon>
+          </v-btn>
+        </template>
+        <span>{{ isDark ? $t("settings.theme.switch-to-light-mode") : $t("settings.theme.switch-to-dark-mode") }}</span>
+      </v-tooltip>
       <div v-if="!isMobile" style="width: 350px;">
         <SearchBar :show-results="true" @selected="navigateFromSearch" :max-width="isMobile ? '100%' : '450px'" />
       </div>
@@ -88,7 +93,6 @@ export default {
       this.$router.push(`/recipe/${slug}`);
     },
     openSidebar() {
-      console.log(this.isDarkMode);
       this.$refs.theSidebar.toggleSidebar();
     },
   },
diff --git a/frontend/src/locales/messages/en-US.json b/frontend/src/locales/messages/en-US.json
index 96832deb4caf..2867467551cc 100644
--- a/frontend/src/locales/messages/en-US.json
+++ b/frontend/src/locales/messages/en-US.json
@@ -339,7 +339,9 @@
       "theme-saved": "Theme Saved",
       "theme-settings": "Theme Settings",
       "theme-updated": "Theme updated",
-      "warning": "Warning"
+      "warning": "Warning",
+      "switch-to-light-mode": "Switch to light mode",
+      "switch-to-dark-mode": "Switch to dark mode"
     },
     "token": {
       "active-tokens": "ACTIVE TOKENS",