Dropdown styling and init react helmet

package.json

@@ -19,6 +19,7 @@
     "preact-iso": "^2.3.2",
     "preact-render-to-string": "^6.3.1",
     "preact-router": "^4.1.2",
+    "react-helmet": "^6.1.0",
     "react-i18next": "^13.5.0",
     "react-icons": "^4.12.0"
   },

pnpm-lock.yaml

@@ -38,6 +38,9 @@ dependencies:
   preact-router:
     specifier: ^4.1.2
     version: 4.1.2(preact@10.19.3)
+  react-helmet:
+    specifier: ^6.1.0
+    version: 6.1.0(react@18.2.0)
   react-i18next:
     specifier: ^13.5.0
     version: 13.5.0(i18next@23.7.10)(react@18.2.0)
@@ -2517,7 +2520,6 @@ packages:
   /object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /object-hash@3.0.0:
     resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
@@ -2839,7 +2841,6 @@ packages:
       loose-envify: 1.4.0
       object-assign: 4.1.1
       react-is: 16.13.1
-    dev: true
 
   /punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
@@ -2850,6 +2851,22 @@ packages:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
     dev: true
 
+  /react-fast-compare@3.2.2:
+    resolution: {integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==}
+    dev: false
+
+  /react-helmet@6.1.0(react@18.2.0):
+    resolution: {integrity: sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==}
+    peerDependencies:
+      react: '>=16.3.0'
+    dependencies:
+      object-assign: 4.1.1
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-fast-compare: 3.2.2
+      react-side-effect: 2.1.2(react@18.2.0)
+    dev: false
+
   /react-i18next@13.5.0(i18next@23.7.10)(react@18.2.0):
     resolution: {integrity: sha512-CFJ5NDGJ2MUyBohEHxljOq/39NQ972rh1ajnadG9BjTk+UXbHLq4z5DKEbEQBDoIhUmmbuS/fIMJKo6VOax1HA==}
     peerDependencies:
@@ -2879,7 +2896,14 @@ packages:
 
   /react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
-    dev: true
+
+  /react-side-effect@2.1.2(react@18.2.0):
+    resolution: {integrity: sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==}
+    peerDependencies:
+      react: ^16.3.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      react: 18.2.0
+    dev: false
 
   /react@18.2.0:
     resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}

src/pages/Home.tsx

@@ -1,12 +1,17 @@
 import { useState } from "preact/hooks";
 import { useTranslation } from "react-i18next";
 import { HeaderRoute } from "../components/HeaderRoute";
