Title translations and touch-ups

src/locales/en.json

@@ -36,10 +36,7 @@
       "subtitle": "Choose your preferred language",
       "japanese": "Japanese",
       "english": "English",
-      "spanish": "Spanish",
-      "german": "German",
-      "greek": "Greek",
-      "dutch": "Dutch"
+      "spanish": "Spanish"
     },
     "proxymodes": {
       "title": "Open in",
@@ -48,5 +45,11 @@
       "direct": "Direct",
       "aboutblank": "About:Blank"
     }
+  },
+  "titles": {
+    "home": "Nebula",
+    "settings": "Nebula - Settings",
+    "discord": "Nebula - Discord",
+    "404": "Nebula - 404"
   }
 }

src/locales/es.json

@@ -36,10 +36,7 @@
       "subtitle": "Elige tu idioma preferido",
       "japanese": "Japonés",
       "english": "Inglés",
-      "spanish": "Español",
-      "german": "",
-      "greek": "",
-      "dutch": ""
+      "spanish": "Español"
     },
     "proxymodes": {
       "title": "Abrir en",
@@ -48,5 +45,11 @@
       "direct": "Directo",
       "aboutblank": "About:Blank"
     }
+  },
+  "titles": {
+    "home": "Nebula",
+    "settings": "Nebula - Ajustes",
+    "discord": "Nebula - Discord",
+    "404": "Nebula - 404"
   }
 }

src/locales/ja.json

@@ -36,10 +36,7 @@
       "subtitle": "好きな言語を選んでください",
       "japanese": "日本語",
       "english": "英語",
-      "spanish": "スペイン語",
-      "german": "",
-      "greek": "",
-      "dutch": ""
+      "spanish": "スペイン語"
     },
     "proxymodes": {
       "title": "開く",
@@ -48,5 +45,11 @@
       "direct": "直接",
       "aboutblank": "About:Blank"
     }
+  },
+  "titles": {
+    "home": "ネブラ",
+    "settings": "ネブラ - セッティング",
+    "discord": "ネブラ - Discord",
+    "404": "ネブラ - 404"
   }
 }

src/pages/Home.tsx

@@ -16,7 +16,7 @@ export function Home() {
   return (
     <HeaderRoute>
       <Helmet>
-        <title>Nebula</title>
+        <title>{t("titles.home")}</title>
       </Helmet>
       <div class="flex h-full flex-col items-center justify-center">
         <div class="font-inter absolute bottom-0 left-0 p-1 text-sm italic text-input-text">

src/pages/Settings/Customization.tsx

@@ -11,7 +11,8 @@ const Customization = ({ id, active }) => (
     initial="inactive"
   >
     <motion.div variants={settingsPageVariant} className="content-card">
-      <h1>Customization</h1>
+      <img src="/comingsoonsnake.png" class="h-72"></img>
+      <h1 class="font-roboto text-3xl">Coming soon!</h1>
     </motion.div>
   </motion.div>
 );

src/pages/Settings/TabSettings.tsx

@@ -11,7 +11,8 @@ const TabSettings = ({ id, active }) => (
     initial="inactive"
   >
     <motion.div variants={settingsPageVariant} className="content-card">
-      <h1>Tab settings</h1>
+      <img src="/comingsoonsnake.png" class="h-72"></img>
+      <h1 class="font-roboto text-3xl">Coming soon!</h1>
     </motion.div>
   </motion.div>
 );

src/pages/Settings/index.tsx

@@ -2,12 +2,15 @@ import TabComponent from "./TabComponent";
 import { HeaderRoute } from "../../components/HeaderRoute";
 import tabs from "./tabs";
 import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
 
 export function Settings() {
+  const { t } = useTranslation();
+
   return (
     <HeaderRoute>
       <Helmet>
-        <title>Settings</title>
+        <title>{t("titles.settings")}</title>
       </Helmet>
       <TabComponent tabs={tabs} />
     </HeaderRoute>

src/pages/_404.tsx

@@ -1,12 +1,16 @@
 import { useTranslation } from "react-i18next";
 import { Link } from "preact-router";
 import { HeaderRoute } from "../components/HeaderRoute";
+import { Helmet } from "react-helmet";
 
 export function NotFound() {
   const { t } = useTranslation();
 
   return (
     <HeaderRoute>
+      <Helmet>
+        <title>{t("titles.404")}</title>
+      </Helmet>
       <section class="h-full">
         <div class="flex h-full flex-col items-center justify-center">
           <img src="/404.png" class="h-72"></img>

src/pages/discord.tsx

@@ -1,11 +1,15 @@
 import { useTranslation } from "react-i18next";
 import { HeaderRoute } from "../components/HeaderRoute";
+import { Helmet } from "react-helmet";
 
 export function DiscordPage() {
   const { t } = useTranslation();
 
   return (
     <HeaderRoute>
+      <Helmet>
+        <title>{t("titles.discord")}</title>
+      </Helmet>
       <section class="h-full">
         <div class="flex h-full flex-col items-center justify-center">
           <div class="flex flex-col items-center p-6">