credits, clean up css, add more translations

src/locales/en.json

@@ -24,7 +24,8 @@
       "proxy": "Proxy",
       "tab": "Tab",
       "custom": "Customization",
-      "misc": "Misc"
+      "misc": "Misc",
+      "credits": "Credits"
     },
     "proxy": {
       "title": "Proxy",
@@ -56,10 +57,22 @@
       "subtitle": "Enter the URL of your bare server",
       "select": "Select"
     },
+    "wisp": {
+      "title": "Wisp Server",
+      "subtitle": "Enter the url of a Wisp server",
+      "select": "Select"
+    },
+    "transport": {
+      "title": "Transport",
+      "desc": "Select the transport to use"
+    },
     "theme": {
       "title": "Theme",
       "subtitle": "Choose a theme so your eyes don't hate us",
-      "select": "Select"
+      "select": "Select",
+      "particles": "Particles",
+      "particlesDesc": "Choose a particles wallpaper",
+      "particlesNone": "None"
     },
     "httpProxy": {
       "title": "(Advanced) HTTP Proxy",
@@ -118,5 +131,10 @@
       "q": "Nebula is slow.",
       "a": "You might be connected to the wrong server. Check the bare server you are connected to and make sure its the country you're closest to."
     }
+  },
+  "credits": {
+    "devs": "Site Developers",
+    "jpTranslators": "Japanese Translators",
+    "esTranslators": "Spanish Translators"
   }
 }

src/locales/es.json

@@ -24,7 +24,8 @@
       "proxy": "Proxy",
       "tab": "Pestaña",
       "custom": "Personalización",
-      "misc": "Misc"
+      "misc": "Misc",
+      "credits": "Créditos"
     },
     "proxy": {
       "title": "Proxy",
@@ -56,9 +57,21 @@
       "subtitle": "Pon tu url de tu bare server",
       "select": "Seleccionar"
     },
+    "wisp": {
+      "title": "Servidor Wisp",
+      "subtitle": "Introduzca la URL de un servidor Wisp",
+      "select": "Seleccionar"
+    },
+    "transport": {
+      "title": "Transporte",
+      "desc": "Seleccione el transporte que desea utilizar"
+    },
     "theme": {
       "title": "Mirar",
-      "subtitle": "Elige una mirada para que tus ojos no nos odienn"
+      "subtitle": "Elige una mirada para que tus ojos no nos odienn",
+      "particles": "Partículas",
+      "particlesDesc": "Elige un fondo de pantalla de partículas",
+      "particlesNone": "Ninguna"
     },
     "httpProxy": {
       "title": "Proxy HTTP (avanzado)",
@@ -117,5 +130,10 @@
       "q": "Nebula es lento.",
       "a": "Es posible que estés conectado al servidor incorrecto. Verifica el servidor bare al que estás conectado y asegúrate de que sea el país más cercano a ti."
     }
+  },
+  "credits": {
+    "devs": "Desarrolladores del sitio",
+    "jpTranslators": "Traductores de japonés",
+    "esTranslators": "Traductores de español"
   }
 }

src/locales/ja.json

@@ -24,7 +24,8 @@
       "proxy": "プロキシ",
       "tab": "タブ",
       "custom": "カスタマイズ",
-      "misc": "その他"
+      "misc": "その他",
+      "credits": "クレジット"
     },
     "proxy": {
       "title": "プロキシ",
@@ -56,9 +57,21 @@
       "subtitle": "Bare サーバー URL を入力してください",
       "select": "選択する"
     },
+    "wisp": {
+      "title": "Wisp サーバ",
+      "subtitle": "Wisp サーバの URL を入力してください",
+      "select": "選択"
+    },
+    "transport": {
+      "title": "輸送",
+      "desc": "使用するトランスポートを選択します"
+    },
     "theme": {
       "title": "テーマ",
-      "subtitle": "目が嫌いにならないようにテーマを選んでください"
+      "subtitle": "目が嫌いにならないようにテーマを選んでください",
+      "particles": "粒子",
+      "particlesDesc": "粒子の壁紙を選択してください",
+      "particlesNone": "なし"
     },
     "httpProxy": {
       "title": "(高度な) HTTPプロキシ",
@@ -117,5 +130,10 @@
       "q": "ネビュラが遅いです。",
       "a": "間違ったサーバーに接続している可能性があります。接続しているベアサーバーを確認し、最も近い国であることを確認してください。"
     }
