Skip to content

Commit 1ffe2c4

Browse files
piwelpiwel
committed
fix: use local manager logos
1 parent 95d27b4 commit 1ffe2c4

9 files changed

Lines changed: 58 additions & 26 deletions

File tree

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/png" href="https://evolution-api.com/files/evo/favicon.svg" />
5+
<link rel="icon" type="image/svg+xml" href="/assets/images/evolution-logo-light.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>Evolution Manager</title>
88
</head>

‎public/assets/images/evolution-logo-dark.svg‎

Lines changed: 11 additions & 0 deletions
Loading

‎public/assets/images/evolution-logo-light.svg‎

Lines changed: 11 additions & 0 deletions
Loading

‎src/components/sidebar.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import { useTheme } from "@/components/theme-provider";
1717
import { useInstance } from "@/contexts/InstanceContext";
1818

1919
import { FEATURES, FeatureKey, isFeatureEnabled } from "@/lib/provider/features";
20+
import { EVOLUTION_LOGO_DARK_URL, EVOLUTION_LOGO_LIGHT_URL } from "@/lib/brand";
2021
import { cn } from "@/lib/utils";
2122

2223
const GATED_IDS = new Set<string>(Object.keys(FEATURES));
@@ -41,11 +42,8 @@ type Menu = MenuLeaf | MenuGroup;
4142

