feat: remove logo URL configuration and update Brand component to use static logo

Author: yixuanwu4

apps/frontend/index.html

@@ -25,7 +25,6 @@
       apiUrl: '$API_URL',
       themeColor: '$THEME_COLOR',
       title: '$TITLE',
-      logoUrl: '$LOGO_URL',
     };
   </script>
 </head>

apps/frontend/src/configuration.ts

@@ -10,7 +10,6 @@ export const C = {
     apiUrl: getEnv("apiUrl") || import.meta.env.VITE_API_URL,
     themeColor: getEnv("themeColor") || import.meta.env.VITE_THEME_COLOR,
     title: getEnv("title") || import.meta.env.VITE_TITLE,
-    logoUrl: getEnv("logoUrl") || import.meta.env.VITE_LOGO_URL,
   },
   ui: {
     maxDropdownHeight: 800,

apps/frontend/src/routes/__root.tsx

@@ -67,7 +67,7 @@ function Root() {
         <AppShell.Header>
           <Group justify="space-between">
             <Link to="/">
-              <Brand title={C.env.title} logoUrl={C.env.logoUrl} />
+              <Brand title={C.env.title} />
             </Link>
             {sessionStore.email && (
               <Group>

apps/frontend/src/types.d.ts

@@ -27,7 +27,6 @@ declare global {
       apiUrl?: string;
       themeColor?: string;
       title?: string;
-      logoUrl?: string;
     };
   }
 }

examples/public/docker-compose.yaml

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

libs/ui/src/components/Brand.tsx

@@ -1,14 +1,14 @@
-import { Group, Stack, Title, Image } from "@mantine/core";
+import { Group, Stack, Title } from "@mantine/core";
+import Logo from "../../../../apps/frontend/public/logo.svg?react";
 
 type Props = {
   title: string;
-  logoUrl: string;
 };
 
-export function Brand({ title, logoUrl }: Props) {
+export function Brand({ title }: Props) {
   return (
     <Group className="quassel-Brand" gap="md">
-      <Image src={logoUrl} className="quassel-Logo" />
+      <Logo className="quassel-Logo" />
       <Stack gap={0}>
         <Title order={2} c="black">
           {title}