add particles translation and icons for dropdowns

src/locales/en.json

@@ -80,6 +80,7 @@
   "themes": {
     "main": "Main",
     "hacker": "Hacker",
+    "crismas": "Crismas🐴🎄",
     "catppuccinMocha": "Catppuccin Mocha",
     "catppuccinMacchiato": "Catppuccin Macchiato",
     "catppuccinFrappe": "Catppuccin Frappe",

src/locales/es.json

@@ -79,6 +79,7 @@
   "themes": {
     "main": "Por defecto",
     "hacker": "Hacker",
+    "crismas": "Naidad🐴🎄",
     "catppuccinMocha": "Catppuccin Mocha",
     "catppuccinMacchiato": "Catppuccin Macchiato",
     "catppuccinFrappe": "Catppuccin Frappe",

src/locales/ja.json

@@ -79,6 +79,7 @@
   "themes": {
     "main": "デフォルト",
     "hacker": "ハッカー",
+    "crismas": "クリマス🐴🎄",
     "catppuccinMocha": "Catppuccin Mocha",
     "catppuccinMacchiato": "Catppuccin Macchiato",
     "catppuccinFrappe": "Catppuccin Frappe",

src/pages/Settings/Customization.tsx

@@ -17,7 +17,7 @@ function Customization({ id, active }) {
 
   const particles = [
     { id: "none", label: "None" },
-    { id: "/crismas.json", label: "Crismas 🐴🎄" }
+    { id: "/crismas.json", label: t("themes.crismas") }
   ];
 
   return (

src/pages/Settings/Dropdown.tsx

@@ -4,6 +4,7 @@ import { FaAngleDown } from "react-icons/fa";
 interface Option {
   id: string;
   label: string; // Translations CAN be passed
+  image?: any;
 }
 
 const Dropdown = ({
@@ -36,7 +37,13 @@ const Dropdown = ({
       >
         <div className="flex h-full w-full select-none flex-row items-center">
           <div className="h-full w-1/4"></div>
-          <div className="flex w-2/4 flex-col items-center text-input-text">
+          <div className="flex w-2/4 flex-row items-center justify-center text-input-text">
+            {options.find((o) => o.id === choice)?.image && (
+              <img
+                src={options.find((o) => o.id === choice)?.image}
+                className="mr-2 h-6 w-6"
+              />
+            )}
             {options.find((o) => o.id === choice)?.label}
           </div>
           <div className="flex w-1/4 flex-col items-center text-input-text">
@@ -48,7 +55,7 @@ const Dropdown = ({
             {options.map((option, index) => (
               <div
                 key={option.id}
-                className={`border border-input-border-color bg-input p-2 text-input-text hover:bg-dropdown-option-hover-color ${
+                className={`flex flex-row justify-center border border-input-border-color bg-input p-2 text-input-text hover:bg-dropdown-option-hover-color ${
                   index === options.length - 1 ? "rounded-b-2xl" : ""
                 }`}
                 onClick={() => {
@@ -60,6 +67,13 @@ const Dropdown = ({
                   }
                 }}
               >
+                {option.image && (
+                  <img
+                    src={option.image}
+                    alt="Option Image"
+                    className="mr-2 h-6 w-6"
+                  />
+                )}
                 {option.label}
               </div>
             ))}

src/pages/Settings/Misc.tsx

@@ -2,14 +2,17 @@ import { motion } from "framer-motion";
 import { tabContentVariant, settingsPageVariant } from "./Variants";
 import Dropdown from "./Dropdown";
 import { useTranslation } from "react-i18next";
+import EnglishFlag from "../../assets/english.png";
+import SpanishFlag from "../../assets/spanish.png";
+import JapaneseFlag from "../../assets/japanese.png";
 
 const Misc = ({ id, active }) => {
   const { t } = useTranslation();
 
   const languages = [
-    { id: "en-US", label: "English" },
-    { id: "es", label: "Español" },
-    { id: "ja", label: "日本語" }
+    { id: "en-US", label: "English", image: EnglishFlag },
+    { id: "es", label: "Español", image: SpanishFlag },
+    { id: "ja", label: "日本語", image: JapaneseFlag }
   ];
 
   return (

src/pages/Settings/Proxy.tsx

@@ -7,16 +7,28 @@ import ProxyInput from "./ProxyInput";
 import { useTranslation } from "react-i18next";
 import TransportDropdown from "./transportDropdown";
 
+import RammerheadLogo from "../../assets/rammerhead.png";
+import UltravioletLogo from "../../assets/ultraviolet.png";
+import AutomaticLogo from "../../assets/automatic.png";
+import DynamicLogo from "../../assets/dynamic.png";
+import GoogleLogo from "../../assets/google.png";
+import BingLogo from "../../assets/bing.png";
+import DuckDuckGoLogo from "../../assets/ddg.png";
+
 const Proxy = ({ id, active }) => {
   const { t } = useTranslation();
   const transport = localStorage.getItem("transport") || "libcurl";
   const proccy = localStorage.getItem("proxy") || "automatic";
 
   const engines = [
-    { id: "automatic", label: t("settings.proxy.automatic") },
-    { id: "ultraviolet", label: "Ultraviolet" },
-    { id: "rammerhead", label: "Rammerhead" },
-    { id: "dynamic", label: "Dynamic" }
+    {
+      id: "automatic",
+      label: t("settings.proxy.automatic"),
+      image: AutomaticLogo
+    },
+    { id: "ultraviolet", label: "Ultraviolet", image: UltravioletLogo },
+    { id: "rammerhead", label: "Rammerhead", image: RammerheadLogo },
+    { id: "dynamic", label: "Dynamic", image: DynamicLogo }
   ];
 
   const proxyModes = [
@@ -26,9 +38,17 @@ const Proxy = ({ id, active }) => {
   ];
 
   const searchEngines = [
-    { id: "https://duckduckgo.com/?q=%s", label: "DuckDuckGo" },
-    { id: "https://google.com/search?q=%s", label: "Google" },
-    { id: "https://bing.com/search?q=%s", label: "Bing" }
+    {
+      id: "https://duckduckgo.com/?q=%s",
+      label: "DuckDuckGo",
+      image: DuckDuckGoLogo
+    },
+    {
+      id: "https://google.com/search?q=%s",
+      label: "Google",
+      image: GoogleLogo
+    },
+    { id: "https://bing.com/search?q=%s", label: "Bing", image: BingLogo }
   ];
 
   const wispUrl =