From 83fb885e8b8aebb30962e29820f598d37af04ce6 Mon Sep 17 00:00:00 2001
From: rift <117926989+Riftriot@users.noreply.github.com>
Date: Sun, 17 Dec 2023 21:06:08 -0600
Subject: [PATCH] More settings styles

---
 src/locales/en.json                 |  2 ++
 src/locales/ja.json                 |  2 ++
 src/pages/Settings/Dropdown.tsx     |  3 ---
 src/pages/Settings/Misc.tsx         | 17 +++++++++------
 src/pages/Settings/Proxy.tsx        | 34 ++++++++++++++---------------
 src/pages/Settings/TabComponent.tsx |  2 +-
 src/themes/main.css                 |  2 +-
 tailwind.config.js                  |  1 +
 8 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index cc1c848..1215e3c 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -27,10 +27,12 @@
     },
     "proxy": {
       "title": "Proxy",
+      "subtitle": "Choose the proxy that fits your needs",
       "automatic": "Automatic"
     },
     "languages": {
       "title": "Language",
+      "subtitle": "Choose your preferred language",
       "japanese": "Japanese",
       "english": "English"
     }
diff --git a/src/locales/ja.json b/src/locales/ja.json
index 4d67130..f95790d 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -27,10 +27,12 @@
     },
     "proxy": {
       "title": "プロキシ",
+      "subtitle": "ニーズに合ったプロキシを選んでください",
       "automatic": "自動"
     },
     "languages": {
       "title": "言語",
+      "subtitle": "好きな言語を選んでください",
       "japanese": "日本語",
       "english": "英語"
     }
diff --git a/src/pages/Settings/Dropdown.tsx b/src/pages/Settings/Dropdown.tsx
index 97c7a16..0b8fa84 100644
--- a/src/pages/Settings/Dropdown.tsx
+++ b/src/pages/Settings/Dropdown.tsx
@@ -7,12 +7,10 @@ interface Option {
 }
 
 const Dropdown = ({
-  name,
   storageKey,
   options,
   refresh
 }: {
-  name: string;
   storageKey: string;
   options: Option[];
   refresh: boolean;
@@ -30,7 +28,6 @@ const Dropdown = ({
 
   return (
     <div className="relative text-center">
-      <h1>{name}</h1>
       <div
         className={`font-roboto flex h-14 w-56 cursor-pointer flex-col items-center justify-center border border-input-border-color bg-input text-center text-xl ${
           isOpen ? "rounded-t-2xl" : "rounded-2xl"
diff --git a/src/pages/Settings/Misc.tsx b/src/pages/Settings/Misc.tsx
index 822f80a..6074c94 100644
--- a/src/pages/Settings/Misc.tsx
+++ b/src/pages/Settings/Misc.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from "react-i18next";
 
 const Misc = ({ id, active }) => {
   const { t } = useTranslation();
-  
+
   const languages = [
     { id: "ja", label: t("settings.languages.japanese") },
     { id: "en-US", label: t("settings.languages.english") }
@@ -24,12 +24,15 @@ const Misc = ({ id, active }) => {
         variants={settingsPageVariant}
         className="content-card flex flex-row flex-wrap justify-around"
       >
-        <Dropdown
-          name={t("settings.languages.title")}
-          storageKey="i18nextLng"
-          options={languages}
-          refresh={true}
-        />
+        <div class="bg-lighter flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color p-7 text-center">
+          <div class="text-3xl">{t("settings.languages.title")}</div>
+          <div class="text-md">{t("settings.languages.subtitle")}</div>
+          <Dropdown
+            storageKey="i18nextLng"
+            options={languages}
+            refresh={true}
+          />
+        </div>
       </motion.div>
     </motion.div>
   );
diff --git a/src/pages/Settings/Proxy.tsx b/src/pages/Settings/Proxy.tsx
index f236b53..ccec584 100644
--- a/src/pages/Settings/Proxy.tsx
+++ b/src/pages/Settings/Proxy.tsx
@@ -13,27 +13,25 @@ const Proxy = ({ id, active }) => {
   ];
 
   return (
+    <motion.div
+      role="tabpanel"
+      id={id}
+      className="tab-content"
+      variants={tabContentVariant}
+      animate={active ? "active" : "inactive"}
+      initial="inactive"
+    >
       <motion.div
-        role="tabpanel"
-        id={id}
-        className="tab-content"
-        variants={tabContentVariant}
-        animate={active ? "active" : "inactive"}
-        initial="inactive"
+        variants={settingsPageVariant}
+        className="content-card flex flex-row flex-wrap justify-around"
       >
-        <motion.div
-          variants={settingsPageVariant}
-          className="content-card flex flex-row flex-wrap justify-around"
-        >
-          <Dropdown
-            name={t("settings.proxy.title")}
-            storageKey="proxy"
-            options={engines}
-            refresh={false}
-          />
-        </motion.div>
+        <div class="bg-lighter flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color p-7 text-center">
+          <div class="p-2 text-3xl">{t("settings.proxy.title")}</div>
+          <div class="text-md p-4">{t("settings.proxy.subtitle")}</div>
+          <Dropdown storageKey="proxy" options={engines} refresh={false} />
+        </div>
       </motion.div>
+    </motion.div>
   );
 };
 export default Proxy;
-
diff --git a/src/pages/Settings/TabComponent.tsx b/src/pages/Settings/TabComponent.tsx
index aeacd19..7796258 100644
--- a/src/pages/Settings/TabComponent.tsx
+++ b/src/pages/Settings/TabComponent.tsx
@@ -69,7 +69,7 @@ const TabComponent = ({ tabs, defaultIndex = 0 }) => {
   const { t } = useTranslation()
 
   return (
-    <div class="flex flex-col items-center">
+    <div class="flex flex-col items-center w-full h-full">
       <div className="container h-full w-full">
         <div className="tabs-component">
           <ul className="tab-links" role="tablist">
diff --git a/src/themes/main.css b/src/themes/main.css
index 0017b5b..4225b6c 100644
--- a/src/themes/main.css
+++ b/src/themes/main.css
@@ -2,6 +2,7 @@
 
 :root {
   --background-primary: #191724;
+  --background-lighter: #16121f;
   --navbar-color: #26233a;
   --navbar-height: 60px;
   --navbar-text-color: #7967dd;
@@ -25,4 +26,3 @@
 .font-roboto {
   font-family: "Roboto";
 }
-
diff --git a/tailwind.config.js b/tailwind.config.js
index 6549176..a59b413 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,6 +4,7 @@ export default {
   theme: {
     colors: {
       primary: "var(--background-primary)",
+      lighter: "var(--background-lighter)",
       "navbar-text-color": "var(--navbar-text-color)",
       "navbar-color": "var(--navbar-color)",
       "text-color": "var(--navbar-link-color)",