+import { Helmet } from "react-helmet";
+
 export function Home() {
   const [isFocused, setIsFocused] = useState(false);
   const { t } = useTranslation();
 
   return (
     <HeaderRoute>
+      <Helmet>
+        <title>Nebular</title>
+      </Helmet>
       <div class="flex h-full items-center justify-center">
         <input
           onFocus={() => {
@@ -19,7 +24,7 @@ export function Home() {
           className={`font-roboto h-14 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none ${
             isFocused ? "w-full md:w-3/12" : "w-full md:w-80"
           } transition-all duration-300`}
-          placeholder={isFocused ? "" : t('home.placeholder')}
+          placeholder={isFocused ? "" : t("home.placeholder")}
         />
       </div>
     </HeaderRoute>

src/pages/Settings/Customization.tsx

@@ -2,18 +2,18 @@ import { motion } from "framer-motion";
 import { tabContentVariant, settingsPageVariant } from "./Variants";
 
 const Customization = ({ id, active }) => (
-  <motion.div
+    <motion.div
-    role="tabpanel"
+      role="tabpanel"
-    id={id}
+      id={id}
-    className="tab-content"
+      className="tab-content"
-    variants={tabContentVariant}
+      variants={tabContentVariant}
-    animate={active ? "active" : "inactive"}
+      animate={active ? "active" : "inactive"}
-    initial="inactive"
+      initial="inactive"
-  >
+    >
-    <motion.div variants={settingsPageVariant} className="content-card">
+      <motion.div variants={settingsPageVariant} className="content-card">
-      <h1>Customization</h1>
+        <h1>Customization</h1>
+      </motion.div>
     </motion.div>
-  </motion.div>
 );
 
 export default Customization;

src/pages/Settings/Dropdown.tsx

@@ -32,29 +32,33 @@ const Dropdown = ({
     <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 rounded-2xl border border-input-border-color bg-input text-center text-xl"
+        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"
+        }`}
         onClick={() => setIsOpen(!isOpen)}
       >
-        <div className="flex select-none flex-row items-center w-full h-full">
+        <div className="flex h-full w-full select-none flex-row items-center">
-          <div class="w-1/4 h-full"></div>
+          <div class="h-full w-1/4"></div>
-          <div class="w-2/4 items-center flex flex-col">
+          <div class="flex w-2/4 flex-col items-center">
             {options.find((o) => o.id === choice)?.label}
           </div>
-          <div class="w-1/4 flex flex-col items-center">
+          <div class="flex w-1/4 flex-col items-center">
             <FaAngleDown />
           </div>
         </div>
         {isOpen && (
-          <div className="absolute top-full w-full border">
+          <div className="absolute top-full w-full">
-            {options.map((option) => (
+            {options.map((option, index) => (
               <div
                 key={option.id}
-                className="hover:bg-dropdown-option-hover-color"
+                className={`border border-input-border-color bg-input p-2 hover:bg-dropdown-option-hover-color ${
+                  index === options.length - 1 ? "rounded-b-2xl" : ""
+                }`}
                 onClick={() => {
                   setIsOpen(false);
                   setChoice(option.id);
                   localStorage.setItem(storageKey, option.id);
-                  if (refresh == true) {
+                  if (refresh === true) {
                     window.location.reload();
                   }
                 }}

src/pages/Settings/Proxy.tsx

@@ -13,26 +13,26 @@ const Proxy = ({ id, active }) => {
   ];
 
   return (
-    <motion.div
-      role="tabpanel"
-      id={id}
-      className="tab-content"
-      variants={tabContentVariant}
-      animate={active ? "active" : "inactive"}
-      initial="inactive"
-    >
       <motion.div
-        variants={settingsPageVariant}
+        role="tabpanel"
-        className="content-card flex flex-row flex-wrap justify-around"
+        id={id}
+        className="tab-content"
+        variants={tabContentVariant}
+        animate={active ? "active" : "inactive"}
+        initial="inactive"
       >
-        <Dropdown
+        <motion.div
-          name={t("settings.proxy.title")}
+          variants={settingsPageVariant}
-          storageKey="proxy"
+          className="content-card flex flex-row flex-wrap justify-around"
-          options={engines}
+        >
-          refresh={false}
+          <Dropdown
-        />
+            name={t("settings.proxy.title")}
+            storageKey="proxy"
+            options={engines}
+            refresh={false}
+          />
+        </motion.div>
       </motion.div>
-    </motion.div>
   );
 };
 export default Proxy;

src/pages/Settings/index.tsx

@@ -1,10 +1,14 @@
 import TabComponent from "./TabComponent";
 import { HeaderRoute } from "../../components/HeaderRoute";
 import tabs from "./tabs";
+import { Helmet } from "react-helmet"
 
 export function Settings() {
   return (
     <HeaderRoute>
+      <Helmet>
+        <title>Settingsz</title>
+      </Helmet>
       <TabComponent tabs={tabs} />
     </HeaderRoute>
   );

src/themes/main.css

@@ -14,7 +14,7 @@
   --input-border-color: #eb6f92;
   --input-border-size: 1.3px;
   --navbar-logo-filter: none;
-  --dropdown-option-hover-color: #6ba6ea;
+  --dropdown-option-hover-color: #312a49;
 }
 
 .font-inter {