+  },
+  "credits": {
+    "devs": "サイト開発者",
+    "jpTranslators": "日本語翻訳者",
+    "esTranslators": "スペイン語翻訳者"
   }
 }

src/pages/Settings/Credits.tsx

@@ -0,0 +1,99 @@
+import { motion } from "framer-motion";
+import { tabContentVariant, settingsPageVariant } from "./Variants";
+import Dropdown from "./Dropdown";
+import { useTranslation } from "react-i18next";
+import { PersonCard } from "./PersonCard";
+
+export const Credits = ({ id, active }) => {
+  const { t } = useTranslation();
+
+  return (
+    <motion.div
+      role="tabpanel"
+      id={id}
+      className="tab-content"
+      variants={tabContentVariant}
+      animate={active ? "active" : "inactive"}
+      initial="inactive"
+    >
+      <motion.div
+        variants={settingsPageVariant}
+        className="content-card flex w-full flex-row flex-wrap justify-center gap-4"
+      >
+        <div className="w-full p-10 text-input-text">
+          <div className="py-3">
+            <p className="text-4xl">{t("credits.devs")}</p>
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+              <PersonCard
+                name="Riftriot"
+                url="https://github.com/riftriot/"
+                profile="https://avatars.githubusercontent.com/u/117926989?v=4"
+              />
+              <PersonCard
+                name="MotorTruck1221"
+                url="https://github.com/MotorTruck1221"
+                profile="https://avatars.githubusercontent.com/u/73721704?v=4"
+              />
+              <PersonCard
+                name="Cohen"
+                url="https://github.com/cohenerickson"
+                profile="https://avatars.githubusercontent.com/u/72945444?v=4"
+              />
+              <PersonCard
+                name="FireStreaker2"
+                url="https://github.com/FireStreaker2"
+                profile="https://avatars.githubusercontent.com/u/103970465?v=4"
+              />
+              <PersonCard
+                name="wearr"
+                url="https://github.com/wearrrrr"
+                profile="https://avatars.githubusercontent.com/u/99224452?v=4"
+              />
+            </div>
+            <p className="mt-12 text-4xl">{t("credits.jpTranslators")}</p>
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+              <PersonCard
+                name="ProgrammerIn-wonderland"
+                url="https://github.com/ProgrammerIn-wonderland"
+                profile="https://avatars.githubusercontent.com/u/30693865?v=4"
+              />
+              <PersonCard
+                name="wearr"
+                url="https://github.com/wearrrrr"
+                profile="https://avatars.githubusercontent.com/u/99224452?v=4"
+              />
+            </div>
+            <p className="mt-12 text-4xl">{t("credits.esTranslators")}</p>
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+              <PersonCard
+                name="Cohen"
+                url="https://github.com/cohenerickson"
+                profile="https://avatars.githubusercontent.com/u/72945444?v=4"
+              />
+              <PersonCard
+                name="Notplayingallday383"
+                url="https://github.com/Notplayingallday383"
+                profile="https://avatars.githubusercontent.com/u/72810050?v=4"
+              />
+            </div>
+            <a href="https://github.com/titaniumnetwork-dev/Ultraviolet">
+              <p className="mt-12 text-4xl underline">Ultraviolet</p>
+            </a>
+            <a href="https://github.com/binary-person/Rammerhead">
+              <p className="mt-12 text-4xl underline">Rammerhead</p>
+            </a>
+            <a href="https://github.com/nebulaservices/dynamic">
+              <p className="mt-12 text-4xl underline">Dynamic</p>
+            </a>
+            <a href="https://github.com/MercuryWorkshop/epoxy-tls">
+              <p className="mt-12 text-4xl underline">epoxy-tls</p>
+            </a>
+            <a href="https://github.com/MercuryWorkshop/libcurl.js">
+              <p className="mt-12 text-4xl underline">libcurl.js</p>
+            </a>
+          </div>
+        </div>
+      </motion.div>
+    </motion.div>
+  );
+};

