From e6736db0569ae0fa9de81ea5503cd8e1fd3c9be8 Mon Sep 17 00:00:00 2001 From: rift <117926989+Riftriot@users.noreply.github.com> Date: Mon, 15 Apr 2024 20:59:53 -0500 Subject: [PATCH 1/2] Revert "revamp themes" --- package.json | 2 +- public/themes/catppuccinFrappe.css | 30 ++++++ public/themes/catppuccinLatte.css | 30 ++++++ public/themes/catppuccinMacchiato.css | 30 ++++++ public/themes/catppuccinMocha.css | 30 ++++++ public/themes/hacker.css | 30 ++++++ public/themes/main.css | 30 ++++++ src/components/ThemeProvider.tsx | 90 ----------------- src/index.tsx | 24 +++-- src/locales/en.json | 13 +-- src/locales/es.json | 14 +-- src/locales/ja.json | 14 +-- src/pages/Settings/Customization.tsx | 37 +++---- src/pages/Settings/PersonCard.tsx | 2 +- src/pages/Settings/ThemeDropdown.tsx | 53 ---------- src/routes.tsx | 18 ++-- src/style.css | 135 +------------------------- vite.config.ts | 7 +- 18 files changed, 236 insertions(+), 353 deletions(-) create mode 100644 public/themes/catppuccinFrappe.css create mode 100644 public/themes/catppuccinLatte.css create mode 100644 public/themes/catppuccinMacchiato.css create mode 100644 public/themes/catppuccinMocha.css create mode 100644 public/themes/hacker.css create mode 100644 public/themes/main.css delete mode 100644 src/components/ThemeProvider.tsx delete mode 100644 src/pages/Settings/ThemeDropdown.tsx diff --git a/package.json b/package.json index b4c1cd5..f63a280 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "private": true, "type": "module", "scripts": { - "dev": "concurrently \"vite\" \"tsx server.ts\"", + "dev": "concurrently \"vite\" \"bare-server-node --port 8080\"", "build": "vite build", "bstart": "npm run build && tsx server.ts", "start": "tsx server.ts", diff --git a/public/themes/catppuccinFrappe.css b/public/themes/catppuccinFrappe.css new file mode 100644 index 0000000..db0aeb2 --- /dev/null +++ b/public/themes/catppuccinFrappe.css @@ -0,0 +1,30 @@ +@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap"); + +:root { + --background-primary: #303446 !important; + --background-lighter: #292c3c !important; + --navbar-color: #292c3c !important; + --navbar-height: 60px !important; + --navbar-text-color: #c6d0f5 !important; + --navbar-link-color: #8caaee !important; + --navbar-link-hover-color: #ca9ee6 !important; + --navbar-font: "Roboto" !important; + --input-text-color: #c6d0f5 !important; + --input-placeholder-color: #a5adce !important; + --input-background-color: #232634 !important; + --input-border-color: color-mix(in srgb, #232634, #ca9ee6 50%) !important; + --input-border-size: 1.3px !important; + --navbar-logo-filter: none !important; + --dropdown-option-hover-color: #232634 !important; + --tab-color: #414559 !important; + --active-color: #ca9ee6 !important; +} + +.font-inter { + font-family: "Inter", sans-serif; + font-weight: 300; +} + +.font-roboto { + font-family: "Roboto"; +} diff --git a/public/themes/catppuccinLatte.css b/public/themes/catppuccinLatte.css new file mode 100644 index 0000000..e3a882d --- /dev/null +++ b/public/themes/catppuccinLatte.css @@ -0,0 +1,30 @@ +@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap"); + +:root { + --background-primary: #eff1f5 !important; + --background-lighter: #e6e9ef !important; + --navbar-color: #e6e9ef !important; + --navbar-height: 60px !important; + --navbar-text-color: #4c4f69 !important; + --navbar-link-color: #1e66f5 !important; + --navbar-link-hover-color: #8839ef !important; + --navbar-font: "Roboto" !important; + --input-text-color: #4c4f69 !important; + --input-placeholder-color: #6c6f85 !important; + --input-background-color: #dce0e8 !important; + --input-border-color: color-mix(in srgb, #dce0e8, #8839ef 50%) !important; + --input-border-size: 1.3px !important; + --navbar-logo-filter: none !important; + --dropdown-option-hover-color: #dce0e8 !important; + --tab-color: #ccd0da !important; + --active-color: #8839ef !important; +} + +.font-inter { + font-family: "Inter", sans-serif; + font-weight: 300; +} + +.font-roboto { + font-family: "Roboto"; +} diff --git a/public/themes/catppuccinMacchiato.css b/public/themes/catppuccinMacchiato.css new file mode 100644 index 0000000..a11bab6 --- /dev/null +++ b/public/themes/catppuccinMacchiato.css @@ -0,0 +1,30 @@ +@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap"); + +:root { + --background-primary: #24273a !important; + --background-lighter: #1e2030 !important; + --navbar-color: #1e2030 !important; + --navbar-height: 60px !important; + --navbar-text-color: #cad3f5 !important; + --navbar-link-color: #8aadf4 !important; + --navbar-link-hover-color: #c6a0f6 !important; + --navbar-font: "Roboto" !important; + --input-text-color: #cad3f5 !important; + --input-placeholder-color: #a5adcb !important; + --input-background-color: #181926 !important; + --input-border-color: color-mix(in srgb, #181926, #c6a0f6 50%) !important; + --input-border-size: 1.3px !important; + --navbar-logo-filter: none !important; + --dropdown-option-hover-color: #181926 !important; + --tab-color: #363a4f !important; + --active-color: #c6a0f6 !important; +} + +.font-inter { + font-family: "Inter", sans-serif; + font-weight: 300; +} + +.font-roboto { + font-family: "Roboto"; +} diff --git a/public/themes/catppuccinMocha.css b/public/themes/catppuccinMocha.css new file mode 100644 index 0000000..b35f41c --- /dev/null +++ b/public/themes/catppuccinMocha.css @@ -0,0 +1,30 @@ +@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap"); + +:root { + --background-primary: #1e1e2e !important; + --background-lighter: #181825 !important; + --navbar-color: #181825 !important; + --navbar-height: 60px !important; + --navbar-text-color: #cdd6f4 !important; + --navbar-link-color: #89b4fa !important; + --navbar-link-hover-color: #cba6f7 !important; + --navbar-font: "Roboto" !important; + --input-text-color: #cdd6f4 !important; + --input-placeholder-color: #a6adc8 !important; + --input-background-color: #11111b !important; + --input-border-color: color-mix(in srgb, #11111b, #cba6f7 50%) !important; + --input-border-size: 1.3px !important; + --navbar-logo-filter: none !important; + --dropdown-option-hover-color: #11111b !important; + --tab-color: #313244 !important; + --active-color: #cba6f7 !important; +} + +.font-inter { + font-family: "Inter", sans-serif; + font-weight: 300; +} + +.font-roboto { + font-family: "Roboto"; +} diff --git a/public/themes/hacker.css b/public/themes/hacker.css new file mode 100644 index 0000000..ed10228 --- /dev/null +++ b/public/themes/hacker.css @@ -0,0 +1,30 @@ +@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap"); + +:root { + --background-primary: #000 !important; + --background-lighter: #000 !important; + --navbar-color: #000 !important; + --navbar-height: 60px !important; + --navbar-text-color: greenyellow !important; + --navbar-link-color: greenyellow !important; + --navbar-link-hover-color: green !important; + --navbar-font: "Roboto" !important; + --input-text-color: greenyellow !important; + --input-placeholder-color: white !important; + --input-background-color: #000 !important; + --input-border-color: greenyellow !important; + --input-border-size: 1.3px !important; + --navbar-logo-filter: none !important; + --dropdown-option-hover-color: #312a49 !important; + --tab-color: var(--black) !important; + --border-color: greenyellow !important; +} + +.font-inter { + font-family: "Inter", sans-serif; + font-weight: 300; +} + +.font-roboto { + font-family: "Roboto"; +} diff --git a/public/themes/main.css b/public/themes/main.css new file mode 100644 index 0000000..fb1727c --- /dev/null +++ b/public/themes/main.css @@ -0,0 +1,30 @@ +@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap"); + +:root { + --background-primary: #191724; + --background-lighter: #16121f; + --navbar-color: #26233a; + --navbar-height: 60px; + --navbar-text-color: #7967dd; + --navbar-link-color: #e0def4; + --navbar-link-hover-color: gray; + --navbar-font: "Roboto"; + --input-text-color: #e0def4; + --input-placeholder-color: white; + --input-background-color: #1f1d2e; + --input-border-color: #eb6f92; + --input-border-size: 1.3px; + --navbar-logo-filter: none; + --dropdown-option-hover-color: #312a49; + --tab-color: var(--black); + --border-color: #16121f; +} + +.font-inter { + font-family: "Inter", sans-serif; + font-weight: 300; +} + +.font-roboto { + font-family: "Roboto"; +} diff --git a/src/components/ThemeProvider.tsx b/src/components/ThemeProvider.tsx deleted file mode 100644 index 6592ca8..0000000 --- a/src/components/ThemeProvider.tsx +++ /dev/null @@ -1,90 +0,0 @@ -import { createContext } from "preact"; -import { useContext, useEffect, useState } from "preact/hooks"; -type Theme = - | "main" - | "hacker" - | "catppuccin-mocha" - | "catppuccin-macchiato" - | "catppuccin-frappe" - | "catppuccin-latte"; -const themes: Theme[] = [ - "main", - "hacker", - "catppuccin-mocha", - "catppuccin-macchiato", - "catppuccin-frappe", - "catppuccin-latte" -]; -type ThemeProviderProps = { - children: React.ReactNode; -}; -type ThemeProviderState = { - themes: Theme[]; - theme: Theme; - background: string; - setTheme: (theme: Theme) => void; - setBackground: (background: string) => void; -}; - -const initialState: ThemeProviderState = { - themes: themes, - theme: "main", - background: "", - setTheme: () => null, - setBackground: () => null -}; - -const ThemeProviderContext = createContext(initialState); - -export function ThemeProvider({ children, ...props }: ThemeProviderProps) { - const defaultTheme = "main"; - const storageKey = "theme"; - const bgKey = "background"; - const [theme, setTheme] = useState( - () => (localStorage.getItem(storageKey) as Theme) || defaultTheme - ); - const [background, setBackground] = useState(() => - localStorage.getItem(bgKey) - ); - - useEffect(() => { - const root = window.document.documentElement; - - themes.forEach((theme) => { - root.classList.remove(theme); - }); - root.classList.add(theme); - document.documentElement.style.setProperty( - "--background-image", - `url(${background})` - ); - }, [theme, themes, background]); - - const value = { - theme, - themes, - background, - setTheme: (theme: Theme) => { - localStorage.setItem(storageKey, theme); - setTheme(theme); - }, - setBackground: (background: string) => { - localStorage.setItem(bgKey, background); - setBackground(background); - } - }; - - return ( - - {children} - - ); -} -export const useTheme = () => { - const context = useContext(ThemeProviderContext); - - if (context === undefined) - throw new Error("useTheme must be used within a ThemeProvider"); - - return context; -}; diff --git a/src/index.tsx b/src/index.tsx index 98c629e..4932a74 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,20 +1,21 @@ import { render } from "preact"; import { Suspense, lazy } from "preact/compat"; import { LoadSuspense } from "./LoadSuspense"; +import { Helmet } from "react-helmet"; import Meta from "./components/Meta"; import Particles, { initParticlesEngine } from "@tsparticles/react"; import { loadSlim } from "@tsparticles/slim"; import { useEffect, useState } from "preact/compat"; -import { ThemeProvider, useTheme } from "./components/ThemeProvider"; const Routes = lazy(() => import("./routes")); +const theme = localStorage.getItem("theme") || "main"; const particlesUrl = localStorage.getItem("particles") || "none"; export default function App() { const [init, setInit] = useState(false); - const {background} = useTheme(); + // this should be run only once per application lifetime useEffect(() => { initParticlesEngine(async (engine) => { @@ -29,15 +30,23 @@ export default function App() { setInit(true); }); }, []); + const particlesLoaded = (container) => { console.log(container); }; + return ( -
+
{window.location.origin === "https://nebulaproxy.io" && } {/* {window.location.origin === "http://localhost:8080" && } */} + + + + }> - +
+ +
{init && particlesUrl !== "none" && ( - - , - document.getElementById("app") -); +render(, document.getElementById("app")); diff --git a/src/locales/en.json b/src/locales/en.json index 242900f..f953a6c 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -72,10 +72,7 @@ "select": "Select", "particles": "Particles", "particlesDesc": "Choose a particles wallpaper", - "particlesNone": "None", - "background": "Background", - "backgroundDesc": "Choose a background image", - "backgroundNone": "None" + "particlesNone": "None" }, "httpProxy": { "title": "(Advanced) HTTP Proxy", @@ -97,10 +94,10 @@ "main": "Main", "hacker": "Hacker", "crismas": "Crismas🐴🎄", - "catppuccin-mocha": "Catppuccin Mocha", - "catppuccin-macchiato": "Catppuccin Macchiato", - "catppuccin-frappe": "Catppuccin Frappe", - "catppuccin-latte": "Catppuccin Latte" + "catppuccinMocha": "Catppuccin Mocha", + "catppuccinMacchiato": "Catppuccin Macchiato", + "catppuccinFrappe": "Catppuccin Frappe", + "catppuccinLatte": "Catppuccin Latte" }, "clipboard": "URL copied to clipboard!", "bareError": "That didn't quite work. Double check that the bare server exists and isn't blocked.", diff --git a/src/locales/es.json b/src/locales/es.json index ca8149f..6f7493b 100644 --- a/src/locales/es.json +++ b/src/locales/es.json @@ -69,13 +69,9 @@ "theme": { "title": "Mirar", "subtitle": "Elige una mirada para que tus ojos no nos odienn", - "select": "Seleccionar", "particles": "Partículas", "particlesDesc": "Elige un fondo de pantalla de partículas", - "particlesNone": "Ninguna", - "background": "Fondo", - "backgroundDesc": "Elige una imagen de fondo", - "backgroundNone": "Ninguna" + "particlesNone": "Ninguna" }, "httpProxy": { "title": "Proxy HTTP (avanzado)", @@ -97,10 +93,10 @@ "main": "Por defecto", "hacker": "Hacker", "crismas": "Naidad🐴🎄", - "catppuccin-mocha": "Catppuccin Mocha", - "catppuccin-macchiato": "Catppuccin Macchiato", - "catppuccin-frappe": "Catppuccin Frappe", - "catppuccin-latte": "Catppuccin Latte" + "catppuccinMocha": "Catppuccin Mocha", + "catppuccinMacchiato": "Catppuccin Macchiato", + "catppuccinFrappe": "Catppuccin Frappe", + "catppuccinLatte": "Catppuccin Latte" }, "clipboard": "¡URL copiada al portapapeles!", "bareError": "Esto no es funcional. Vuelva a verificar que el servidor bare exista y no esté bloqueado.", diff --git a/src/locales/ja.json b/src/locales/ja.json index a0fc967..4d85d04 100644 --- a/src/locales/ja.json +++ b/src/locales/ja.json @@ -69,13 +69,9 @@ "theme": { "title": "壁紙", "subtitle": "お好みの壁紙を選択してください", - "select": "選択する", "particles": "パーティクル", "particlesDesc": "パーティクルの種類を選択してください", - "particlesNone": "なし", - "background": "背景", - "backgroundDesc": "背景画像を選択してください", - "backgroundNone": "なし" + "particlesNone": "なし" }, "httpProxy": { "title": "HTTPプロキシ (上級者向け)", @@ -97,10 +93,10 @@ "main": "標準", "hacker": "Hacker", "crismas": "Crismas🐴🎄", - "catppuccin-mocha": "Catppuccin Mocha", - "catppuccin-macchiato": "Catppuccin Macchiato", - "catppuccin-frappe": "Catppuccin Frappe", - "catppuccin-latte": "Catppuccin Latte" + "catppuccinMocha": "Catppuccin Mocha", + "catppuccinMacchiato": "Catppuccin Macchiato", + "catppuccinFrappe": "Catppuccin Frappe", + "catppuccinLatte": "Catppuccin Latte" }, "clipboard": "コピーしました!", "bareError": "処理を実行できませんでした　Bareサーバーが存在し、そしてアクセスが拒否されていない事も確認してから、再度お試してください", diff --git a/src/pages/Settings/Customization.tsx b/src/pages/Settings/Customization.tsx index ed02e42..feffc73 100644 --- a/src/pages/Settings/Customization.tsx +++ b/src/pages/Settings/Customization.tsx @@ -1,15 +1,20 @@ -import { useRef } from "preact/hooks"; -import { useTheme } from "../../components/ThemeProvider"; import { motion } from "framer-motion"; import { tabContentVariant, settingsPageVariant } from "./Variants"; import { useTranslation } from "react-i18next"; import Dropdown from "./Dropdown"; -import ThemeDropdown from "./ThemeDropdown"; function Customization({ id, active }) { - const bgInput = useRef(null); const { t } = useTranslation(); - const { background, setBackground } = useTheme(); + + const themes = [ + { id: "main", label: t("themes.main") }, + { id: "hacker", label: t("themes.hacker") }, + { id: "catppuccinMocha", label: t("themes.catppuccinMocha") }, + { id: "catppuccinMacchiato", label: t("themes.catppuccinMacchiato") }, + { id: "catppuccinFrappe", label: t("themes.catppuccinFrappe") }, + { id: "catppuccinLatte", label: t("themes.catppuccinLatte") } + ]; + const particles = [ { id: "none", label: t("settings.theme.particlesNone") }, { id: "/crismas.json", label: t("themes.crismas") } @@ -35,7 +40,7 @@ function Customization({ id, active }) {
{t("settings.theme.subtitle")}
- +
@@ -46,26 +51,6 @@ function Customization({ id, active }) {
-
-
- {t("settings.theme.background")} -
-
- {t("settings.theme.backgroundDesc")} -
- - -
); diff --git a/src/pages/Settings/PersonCard.tsx b/src/pages/Settings/PersonCard.tsx index 69d41e0..5b4077f 100644 --- a/src/pages/Settings/PersonCard.tsx +++ b/src/pages/Settings/PersonCard.tsx @@ -6,7 +6,7 @@ interface props { export const PersonCard = (props) => { return ( -
+

diff --git a/src/pages/Settings/ThemeDropdown.tsx b/src/pages/Settings/ThemeDropdown.tsx deleted file mode 100644 index e93bc1b..0000000 --- a/src/pages/Settings/ThemeDropdown.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { useState } from "preact/hooks"; -import { FaAngleDown } from "react-icons/fa"; -import { useTheme } from "../../components/ThemeProvider"; -import { useTranslation } from "react-i18next"; - -const ThemeDropdown = () => { - const [isOpen, setIsOpen] = useState(false); - const { t } = useTranslation(); - const { theme, setTheme, themes } = useTheme(); - const options = themes.map((theme) => { - return { id: theme, label: t(`themes.${theme}`) }; - }); - return ( -

- ); -}; - -export default ThemeDropdown; diff --git a/src/routes.tsx b/src/routes.tsx index 2d2324b..a2ffe7b 100644 --- a/src/routes.tsx +++ b/src/routes.tsx @@ -7,8 +7,8 @@ import { Radon } from "./pages/Radon"; import { Settings } from "./pages/Settings/"; import { AboutBlank } from "./AboutBlank"; import { Faq } from "./pages/Faq"; -// import { registerRemoteListener } from "@mercuryworkshop/bare-mux"; -import { setTransport } from "./util/transports"; +import { registerRemoteListener } from "@mercuryworkshop/bare-mux"; +import { setTransport } from './util/transports'; import "./style.css"; import "./i18n"; @@ -19,13 +19,15 @@ export default function Routes() { "/wisp/"; // @TODO Japan - US ping if ("serviceWorker" in navigator) { - navigator.serviceWorker.ready.then(async () => { - //await registerRemoteListener(sw.active!) - setTransport(); - }); - navigator.serviceWorker.register("/sw.js", { - scope: "/~/" + console.log("am bout to bus"); + navigator.serviceWorker.ready.then(async (sw) => { + //await registerRemoteListener(sw.active!) + setTransport(); }); + navigator.serviceWorker + .register("/sw.js", { + scope: "/~/" + }) } return ( diff --git a/src/style.css b/src/style.css index 71a7c5c..465f414 100644 --- a/src/style.css +++ b/src/style.css @@ -1,138 +1,9 @@ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;700;900&display=swap"); -@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap"); + @tailwind base; @tailwind components; @tailwind utilities; -@layer base { - :root, - .main { - --background-primary: #191724; - --background-lighter: #16121f; - --navbar-color: #26233a; - --navbar-height: 60px; - --navbar-text-color: #7967dd; - --navbar-link-color: #e0def4; - --navbar-link-hover-color: gray; - --navbar-font: "Roboto"; - --input-text-color: #e0def4; - --input-placeholder-color: white; - --input-background-color: #1f1d2e; - --input-border-color: #eb6f92; - --input-border-size: 1.3px; - --navbar-logo-filter: none; - --dropdown-option-hover-color: #312a49; - --tab-color: var(--black); - --border-color: #16121f; - } - .hacker { - --background-primary: #000 !important; - --background-lighter: #000 !important; - --navbar-color: #000 !important; - --navbar-height: 60px !important; - --navbar-text-color: greenyellow !important; - --navbar-link-color: greenyellow !important; - --navbar-link-hover-color: green !important; - --navbar-font: "Roboto" !important; - --input-text-color: greenyellow !important; - --input-placeholder-color: white !important; - --input-background-color: #000 !important; - --input-border-color: greenyellow !important; - --input-border-size: 1.3px !important; - --navbar-logo-filter: none !important; - --dropdown-option-hover-color: #312a49 !important; - --tab-color: var(--black) !important; - --border-color: greenyellow !important; - } - .catppuccin-mocha { - --background-primary: #1e1e2e !important; - --background-lighter: #181825 !important; - --navbar-color: #181825 !important; - --navbar-height: 60px !important; - --navbar-text-color: #cdd6f4 !important; - --navbar-link-color: #89b4fa !important; - --navbar-link-hover-color: #cba6f7 !important; - --navbar-font: "Roboto" !important; - --input-text-color: #cdd6f4 !important; - --input-placeholder-color: #a6adc8 !important; - --input-background-color: #11111b !important; - --input-border-color: color-mix(in srgb, #11111b, #cba6f7 50%) !important; - --input-border-size: 1.3px !important; - --navbar-logo-filter: none !important; - --dropdown-option-hover-color: #11111b !important; - --tab-color: #313244 !important; - --active-color: #cba6f7 !important; - } - .catppuccin-macchiato { - --background-primary: #24273a !important; - --background-lighter: #1e2030 !important; - --navbar-color: #1e2030 !important; - --navbar-height: 60px !important; - --navbar-text-color: #cad3f5 !important; - --navbar-link-color: #8aadf4 !important; - --navbar-link-hover-color: #c6a0f6 !important; - --navbar-font: "Roboto" !important; - --input-text-color: #cad3f5 !important; - --input-placeholder-color: #a5adcb !important; - --input-background-color: #181926 !important; - --input-border-color: color-mix(in srgb, #181926, #c6a0f6 50%) !important; - --input-border-size: 1.3px !important; - --navbar-logo-filter: none !important; - --dropdown-option-hover-color: #181926 !important; - --tab-color: #363a4f !important; - --active-color: #c6a0f6 !important; - } - .catppuccin-frappe { - --background-primary: #303446 !important; - --background-lighter: #292c3c !important; - --navbar-color: #292c3c !important; - --navbar-height: 60px !important; - --navbar-text-color: #c6d0f5 !important; - --navbar-link-color: #8caaee !important; - --navbar-link-hover-color: #ca9ee6 !important; - --navbar-font: "Roboto" !important; - --input-text-color: #c6d0f5 !important; - --input-placeholder-color: #a5adce !important; - --input-background-color: #232634 !important; - --input-border-color: color-mix(in srgb, #232634, #ca9ee6 50%) !important; - --input-border-size: 1.3px !important; - --navbar-logo-filter: none !important; - --dropdown-option-hover-color: #232634 !important; - --tab-color: #414559 !important; - --active-color: #ca9ee6 !important; - } - .catppuccin-latte { - --background-primary: #eff1f5 !important; - --background-lighter: #e6e9ef !important; - --navbar-color: #e6e9ef !important; - --navbar-height: 60px !important; - --navbar-text-color: #4c4f69 !important; - --navbar-link-color: #1e66f5 !important; - --navbar-link-hover-color: #8839ef !important; - --navbar-font: "Roboto" !important; - --input-text-color: #4c4f69 !important; - --input-placeholder-color: #6c6f85 !important; - --input-background-color: #dce0e8 !important; - --input-border-color: color-mix(in srgb, #dce0e8, #8839ef 50%) !important; - --input-border-size: 1.3px !important; - --navbar-logo-filter: none !important; - --dropdown-option-hover-color: #dce0e8 !important; - --tab-color: #ccd0da !important; - --active-color: #8839ef !important; - } -} + body { - @apply bg-primary; - background-image: var(--background-image); - background-position: center; - background-size: cover; - background-attachment: fixed; -} - -.font-inter { - font-family: "Inter", sans-serif; - font-weight: 300; -} - -.font-roboto { - font-family: "Roboto"; + background-color: var(--background-primary) !important; } diff --git a/vite.config.ts b/vite.config.ts index 5f20584..8a9bb2c 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -59,15 +59,10 @@ export default defineConfig({ rewrite: (path) => path.replace(/^\/bare\//, "") }, "/wisp/": { - target: "http://localhost:8080/wisp/", + target: "http://localhost:3000/", changeOrigin: true, ws: true, rewrite: (path) => path.replace(/^\/wisp\//, "") - }, - "/search": { - target: "http://localhost:8080/search", - changeOrigin: true, - rewrite: (path) => path.replace(/^\/search/, "") } } } From 06ce2d0177d080456b1f70f04fddeaa40adcae75 Mon Sep 17 00:00:00 2001 From: rift <117926989+Riftriot@users.noreply.github.com> Date: Tue, 16 Apr 2024 21:22:01 -0500 Subject: [PATCH 2/2] Revert "Merge pull request #247 from NebulaServices/revert-245-main" This reverts commit cb9b15fcccc49193ac3aeb182c12cdaba4aea0c1, reversing changes made to 0073a1121f60d0df51cc38fcf95866620232dd13. --- package.json | 2 +- public/themes/catppuccinFrappe.css | 30 ------ public/themes/catppuccinLatte.css | 30 ------ public/themes/catppuccinMacchiato.css | 30 ------ public/themes/catppuccinMocha.css | 30 ------ public/themes/hacker.css | 30 ------ public/themes/main.css | 30 ------ src/components/ThemeProvider.tsx | 90 +++++++++++++++++ src/index.tsx | 24 ++--- src/locales/en.json | 13 ++- src/locales/es.json | 14 ++- src/locales/ja.json | 14 ++- src/pages/Settings/Customization.tsx | 37 ++++--- src/pages/Settings/PersonCard.tsx | 2 +- src/pages/Settings/ThemeDropdown.tsx | 53 ++++++++++ src/routes.tsx | 18 ++-- src/style.css | 137 +++++++++++++++++++++++++- vite.config.ts | 7 +- 18 files changed, 354 insertions(+), 237 deletions(-) delete mode 100644 public/themes/catppuccinFrappe.css delete mode 100644 public/themes/catppuccinLatte.css delete mode 100644 public/themes/catppuccinMacchiato.css delete mode 100644 public/themes/catppuccinMocha.css delete mode 100644 public/themes/hacker.css delete mode 100644 public/themes/main.css create mode 100644 src/components/ThemeProvider.tsx create mode 100644 src/pages/Settings/ThemeDropdown.tsx diff --git a/package.json b/package.json index f63a280..b4c1cd5 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "private": true, "type": "module", "scripts": { - "dev": "concurrently \"vite\" \"bare-server-node --port 8080\"", + "dev": "concurrently \"vite\" \"tsx server.ts\"", "build": "vite build", "bstart": "npm run build && tsx server.ts", "start": "tsx server.ts", diff --git a/public/themes/catppuccinFrappe.css b/public/themes/catppuccinFrappe.css deleted file mode 100644 index db0aeb2..0000000 --- a/public/themes/catppuccinFrappe.css +++ /dev/null @@ -1,30 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap"); - -:root { - --background-primary: #303446 !important; - --background-lighter: #292c3c !important; - --navbar-color: #292c3c !important; - --navbar-height: 60px !important; - --navbar-text-color: #c6d0f5 !important; - --navbar-link-color: #8caaee !important; - --navbar-link-hover-color: #ca9ee6 !important; - --navbar-font: "Roboto" !important; - --input-text-color: #c6d0f5 !important; - --input-placeholder-color: #a5adce !important; - --input-background-color: #232634 !important; - --input-border-color: color-mix(in srgb, #232634, #ca9ee6 50%) !important; - --input-border-size: 1.3px !important; - --navbar-logo-filter: none !important; - --dropdown-option-hover-color: #232634 !important; - --tab-color: #414559 !important; - --active-color: #ca9ee6 !important; -} - -.font-inter { - font-family: "Inter", sans-serif; - font-weight: 300; -} - -.font-roboto { - font-family: "Roboto"; -} diff --git a/public/themes/catppuccinLatte.css b/public/themes/catppuccinLatte.css deleted file mode 100644 index e3a882d..0000000 --- a/public/themes/catppuccinLatte.css +++ /dev/null @@ -1,30 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap"); - -:root { - --background-primary: #eff1f5 !important; - --background-lighter: #e6e9ef !important; - --navbar-color: #e6e9ef !important; - --navbar-height: 60px !important; - --navbar-text-color: #4c4f69 !important; - --navbar-link-color: #1e66f5 !important; - --navbar-link-hover-color: #8839ef !important; - --navbar-font: "Roboto" !important; - --input-text-color: #4c4f69 !important; - --input-placeholder-color: #6c6f85 !important; - --input-background-color: #dce0e8 !important; - --input-border-color: color-mix(in srgb, #dce0e8, #8839ef 50%) !important; - --input-border-size: 1.3px !important; - --navbar-logo-filter: none !important; - --dropdown-option-hover-color: #dce0e8 !important; - --tab-color: #ccd0da !important; - --active-color: #8839ef !important; -} - -.font-inter { - font-family: "Inter", sans-serif; - font-weight: 300; -} - -.font-roboto { - font-family: "Roboto"; -} diff --git a/public/themes/catppuccinMacchiato.css b/public/themes/catppuccinMacchiato.css deleted file mode 100644 index a11bab6..0000000 --- a/public/themes/catppuccinMacchiato.css +++ /dev/null @@ -1,30 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap"); - -:root { - --background-primary: #24273a !important; - --background-lighter: #1e2030 !important; - --navbar-color: #1e2030 !important; - --navbar-height: 60px !important; - --navbar-text-color: #cad3f5 !important; - --navbar-link-color: #8aadf4 !important; - --navbar-link-hover-color: #c6a0f6 !important; - --navbar-font: "Roboto" !important; - --input-text-color: #cad3f5 !important; - --input-placeholder-color: #a5adcb !important; - --input-background-color: #181926 !important; - --input-border-color: color-mix(in srgb, #181926, #c6a0f6 50%) !important; - --input-border-size: 1.3px !important; - --navbar-logo-filter: none !important; - --dropdown-option-hover-color: #181926 !important; - --tab-color: #363a4f !important; - --active-color: #c6a0f6 !important; -} - -.font-inter { - font-family: "Inter", sans-serif; - font-weight: 300; -} - -.font-roboto { - font-family: "Roboto"; -} diff --git a/public/themes/catppuccinMocha.css b/public/themes/catppuccinMocha.css deleted file mode 100644 index b35f41c..0000000 --- a/public/themes/catppuccinMocha.css +++ /dev/null @@ -1,30 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap"); - -:root { - --background-primary: #1e1e2e !important; - --background-lighter: #181825 !important; - --navbar-color: #181825 !important; - --navbar-height: 60px !important; - --navbar-text-color: #cdd6f4 !important; - --navbar-link-color: #89b4fa !important; - --navbar-link-hover-color: #cba6f7 !important; - --navbar-font: "Roboto" !important; - --input-text-color: #cdd6f4 !important; - --input-placeholder-color: #a6adc8 !important; - --input-background-color: #11111b !important; - --input-border-color: color-mix(in srgb, #11111b, #cba6f7 50%) !important; - --input-border-size: 1.3px !important; - --navbar-logo-filter: none !important; - --dropdown-option-hover-color: #11111b !important; - --tab-color: #313244 !important; - --active-color: #cba6f7 !important; -} - -.font-inter { - font-family: "Inter", sans-serif; - font-weight: 300; -} - -.font-roboto { - font-family: "Roboto"; -} diff --git a/public/themes/hacker.css b/public/themes/hacker.css deleted file mode 100644 index ed10228..0000000 --- a/public/themes/hacker.css +++ /dev/null @@ -1,30 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap"); - -:root { - --background-primary: #000 !important; - --background-lighter: #000 !important; - --navbar-color: #000 !important; - --navbar-height: 60px !important; - --navbar-text-color: greenyellow !important; - --navbar-link-color: greenyellow !important; - --navbar-link-hover-color: green !important; - --navbar-font: "Roboto" !important; - --input-text-color: greenyellow !important; - --input-placeholder-color: white !important; - --input-background-color: #000 !important; - --input-border-color: greenyellow !important; - --input-border-size: 1.3px !important; - --navbar-logo-filter: none !important; - --dropdown-option-hover-color: #312a49 !important; - --tab-color: var(--black) !important; - --border-color: greenyellow !important; -} - -.font-inter { - font-family: "Inter", sans-serif; - font-weight: 300; -} - -.font-roboto { - font-family: "Roboto"; -} diff --git a/public/themes/main.css b/public/themes/main.css deleted file mode 100644 index fb1727c..0000000 --- a/public/themes/main.css +++ /dev/null @@ -1,30 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap"); - -:root { - --background-primary: #191724; - --background-lighter: #16121f; - --navbar-color: #26233a; - --navbar-height: 60px; - --navbar-text-color: #7967dd; - --navbar-link-color: #e0def4; - --navbar-link-hover-color: gray; - --navbar-font: "Roboto"; - --input-text-color: #e0def4; - --input-placeholder-color: white; - --input-background-color: #1f1d2e; - --input-border-color: #eb6f92; - --input-border-size: 1.3px; - --navbar-logo-filter: none; - --dropdown-option-hover-color: #312a49; - --tab-color: var(--black); - --border-color: #16121f; -} - -.font-inter { - font-family: "Inter", sans-serif; - font-weight: 300; -} - -.font-roboto { - font-family: "Roboto"; -} diff --git a/src/components/ThemeProvider.tsx b/src/components/ThemeProvider.tsx new file mode 100644 index 0000000..6592ca8 --- /dev/null +++ b/src/components/ThemeProvider.tsx @@ -0,0 +1,90 @@ +import { createContext } from "preact"; +import { useContext, useEffect, useState } from "preact/hooks"; +type Theme = + | "main" + | "hacker" + | "catppuccin-mocha" + | "catppuccin-macchiato" + | "catppuccin-frappe" + | "catppuccin-latte"; +const themes: Theme[] = [ + "main", + "hacker", + "catppuccin-mocha", + "catppuccin-macchiato", + "catppuccin-frappe", + "catppuccin-latte" +]; +type ThemeProviderProps = { + children: React.ReactNode; +}; +type ThemeProviderState = { + themes: Theme[]; + theme: Theme; + background: string; + setTheme: (theme: Theme) => void; + setBackground: (background: string) => void; +}; + +const initialState: ThemeProviderState = { + themes: themes, + theme: "main", + background: "", + setTheme: () => null, + setBackground: () => null +}; + +const ThemeProviderContext = createContext(initialState); + +export function ThemeProvider({ children, ...props }: ThemeProviderProps) { + const defaultTheme = "main"; + const storageKey = "theme"; + const bgKey = "background"; + const [theme, setTheme] = useState( + () => (localStorage.getItem(storageKey) as Theme) || defaultTheme + ); + const [background, setBackground] = useState(() => + localStorage.getItem(bgKey) + ); + + useEffect(() => { + const root = window.document.documentElement; + + themes.forEach((theme) => { + root.classList.remove(theme); + }); + root.classList.add(theme); + document.documentElement.style.setProperty( + "--background-image", + `url(${background})` + ); + }, [theme, themes, background]); + + const value = { + theme, + themes, + background, + setTheme: (theme: Theme) => { + localStorage.setItem(storageKey, theme); + setTheme(theme); + }, + setBackground: (background: string) => { + localStorage.setItem(bgKey, background); + setBackground(background); + } + }; + + return ( + + {children} + + ); +} +export const useTheme = () => { + const context = useContext(ThemeProviderContext); + + if (context === undefined) + throw new Error("useTheme must be used within a ThemeProvider"); + + return context; +}; diff --git a/src/index.tsx b/src/index.tsx index 4932a74..98c629e 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,21 +1,20 @@ import { render } from "preact"; import { Suspense, lazy } from "preact/compat"; import { LoadSuspense } from "./LoadSuspense"; -import { Helmet } from "react-helmet"; import Meta from "./components/Meta"; import Particles, { initParticlesEngine } from "@tsparticles/react"; import { loadSlim } from "@tsparticles/slim"; import { useEffect, useState } from "preact/compat"; +import { ThemeProvider, useTheme } from "./components/ThemeProvider"; const Routes = lazy(() => import("./routes")); -const theme = localStorage.getItem("theme") || "main"; const particlesUrl = localStorage.getItem("particles") || "none"; export default function App() { const [init, setInit] = useState(false); - + const {background} = useTheme(); // this should be run only once per application lifetime useEffect(() => { initParticlesEngine(async (engine) => { @@ -30,23 +29,15 @@ export default function App() { setInit(true); }); }, []); - const particlesLoaded = (container) => { console.log(container); }; - return ( -
+
{window.location.origin === "https://nebulaproxy.io" && } {/* {window.location.origin === "http://localhost:8080" && } */} - - - - }> -
- -
+
{init && particlesUrl !== "none" && ( , document.getElementById("app")); +render( + + + , + document.getElementById("app") +); diff --git a/src/locales/en.json b/src/locales/en.json index f953a6c..242900f 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -72,7 +72,10 @@ "select": "Select", "particles": "Particles", "particlesDesc": "Choose a particles wallpaper", - "particlesNone": "None" + "particlesNone": "None", + "background": "Background", + "backgroundDesc": "Choose a background image", + "backgroundNone": "None" }, "httpProxy": { "title": "(Advanced) HTTP Proxy", @@ -94,10 +97,10 @@ "main": "Main", "hacker": "Hacker", "crismas": "Crismas🐴🎄", - "catppuccinMocha": "Catppuccin Mocha", - "catppuccinMacchiato": "Catppuccin Macchiato", - "catppuccinFrappe": "Catppuccin Frappe", - "catppuccinLatte": "Catppuccin Latte" + "catppuccin-mocha": "Catppuccin Mocha", + "catppuccin-macchiato": "Catppuccin Macchiato", + "catppuccin-frappe": "Catppuccin Frappe", + "catppuccin-latte": "Catppuccin Latte" }, "clipboard": "URL copied to clipboard!", "bareError": "That didn't quite work. Double check that the bare server exists and isn't blocked.", diff --git a/src/locales/es.json b/src/locales/es.json index 6f7493b..ca8149f 100644 --- a/src/locales/es.json +++ b/src/locales/es.json @@ -69,9 +69,13 @@ "theme": { "title": "Mirar", "subtitle": "Elige una mirada para que tus ojos no nos odienn", + "select": "Seleccionar", "particles": "Partículas", "particlesDesc": "Elige un fondo de pantalla de partículas", - "particlesNone": "Ninguna" + "particlesNone": "Ninguna", + "background": "Fondo", + "backgroundDesc": "Elige una imagen de fondo", + "backgroundNone": "Ninguna" }, "httpProxy": { "title": "Proxy HTTP (avanzado)", @@ -93,10 +97,10 @@ "main": "Por defecto", "hacker": "Hacker", "crismas": "Naidad🐴🎄", - "catppuccinMocha": "Catppuccin Mocha", - "catppuccinMacchiato": "Catppuccin Macchiato", - "catppuccinFrappe": "Catppuccin Frappe", - "catppuccinLatte": "Catppuccin Latte" + "catppuccin-mocha": "Catppuccin Mocha", + "catppuccin-macchiato": "Catppuccin Macchiato", + "catppuccin-frappe": "Catppuccin Frappe", + "catppuccin-latte": "Catppuccin Latte" }, "clipboard": "¡URL copiada al portapapeles!", "bareError": "Esto no es funcional. Vuelva a verificar que el servidor bare exista y no esté bloqueado.", diff --git a/src/locales/ja.json b/src/locales/ja.json index 4d85d04..a0fc967 100644 --- a/src/locales/ja.json +++ b/src/locales/ja.json @@ -69,9 +69,13 @@ "theme": { "title": "壁紙", "subtitle": "お好みの壁紙を選択してください", + "select": "選択する", "particles": "パーティクル", "particlesDesc": "パーティクルの種類を選択してください", - "particlesNone": "なし" + "particlesNone": "なし", + "background": "背景", + "backgroundDesc": "背景画像を選択してください", + "backgroundNone": "なし" }, "httpProxy": { "title": "HTTPプロキシ (上級者向け)", @@ -93,10 +97,10 @@ "main": "標準", "hacker": "Hacker", "crismas": "Crismas🐴🎄", - "catppuccinMocha": "Catppuccin Mocha", - "catppuccinMacchiato": "Catppuccin Macchiato", - "catppuccinFrappe": "Catppuccin Frappe", - "catppuccinLatte": "Catppuccin Latte" + "catppuccin-mocha": "Catppuccin Mocha", + "catppuccin-macchiato": "Catppuccin Macchiato", + "catppuccin-frappe": "Catppuccin Frappe", + "catppuccin-latte": "Catppuccin Latte" }, "clipboard": "コピーしました!", "bareError": "処理を実行できませんでした　Bareサーバーが存在し、そしてアクセスが拒否されていない事も確認してから、再度お試してください", diff --git a/src/pages/Settings/Customization.tsx b/src/pages/Settings/Customization.tsx index feffc73..ed02e42 100644 --- a/src/pages/Settings/Customization.tsx +++ b/src/pages/Settings/Customization.tsx @@ -1,20 +1,15 @@ +import { useRef } from "preact/hooks"; +import { useTheme } from "../../components/ThemeProvider"; import { motion } from "framer-motion"; import { tabContentVariant, settingsPageVariant } from "./Variants"; import { useTranslation } from "react-i18next"; import Dropdown from "./Dropdown"; +import ThemeDropdown from "./ThemeDropdown"; function Customization({ id, active }) { + const bgInput = useRef(null); const { t } = useTranslation(); - - const themes = [ - { id: "main", label: t("themes.main") }, - { id: "hacker", label: t("themes.hacker") }, - { id: "catppuccinMocha", label: t("themes.catppuccinMocha") }, - { id: "catppuccinMacchiato", label: t("themes.catppuccinMacchiato") }, - { id: "catppuccinFrappe", label: t("themes.catppuccinFrappe") }, - { id: "catppuccinLatte", label: t("themes.catppuccinLatte") } - ]; - + const { background, setBackground } = useTheme(); const particles = [ { id: "none", label: t("settings.theme.particlesNone") }, { id: "/crismas.json", label: t("themes.crismas") } @@ -40,7 +35,7 @@ function Customization({ id, active }) {
{t("settings.theme.subtitle")}
- +
@@ -51,6 +46,26 @@ function Customization({ id, active }) {
+
+
+ {t("settings.theme.background")} +
+
+ {t("settings.theme.backgroundDesc")} +
+ + +
); diff --git a/src/pages/Settings/PersonCard.tsx b/src/pages/Settings/PersonCard.tsx index 5b4077f..69d41e0 100644 --- a/src/pages/Settings/PersonCard.tsx +++ b/src/pages/Settings/PersonCard.tsx @@ -6,7 +6,7 @@ interface props { export const PersonCard = (props) => { return ( -
+

diff --git a/src/pages/Settings/ThemeDropdown.tsx b/src/pages/Settings/ThemeDropdown.tsx new file mode 100644 index 0000000..e93bc1b --- /dev/null +++ b/src/pages/Settings/ThemeDropdown.tsx @@ -0,0 +1,53 @@ +import { useState } from "preact/hooks"; +import { FaAngleDown } from "react-icons/fa"; +import { useTheme } from "../../components/ThemeProvider"; +import { useTranslation } from "react-i18next"; + +const ThemeDropdown = () => { + const [isOpen, setIsOpen] = useState(false); + const { t } = useTranslation(); + const { theme, setTheme, themes } = useTheme(); + const options = themes.map((theme) => { + return { id: theme, label: t(`themes.${theme}`) }; + }); + return ( +

+ ); +}; + +export default ThemeDropdown; diff --git a/src/routes.tsx b/src/routes.tsx index a2ffe7b..2d2324b 100644 --- a/src/routes.tsx +++ b/src/routes.tsx @@ -7,8 +7,8 @@ import { Radon } from "./pages/Radon"; import { Settings } from "./pages/Settings/"; import { AboutBlank } from "./AboutBlank"; import { Faq } from "./pages/Faq"; -import { registerRemoteListener } from "@mercuryworkshop/bare-mux"; -import { setTransport } from './util/transports'; +// import { registerRemoteListener } from "@mercuryworkshop/bare-mux"; +import { setTransport } from "./util/transports"; import "./style.css"; import "./i18n"; @@ -19,15 +19,13 @@ export default function Routes() { "/wisp/"; // @TODO Japan - US ping if ("serviceWorker" in navigator) { - console.log("am bout to bus"); - navigator.serviceWorker.ready.then(async (sw) => { - //await registerRemoteListener(sw.active!) - setTransport(); + navigator.serviceWorker.ready.then(async () => { + //await registerRemoteListener(sw.active!) + setTransport(); + }); + navigator.serviceWorker.register("/sw.js", { + scope: "/~/" }); - navigator.serviceWorker - .register("/sw.js", { - scope: "/~/" - }) } return ( diff --git a/src/style.css b/src/style.css index 465f414..71a7c5c 100644 --- a/src/style.css +++ b/src/style.css @@ -1,9 +1,138 @@ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;700;900&display=swap"); - +@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap"); @tailwind base; @tailwind components; @tailwind utilities; - -body { - background-color: var(--background-primary) !important; +@layer base { + :root, + .main { + --background-primary: #191724; + --background-lighter: #16121f; + --navbar-color: #26233a; + --navbar-height: 60px; + --navbar-text-color: #7967dd; + --navbar-link-color: #e0def4; + --navbar-link-hover-color: gray; + --navbar-font: "Roboto"; + --input-text-color: #e0def4; + --input-placeholder-color: white; + --input-background-color: #1f1d2e; + --input-border-color: #eb6f92; + --input-border-size: 1.3px; + --navbar-logo-filter: none; + --dropdown-option-hover-color: #312a49; + --tab-color: var(--black); + --border-color: #16121f; + } + .hacker { + --background-primary: #000 !important; + --background-lighter: #000 !important; + --navbar-color: #000 !important; + --navbar-height: 60px !important; + --navbar-text-color: greenyellow !important; + --navbar-link-color: greenyellow !important; + --navbar-link-hover-color: green !important; + --navbar-font: "Roboto" !important; + --input-text-color: greenyellow !important; + --input-placeholder-color: white !important; + --input-background-color: #000 !important; + --input-border-color: greenyellow !important; + --input-border-size: 1.3px !important; + --navbar-logo-filter: none !important; + --dropdown-option-hover-color: #312a49 !important; + --tab-color: var(--black) !important; + --border-color: greenyellow !important; + } + .catppuccin-mocha { + --background-primary: #1e1e2e !important; + --background-lighter: #181825 !important; + --navbar-color: #181825 !important; + --navbar-height: 60px !important; + --navbar-text-color: #cdd6f4 !important; + --navbar-link-color: #89b4fa !important; + --navbar-link-hover-color: #cba6f7 !important; + --navbar-font: "Roboto" !important; + --input-text-color: #cdd6f4 !important; + --input-placeholder-color: #a6adc8 !important; + --input-background-color: #11111b !important; + --input-border-color: color-mix(in srgb, #11111b, #cba6f7 50%) !important; + --input-border-size: 1.3px !important; + --navbar-logo-filter: none !important; + --dropdown-option-hover-color: #11111b !important; + --tab-color: #313244 !important; + --active-color: #cba6f7 !important; + } + .catppuccin-macchiato { + --background-primary: #24273a !important; + --background-lighter: #1e2030 !important; + --navbar-color: #1e2030 !important; + --navbar-height: 60px !important; + --navbar-text-color: #cad3f5 !important; + --navbar-link-color: #8aadf4 !important; + --navbar-link-hover-color: #c6a0f6 !important; + --navbar-font: "Roboto" !important; + --input-text-color: #cad3f5 !important; + --input-placeholder-color: #a5adcb !important; + --input-background-color: #181926 !important; + --input-border-color: color-mix(in srgb, #181926, #c6a0f6 50%) !important; + --input-border-size: 1.3px !important; + --navbar-logo-filter: none !important; + --dropdown-option-hover-color: #181926 !important; + --tab-color: #363a4f !important; + --active-color: #c6a0f6 !important; + } + .catppuccin-frappe { + --background-primary: #303446 !important; + --background-lighter: #292c3c !important; + --navbar-color: #292c3c !important; + --navbar-height: 60px !important; + --navbar-text-color: #c6d0f5 !important; + --navbar-link-color: #8caaee !important; + --navbar-link-hover-color: #ca9ee6 !important; + --navbar-font: "Roboto" !important; + --input-text-color: #c6d0f5 !important; + --input-placeholder-color: #a5adce !important; + --input-background-color: #232634 !important; + --input-border-color: color-mix(in srgb, #232634, #ca9ee6 50%) !important; + --input-border-size: 1.3px !important; + --navbar-logo-filter: none !important; + --dropdown-option-hover-color: #232634 !important; + --tab-color: #414559 !important; + --active-color: #ca9ee6 !important; + } + .catppuccin-latte { + --background-primary: #eff1f5 !important; + --background-lighter: #e6e9ef !important; + --navbar-color: #e6e9ef !important; + --navbar-height: 60px !important; + --navbar-text-color: #4c4f69 !important; + --navbar-link-color: #1e66f5 !important; + --navbar-link-hover-color: #8839ef !important; + --navbar-font: "Roboto" !important; + --input-text-color: #4c4f69 !important; + --input-placeholder-color: #6c6f85 !important; + --input-background-color: #dce0e8 !important; + --input-border-color: color-mix(in srgb, #dce0e8, #8839ef 50%) !important; + --input-border-size: 1.3px !important; + --navbar-logo-filter: none !important; + --dropdown-option-hover-color: #dce0e8 !important; + --tab-color: #ccd0da !important; + --active-color: #8839ef !important; + } +} +body { + @apply bg-primary; + background-image: var(--background-image); + background-position: center; + background-size: cover; + background-attachment: fixed; +} + +.font-inter { + font-family: "Inter", sans-serif; + font-weight: 300; +} + +.font-roboto { + font-family: "Roboto"; } diff --git a/vite.config.ts b/vite.config.ts index 8a9bb2c..5f20584 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -59,10 +59,15 @@ export default defineConfig({ rewrite: (path) => path.replace(/^\/bare\//, "") }, "/wisp/": { - target: "http://localhost:3000/", + target: "http://localhost:8080/wisp/", changeOrigin: true, ws: true, rewrite: (path) => path.replace(/^\/wisp\//, "") + }, + "/search": { + target: "http://localhost:8080/search", + changeOrigin: true, + rewrite: (path) => path.replace(/^\/search/, "") } } }