Localize bare switcher and add button

.env

@@ -0,0 +1 @@
+test=TESTTTT

src/locales/en.json

@@ -52,11 +52,13 @@
     },
     "bare": {
       "title": "Bare Server",
-      "subtitle": "Enter the URL of your bare server"
+      "subtitle": "Enter the URL of your bare server",
+      "select": "Select"
     },
     "theme": {
       "title": "Theme",
-      "subtitle": "Choose a theme so your eyes don't hate us"
+      "subtitle": "Choose a theme so your eyes don't hate us",
+      "select": "Select"
     }
   },
   "titles": {

src/locales/es.json

@@ -50,6 +50,11 @@
       "title": "Buscador",
       "subtitle": "Elige tu motor de búsqueda."
     },
+    "bare": {
+      "title": "Bare Server",
+      "subtitle": "Pon tu url de tu bare server",
+      "select": "Seleccionar"
+    },
     "theme": {
       "title": "Mirar",
       "subtitle": "Elige una mirada para que tus ojos no nos odienn"

src/locales/ja.json

@@ -50,6 +50,11 @@
       "title": "検索エンジン",
       "subtitle": "ネビュラの検索エンジンを選択してください"
     },
+    "bare": {
+      "title": "Bare サーバー",
+      "subtitle": "Bare サーバー URL を入力してください",
+      "select": "選択する"
+    },
     "theme": {
       "title": "テーマ",
       "subtitle": "目が嫌いにならないようにテーマを選んでください"

src/pages/Settings/BareInput.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from "preact/hooks";
 import { set } from "../../util/IDB";
 import { uninstallServiceWorkers } from "../../util/SWHelper";
+import { useTranslation } from "react-i18next";
 
 interface BareInputProps {
   placeholder: string;
@@ -8,6 +9,7 @@ interface BareInputProps {
 }
 
 function BareInput(props: BareInputProps) {
+  const { t } = useTranslation();
   const value = localStorage.getItem(props.storageKey) || "/bare/";
   const [inputValue, setInputValue] = useState(value);
   function validateUrl(url: string) {
@@ -28,22 +30,29 @@ function BareInput(props: BareInputProps) {
     }
     return finalUrl;
   }
-  function handleChange(event: any) {
-    const url = validateUrl(event.target.value);
-    setInputValue(event.target.value);
+  function handleChange() {
+    const url = validateUrl((document.getElementById("input") as HTMLInputElement).value);
+    setInputValue((document.getElementById("input") as HTMLInputElement).value);
     set(props.storageKey, url);
     localStorage.setItem(props.storageKey, url);
     uninstallServiceWorkers();
     window.location.reload();
   }
   return (
+    <div className="flex flex-col items-center">
       <input
         type="text"
         placeholder={props.placeholder}
         value={inputValue}
-      onBlur={handleChange}
+        id="input"
         className="font-roboto flex h-14 w-56 flex-row rounded-2xl border border-input-border-color bg-input p-4 text-center text-xl"
       />
+      <div className="font-roboto items-center justify-center flex h-4 w-24 flex-row rounded-2xl border border-input-border-color bg-input p-4 text-center text-xl" 
+      onClick={handleChange}
+      >
+        {t("settings.bare.select")}
+      </div>
+    </div>
   );
 }
 

src/pages/Settings/Proxy.tsx

@@ -39,7 +39,7 @@ const Proxy = ({ id, active }) => {
         variants={settingsPageVariant}
         className="content-card flex w-full flex-row flex-wrap justify-center gap-4"
       >
-        <div className="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-7 text-center">
+        <div className="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-4 text-center">
           <div className="p-2 text-3xl font-bold text-input-text">
             {t("settings.proxy.title")}
           </div>
@@ -48,7 +48,7 @@ const Proxy = ({ id, active }) => {
           </div>
           <Dropdown storageKey="proxy" options={engines} refresh={false} />
         </div>
-        <div className="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-7 text-center">
+        <div className="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-4 text-center">
           <div className="p-2 text-3xl font-bold text-input-text">
             {t("settings.proxymodes.title")}
           </div>
@@ -61,7 +61,7 @@ const Proxy = ({ id, active }) => {
             refresh={false}
           />
         </div>
-        <div className="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-7 text-center">
+        <div className="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-4 text-center">
           <div className="p-2 text-3xl font-bold text-input-text">
             {t("settings.search.title")}
           </div>
@@ -74,7 +74,7 @@ const Proxy = ({ id, active }) => {
             refresh={false}
           />
         </div>
-        <div className="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-7 text-center">
+        <div className="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-4 text-center">
           <div className="p-2 text-3xl font-bold text-input-text">
             {t("settings.bare.title")}
           </div>