src/pages/Settings/Customization.tsx

@@ -16,7 +16,7 @@ function Customization({ id, active }) {
   ];
 
   const particles = [
-    { id: "none", label: "None" },
+    { id: "none", label: t("settings.theme.particlesNone") },
     { id: "/crismas.json", label: t("themes.crismas") }
   ];
 
@@ -44,10 +44,10 @@ function Customization({ id, active }) {
         </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-2 text-center">
           <div className="p-2 text-3xl font-bold text-input-text">
-            Particles
+            {t("settings.theme.particles")}
           </div>
           <div className="text-md p-4 font-bold text-input-text">
-            Choose a particles wallpaper.
+            {t("settings.theme.particlesDesc")}
           </div>
           <Dropdown storageKey="particles" options={particles} refresh={true} />
         </div>

src/pages/Settings/PersonCard.tsx

@@ -0,0 +1,18 @@
+interface props {
+  name: string;
+  url: string;
+  profile: string;
+}
+
+export const PersonCard = (props) => {
+  return (
+    <div class="flex flex-row mr-8">
+      <p className="text-lg">
+        <a href={props.url} class="underline">
+          <img src={props.profile} className="h-12 w-12 rounded-md" />
+          {props.name}
+        </a>
+      </p>
+    </div>
+  );
+};

src/pages/Settings/Proxy.tsx

@@ -123,20 +123,20 @@ const Proxy = ({ id, active }) => {
         {transport !== "bare" && (
           <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-2 text-center">
             <div className="p-2 text-3xl font-bold text-input-text">
-              Wisp Server
+              {t("settings.wisp.title")}
             </div>
             <div className="text-md p-4 font-bold text-input-text">
-              Enter the url of a Wisp server
+              {t("settings.wisp.subtitle")}
             </div>
             <WispInput placeholder={wispUrl} />
           </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-2 text-center">
           <div className="p-2 text-3xl font-bold text-input-text">
-            Transport
+            {t("settings.transport.title")}
           </div>
           <div className="text-md p-4 font-bold text-input-text">
-            Select the transport to use
+            {t("settings.transport.desc")}
           </div>
           <TransportDropdown
             storageKey="transport"

src/pages/Settings/WispInput.tsx

@@ -56,7 +56,7 @@ function WispInput(props: WispInputProps) {
           className="font-roboto mt-2 flex h-4 w-36 cursor-pointer flex-row items-center justify-center rounded-xl border border-input-border-color bg-input p-5 text-center text-lg text-input-text"
           onClick={handleChange}
         >
-          Select
+          {t("settings.wisp.select")}
         </div>
       </div>
     </div>

src/pages/Settings/styles.css

@@ -89,7 +89,7 @@ img {
   padding: 16px;
   display: flex;
   align-items: center;
-  font-size: 20px;
+  font-size: 14px;
   overflow: hidden;
   position: relative;
 }

src/pages/Settings/tabs.tsx

@@ -7,6 +7,8 @@ import { GoBrowser } from "react-icons/go";
 import { AiOutlineLaptop } from "react-icons/ai";
 import { FaPalette } from "react-icons/fa";
 import { FaGear } from "react-icons/fa6";
+import { IoMdPerson } from "react-icons/io";
+import { Credits } from "./Credits";
 
 const tabs = [
   {
@@ -36,6 +38,13 @@ const tabs = [
     icon: <FaGear />,
     color: "#f56868",
     content: Misc
+  },
+  {
+    title: "settings.tabs.credits",
+    id: "credits",
+    icon: <IoMdPerson />,
+    color: "#fefefe",
+    content: Credits
   }
 ];