refactor: i18n SEO

components/app/Search.vue

@@ -35,7 +35,7 @@
           :key="`map-${mapIndex}`"
         >
           <h5 class="my-2 text-secondaryLight py-2 px-4">
-            {{ map.section }}
+            {{ $t(map.section) }}
           </h5>
           <div
             v-for="(shortcut, shortcutIndex) in map.shortcuts"

components/app/Shortcuts.vue

@@ -59,7 +59,7 @@
           class="space-y-4 py-4 px-6"
         >
           <h5 class="font-semibold text-secondaryDark">
-            {{ map.section }}
+            {{ $t(map.section) }}
           </h5>
           <div
             v-for="(shortcut, shortcutIndex) in map.shortcuts"

components/collections/ChooseType.vue

@@ -3,13 +3,13 @@
     <SmartTabs :id="'collections_tab'" @tab-changed="updateCollectionsType">
       <SmartTab
         :id="'my-collections'"
-        :label="'My Collections'"
+        :label="$t('collection.my_collections')"
         :selected="true"
       />
       <SmartTab
         v-if="currentUser && currentUser.eaInvited && !doc"
         :id="'team-collections'"
-        :label="'Team Collections'"
+        :label="$t('collection.team_collections')"
       >
         <SmartIntersection @intersecting="onTeamSelectIntersect">
           <div class="select-wrapper">
@@ -36,7 +36,7 @@
                 disabled
                 selected
               >
-                Select team
+                {{ $t("collection.select_team") }}
               </option>
               <option
                 v-for="(team, index) in myTeams"

components/environments/Add.vue

@@ -1,5 +1,5 @@
 <template>
-  <SmartModal v-if="show" :title="$t('new_environment')" @close="hideModal">
+  <SmartModal v-if="show" :title="$t('environment.new')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <input
@@ -41,7 +41,7 @@ export default Vue.extend({
   methods: {
     addNewEnvironment() {
       if (!this.name) {
-        this.$toast.info(this.$t("invalid_environment_name").toString(), {
+        this.$toast.info(this.$t("environment.invalid_name").toString(), {
           icon: "info",
         })
         return

components/environments/Edit.vue

@@ -1,5 +1,5 @@
 <template>
-  <SmartModal v-if="show" :title="$t('edit_environment')" @close="hideModal">
+  <SmartModal v-if="show" :title="$t('environment.edit')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <div class="flex relative">
@@ -18,7 +18,7 @@
         </div>
         <div class="flex flex-1 justify-between items-center">
           <label for="variableList" class="p-4">
-            {{ $t("env_variable_list") }}
+            {{ $t("environment.variable_list") }}
           </label>
           <div class="flex">
             <ButtonSecondary
@@ -164,7 +164,7 @@ export default defineComponent({
     },
     saveEnvironment() {
       if (!this.name) {
-        this.$toast.info(this.$t("invalid_environment_name").toString(), {
+        this.$toast.info(this.$t("environment.invalid_name").toString(), {
           icon: "info",
         })
         return

components/environments/ImportExport.vue

@@ -1,7 +1,7 @@
 <template>
   <SmartModal
     v-if="show"
-    :title="`${$t('modal.import_export')} ${$t('environments')}`"
+    :title="`${$t('modal.import_export')} ${$t('environment.title')}`"
     @close="hideModal"
   >
     <template #actions>

components/environments/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <AppSection label="environments">
+  <AppSection :label="$t('environment.title')">
     <div
       class="
         bg-primary
@@ -25,9 +25,9 @@
             focus:outline-none
           "
         >
-          <option :value="-1">No environment</option>
+          <option :value="-1">{{ $t("environment.no_environment") }}</option>
           <option v-if="environments.length === 0" value="0">
-            {{ $t("create_new_environment") }}
+            {{ $t("environment.create_new") }}
           </option>
           <option
             v-for="(environment, index) in environments"

components/firebase/Login.vue

@@ -10,18 +10,18 @@
         <SmartItem
           :loading="signingInWithGoogle"
           svg="google"
-          label="Continue with Google"
+          :label="$t('auth.continue_with_google')"
           @click.native="signInWithGoogle"
         />
         <SmartItem
           :loading="signingInWithGitHub"
           svg="github"
-          label="Continue with GitHub"
+          :label="$t('auth.continue_with_github')"
           @click.native="signInWithGithub"
         />
         <SmartItem
           icon="mail"
-          label="Continue with Email"
+          :label="$t('auth.continue_with_email')"
           @click.native="mode = 'email'"
         />
       </div>
@@ -95,7 +95,7 @@
       <p v-if="mode === 'email'" class="text-secondaryLight">
         <SmartAnchor
           class="link"
-          label="← All sign in options"
+          :label="`← ${$t('auth.all_sign_in_options')}`"
           @click.native="mode = 'sign-in'"
         />
       </p>
@@ -105,7 +105,7 @@
       >
         <SmartAnchor
           class="link"
-          label="← Re-enter email"
+          :label="`← ${$t('auth.re_enter_email')}`"
           @click.native="mode = 'email'"
         />
         <SmartAnchor

components/smart/ColorModePicker.vue

@@ -4,7 +4,7 @@
       v-for="(color, index) of colors"
       :key="`color-${index}`"
       v-tippy="{ theme: 'tooltip' }"
-      :title="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
+      :title="$t(getColorModeName(color))"
       :class="{
         'bg-primaryLight !text-accent hover:text-accent': color === active,
       }"
@@ -49,6 +49,20 @@ export default defineComponent({
           return "devices"
       }
     },
+    getColorModeName(colorMode: string) {
+      switch (colorMode) {
+        case "system":
+          return "settings.system_mode"
+        case "light":
+          return "settings.light_mode"
+        case "dark":
+          return "settings.dark_mode"
+        case "black":
+          return "settings.black_mode"
+        default:
+          return "settings.system_mode"
+      }
+    },
   },
 })
 </script>

components/teams/index.vue

@@ -4,9 +4,12 @@
       {{ $t("team.title") }}
     </h4>
     <div class="mt-1 text-secondaryLight">
-      Join
-      <SmartAnchor label="beta" to="https://hoppscotch.io/beta" blank />
-      to access teams.
+      <SmartAnchor
+        :label="$t('team.join_beta')"
+        to="https://hoppscotch.io/beta"
+        blank
+        class="link"
+      />
     </div>
     <div class="space-y-4 mt-4">
       <ButtonSecondary