4243
function SidebarShell({ children, footer }: { children: React.ReactNode; footer?: React.ReactNode }) {
4344
const currentYear = new Date().getFullYear();
44-
const { theme } = useTheme();
45-
const logoSrc =
46-
theme === "dark"
47-
? "https://evolution-api.com/files/evo/evolution-logo-white.svg"
48-
: "https://evolution-api.com/files/evo/evolution-logo.svg";
45+
const { resolvedTheme } = useTheme();
46+
const logoSrc = resolvedTheme === "dark" ? EVOLUTION_LOGO_DARK_URL : EVOLUTION_LOGO_LIGHT_URL;
4947

5048
return (
5149
<aside className="hidden md:flex bg-sidebar text-sidebar-foreground flex-col w-56 border-r border-sidebar-border">

‎src/components/theme-provider.tsx‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import { createContext, ReactNode, useContext, useEffect, useState } from "react";
33

44
type Theme = "dark" | "light" | "system";
5+
type ResolvedTheme = "dark" | "light";
56

67
type ThemeProviderProps = {
78
children: ReactNode;
@@ -11,36 +12,50 @@ type ThemeProviderProps = {
1112

1213
type ThemeProviderState = {
1314
theme: Theme;
15+
resolvedTheme: ResolvedTheme;
1416
setTheme: (theme: Theme) => void;
1517
};
1618

1719
const initialState: ThemeProviderState = {
1820
theme: "system",
21+
resolvedTheme: "light",
1922
setTheme: () => null,
2023
};
2124

2225
const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
2326

2427
export function ThemeProvider({ children, defaultTheme = "system", storageKey = "vite-ui-theme", ...props }: ThemeProviderProps) {
2528
const [theme, setTheme] = useState<Theme>(() => (localStorage.getItem(storageKey) as Theme) || defaultTheme);
29+
const [resolvedTheme, setResolvedTheme] = useState<ResolvedTheme>("light");
2630

2731
useEffect(() => {
2832
const root = window.document.documentElement;
2933

3034
root.classList.remove("light", "dark");
3135

3236
if (theme === "system") {
33-
const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
37+
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
38+
const applySystemTheme = () => {
39+
const systemTheme = mediaQuery.matches ? "dark" : "light";
3440

35-
root.classList.add(systemTheme);
36-
return;
41+
root.classList.remove("light", "dark");
42+
root.classList.add(systemTheme);
43+
setResolvedTheme(systemTheme);
44+
};
45+
46+
applySystemTheme();
47+
mediaQuery.addEventListener("change", applySystemTheme);
48+
49+
return () => mediaQuery.removeEventListener("change", applySystemTheme);
3750
}
3851

3952
root.classList.add(theme);
53+
setResolvedTheme(theme);
4054
}, [theme]);
4155

4256
const value = {
4357
theme,
58+
resolvedTheme,
4459
setTheme: (theme: Theme) => {
4560
localStorage.setItem(storageKey, theme);
4661
setTheme(theme);

‎src/lib/brand.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export const EVOLUTION_LOGO_LIGHT_URL = "/assets/images/evolution-logo-light.svg";
2+
export const EVOLUTION_LOGO_DARK_URL = "/assets/images/evolution-logo-dark.svg";

‎src/pages/Home.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,12 @@ import { useNavigate } from "react-router-dom";
66
import { useTheme } from "@/components/theme-provider";
77
import { ModeToggle } from "@/components/mode-toggle";
88
import { LanguageToggle } from "@/components/language-toggle";
9+
import { EVOLUTION_LOGO_DARK_URL, EVOLUTION_LOGO_LIGHT_URL } from "@/lib/brand";
910

1011
export default function Home() {
1112
const navigate = useNavigate();
12-
const { theme } = useTheme();
13+
const { resolvedTheme } = useTheme();
14+
const logoSrc = resolvedTheme === "dark" ? EVOLUTION_LOGO_DARK_URL : EVOLUTION_LOGO_LIGHT_URL;
1315

1416
const handleGoToManager = () => {
1517
navigate("/manager");
@@ -21,7 +23,7 @@ export default function Home() {
2123
<header className="flex items-center justify-between px-4 py-2">
2224
<div className="flex items-center">
2325
<img
24-
src={theme === "dark" ? "https://evolution-api.com/files/evo/evolution-logo-white.svg" : "https://evolution-api.com/files/evo/evolution-logo.svg"}
26+
src={logoSrc}
2527
alt="Evolution API Logo"
2628
className="h-8"
2729
/>
@@ -38,7 +40,7 @@ export default function Home() {
3840
<div className="text-center mb-12">
3941
<div className="flex items-center justify-center mb-6">
4042
<img
41-
src={theme === "dark" ? "https://evolution-api.com/files/evo/evolution-logo-white.svg" : "https://evolution-api.com/files/evo/evolution-logo.svg"}
43+
src={logoSrc}
4244
alt="Evolution Manager Logo"
4345
className="h-10"
4446
/>

‎src/pages/Login/LicenseCallback.tsx‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,26 +10,22 @@ import { useTranslation } from "react-i18next";
1010
import { useNavigate, useSearchParams } from "react-router-dom";
1111

1212
import { useTheme } from "@/components/theme-provider";
13-
1413
import { activateLicense } from "@/lib/queries/license/license";
14+
import { EVOLUTION_LOGO_DARK_URL, EVOLUTION_LOGO_LIGHT_URL } from "@/lib/brand";
1515
import { getToken, TOKEN_ID } from "@/lib/queries/token";
1616

1717
type State = "activating" | "success" | "error";
1818

1919
function LicenseCallback() {
2020
const { t } = useTranslation();
21-
const { theme } = useTheme();
21+
const { resolvedTheme } = useTheme();
2222
const navigate = useNavigate();
2323
const [searchParams] = useSearchParams();
2424
const code = searchParams.get("code") ?? "";
2525

2626
const [state, setState] = useState<State>("activating");
2727
const [errorMessage, setErrorMessage] = useState("");
28-
29-
const logoSrc =
30-
theme === "dark"
31-
? "https://evolution-api.com/files/evo/evolution-logo-white.svg"
32-
: "https://evolution-api.com/files/evo/evolution-logo.svg";
28+
const logoSrc = resolvedTheme === "dark" ? EVOLUTION_LOGO_DARK_URL : EVOLUTION_LOGO_LIGHT_URL;
3329

3430
const doActivate = useCallback(async () => {
3531
setState("activating");

‎src/pages/Login/index.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,12 @@ import { useTranslation } from "react-i18next";
1010
import { useNavigate } from "react-router-dom";
1111
import { z } from "zod";
1212

13-
import { Form, FormSelect } from "@/components/ui/form";
1413
import { useTheme } from "@/components/theme-provider";
15-
14+
import { Form, FormSelect } from "@/components/ui/form";
1615
import { verifyCreds } from "@/lib/queries/auth/verifyCreds";
1716
import { verifyGoServer } from "@/lib/queries/auth/verifyGoServer";
1817
import { verifyServer } from "@/lib/queries/auth/verifyServer";
18+
import { EVOLUTION_LOGO_DARK_URL, EVOLUTION_LOGO_LIGHT_URL } from "@/lib/brand";
1919
import { checkLicenseStatus, initRegister } from "@/lib/queries/license/license";
2020
import { DEFAULT_PROVIDER, logout, saveToken } from "@/lib/queries/token";
2121

@@ -29,13 +29,10 @@ type LoginSchema = z.infer<typeof loginSchema>;
2929
function Login() {
3030
const { t } = useTranslation();
3131
const navigate = useNavigate();
32-
const { theme } = useTheme();
32+
const { resolvedTheme } = useTheme();
3333
const [loginError, setLoginError] = useState("");
3434
const [submitting, setSubmitting] = useState(false);
35-
const logoSrc =
36-
theme === "dark"
37-
? "https://evolution-api.com/files/evo/evolution-logo-white.svg"
38-
: "https://evolution-api.com/files/evo/evolution-logo.svg";
35+
const logoSrc = resolvedTheme === "dark" ? EVOLUTION_LOGO_DARK_URL : EVOLUTION_LOGO_LIGHT_URL;
3936

4037
const loginForm = useForm<LoginSchema>({
4138
resolver: zodResolver(loginSchema),

0 commit comments

Comments
 (0)