feat: make logo themable

Author: openscript

apps/frontend/public/logo.svg

@@ -28,6 +28,7 @@ import { $api } from "../stores/api";
 import { DefaultError, useQueryClient } from "@tanstack/react-query";
 import { i18n } from "../stores/i18n";
 import { C } from "../configuration";
+import logo from "/logo.svg";
 
 const messages = i18n("RootRoute", {
   title: "Home",
@@ -67,7 +68,7 @@ function Root() {
         <AppShell.Header>
           <Group justify="space-between">
             <Link to="/">
-              <Brand title={C.env.title} />
+              <Brand title={C.env.title} logoPath={logo} />
             </Link>
             {sessionStore.email && (
               <Group>

apps/frontend/src/routes/__root.tsx

@@ -78,7 +78,7 @@ services:
       THEME_COLOR: uzhGold
       TITLE: LEMON
     volumes:
-      - logo.svg:/usr/share/nginx/logo.svg
+      - ./logo.svg:/usr/share/nginx/html/logo.svg
     labels:
       - "com.centurylinklabs.watchtower.enable=true"
       - "traefik.enable=true"

examples/public/docker-compose.yaml

@@ -1,15 +1,14 @@
 import { Group, Stack, Title } from "@mantine/core";
-import React, { ComponentType } from "react";
 
 type Props = {
   title: string;
-  Logo: ComponentType<React.SVGProps<SVGSVGElement> | React.ImgHTMLAttributes<HTMLImageElement>>;
+  logoPath: string;
 };
 
-export function Brand({ title, Logo }: Props) {
+export function Brand({ title, logoPath }: Props) {
   return (
     <Group className="quassel-Brand" gap="md">
-      <Logo className="quassel-Logo" />
+      <img src={logoPath} className="quassel-Logo" />
       <Stack gap={0}>
         <Title order={2} c="black">
           {title}