diff --git a/src/assets/automatic.png b/src/assets/automatic.png new file mode 100644 index 0000000..89a939d Binary files /dev/null and b/src/assets/automatic.png differ diff --git a/src/assets/bing.png b/src/assets/bing.png new file mode 100644 index 0000000..0aa2db1 Binary files /dev/null and b/src/assets/bing.png differ diff --git a/src/assets/ddg.png b/src/assets/ddg.png new file mode 100644 index 0000000..052fdc1 Binary files /dev/null and b/src/assets/ddg.png differ diff --git a/src/assets/dynamic.png b/src/assets/dynamic.png new file mode 100644 index 0000000..96bca95 Binary files /dev/null and b/src/assets/dynamic.png differ diff --git a/src/assets/english.png b/src/assets/english.png new file mode 100644 index 0000000..2c4153d Binary files /dev/null and b/src/assets/english.png differ diff --git a/src/assets/google.png b/src/assets/google.png new file mode 100644 index 0000000..2f53d7f Binary files /dev/null and b/src/assets/google.png differ diff --git a/src/assets/japanese.png b/src/assets/japanese.png new file mode 100644 index 0000000..62282d6 Binary files /dev/null and b/src/assets/japanese.png differ diff --git a/src/assets/rammerhead.png b/src/assets/rammerhead.png new file mode 100644 index 0000000..5b823be Binary files /dev/null and b/src/assets/rammerhead.png differ diff --git a/src/assets/spanish.png b/src/assets/spanish.png new file mode 100644 index 0000000..2915c68 Binary files /dev/null and b/src/assets/spanish.png differ diff --git a/src/assets/ultraviolet.png b/src/assets/ultraviolet.png new file mode 100644 index 0000000..9ee3ec5 Binary files /dev/null and b/src/assets/ultraviolet.png differ diff --git a/src/locales/en.json b/src/locales/en.json index c64bd85..42d275e 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -80,6 +80,7 @@ "themes": { "main": "Main", "hacker": "Hacker", + "crismas": "Crismas🐴🎄", "catppuccinMocha": "Catppuccin Mocha", "catppuccinMacchiato": "Catppuccin Macchiato", "catppuccinFrappe": "Catppuccin Frappe", diff --git a/src/locales/es.json b/src/locales/es.json index a8361cb..68f5468 100644 --- a/src/locales/es.json +++ b/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", diff --git a/src/locales/ja.json b/src/locales/ja.json index 1c8d51c..6a362f3 100644 --- a/src/locales/ja.json +++ b/src/locales/ja.json @@ -79,6 +79,7 @@ "themes": { "main": "デフォルト", "hacker": "ハッカー", + "crismas": "クリマス🐴🎄", "catppuccinMocha": "Catppuccin Mocha", "catppuccinMacchiato": "Catppuccin Macchiato", "catppuccinFrappe": "Catppuccin Frappe", diff --git a/src/pages/Settings/Customization.tsx b/src/pages/Settings/Customization.tsx index 1f05ed5..49acb14 100644 --- a/src/pages/Settings/Customization.tsx +++ b/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 ( diff --git a/src/pages/Settings/Dropdown.tsx b/src/pages/Settings/Dropdown.tsx index 0c5f86d..7330b53 100644 --- a/src/pages/Settings/Dropdown.tsx +++ b/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 = ({ >
-
+
+ {options.find((o) => o.id === choice)?.image && ( + o.id === choice)?.image} + className="mr-2 h-6 w-6" + /> + )} {options.find((o) => o.id === choice)?.label}
@@ -48,7 +55,7 @@ const Dropdown = ({ {options.map((option, index) => (
{ @@ -60,6 +67,13 @@ const Dropdown = ({ } }} > + {option.image && ( + Option Image + )} {option.label}
))} diff --git a/src/pages/Settings/Misc.tsx b/src/pages/Settings/Misc.tsx index 150767f..d6dca0b 100644 --- a/src/pages/Settings/Misc.tsx +++ b/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 ( diff --git a/src/pages/Settings/Proxy.tsx b/src/pages/Settings/Proxy.tsx index 5e8b904..2dedd2d 100644 --- a/src/pages/Settings/Proxy.tsx +++ b/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 =