More settings styles

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"
     }

src/locales/ja.json

@@ -27,10 +27,12 @@
     },
     "proxy": {
       "title": "プロキシ",
+      "subtitle": "ニーズに合ったプロキシを選んでください",
       "automatic": "自動"
     },
     "languages": {
       "title": "言語",
+      "subtitle": "好きな言語を選んでください",
       "japanese": "日本語",
       "english": "英語"
     }

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"

src/pages/Settings/Misc.tsx

@@ -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>
   );

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;
-

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">

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";
 }
-

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)",