openscript-ch · openscript · Dec 21, 2024 · Dec 20, 2024 · Dec 20, 2024 · Dec 20, 2024
diff --git a/.changeset/loud-parents-press.md b/.changeset/loud-parents-press.md
@@ -0,0 +1,8 @@
+---
+"@quassel/frontend": patch
+"@quassel/backend": patch
+"@quassel/mockup": patch
+"@quassel/ui": patch
+---
+
+Rebrand quassel to LEMON
diff --git a/apps/backend/db/seeds/DatabaseSeeder.ts b/apps/backend/db/seeds/DatabaseSeeder.ts
@@ -18,12 +18,12 @@ export class DatabaseSeeder extends Seeder {
       {
         role: UserRole.ADMIN,
         email: "[email protected]",
-        password: await getPasswordHash("Quassel*1234"),
+        password: await getPasswordHash("Lemon*1234"),
       },
       {
         role: UserRole.ASSISTANT,
         email: "[email protected]",
-        password: await getPasswordHash("Quassel*1234"),
+        password: await getPasswordHash("Lemon*1234"),
       },
     ];
 

diff --git a/apps/frontend/index.html b/apps/frontend/index.html
@@ -1,33 +1,36 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Quassel</title>
-    <link rel="icon" href="/favicon.ico" />
-    <style>
-      html {
-        height: 100%;
-      }
 
-      body {
-        margin: 0;
-        padding: 0;
-        min-height: 100%;
-      }
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Lemon</title>
+  <link rel="icon" href="/favicon.ico" />
+  <style>
+    html {
+      height: 100%;
+    }
 
-      #root {
-        min-height: 100%;
-      }
-    </style>
-    <script type="text/javascript">
-      window.env = {
-        apiUrl: '//REPLACE_WITH_API_URL'
-      };
-    </script>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
+    body {
+      margin: 0;
+      padding: 0;
+      min-height: 100%;
+    }
+
+    #root {
+      min-height: 100%;
+    }
+  </style>
+  <script type="text/javascript">
+    window.env = {
+      apiUrl: '//REPLACE_WITH_API_URL'
+    };
+  </script>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>
diff --git a/apps/frontend/src/routes/__root.tsx b/apps/frontend/src/routes/__root.tsx
@@ -15,6 +15,7 @@
   IconCalendarWeek,
   IconMapSearch,
   Divider,
+  FooterLogos,
 } from "@quassel/ui";
 import { createRootRouteWithContext, Link, Outlet, useNavigate } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/router-devtools";
@@ -49,7 +50,7 @@
   return (
     <>
       <AppShell
-        header={{ height: 118 }}
+        header={{ height: 104 }}
         footer={{ height: 84 }}
         navbar={{ width: 300, breakpoint: "sm", collapsed: { desktop: !layoutStore.admin } }}
         padding="xl"
@@ -63,7 +64,7 @@
             {sessionStore.email && (
               <Group>
                 <Text>{sessionStore.email}</Text>
-                <Button leftSection={<IconLogout />} onClick={handleSignOut}>
+                <Button variant="outline" leftSection={<IconLogout />} onClick={handleSignOut}>
                   Sign out
                 </Button>
               </Group>
@@ -91,10 +92,16 @@
             <NavLink component={Link} to="/administration/users" leftSection={<IconUsers />} label="Users" />
           </AppShell.Navbar>
         )}
+
         <AppShell.Main>
           <Outlet />
         </AppShell.Main>
-        <AppShell.Footer>Version {version}</AppShell.Footer>
+        <AppShell.Footer>
+          <Group justify="space-between">
+            <FooterLogos />
+            Version {version}
+          </Group>
+        </AppShell.Footer>
       </AppShell>
       <TanStackRouterDevtools position="top-left" />
     </>

diff --git a/apps/frontend/src/sections/HeroSection.module.css b/apps/frontend/src/sections/HeroSection.module.css
@@ -15,15 +15,11 @@
   font-size: rem(44px);
   line-height: 1.2;
   font-weight: 900;
-
-}
-
-.control {
 }
 
 .highlight {
   position: relative;
-  background-color: var(--mantine-color-blue-light);
+  background-color: var(--mantine-primary-color-light);
   border-radius: var(--mantine-radius-sm);
   padding: rem(4px) rem(12px);
 }
diff --git a/apps/frontend/src/sections/HeroSection.svg b/apps/frontend/src/sections/HeroSection.svg
diff --git a/apps/frontend/src/sections/HeroSection.tsx b/apps/frontend/src/sections/HeroSection.tsx
@@ -6,7 +6,7 @@
 import { Link } from "@tanstack/react-router";
 
 const messages = i18n("heroSection", {
-  title: "Quassel",
+  title: "LEMON",
   subtitle: "Gather language exposure",
   toFormAction: "Questionnaire",
   toAdminAction: "Administration",
@@ -22,7 +22,7 @@
             <span className={classes.highlight}>{t.title}</span>
           </Title>
           <Text c="dimmed" mt="md">
-            {t.subtitle}
+            <b>L</b>anguage <b>E</b>xposure questionnaire for <b>M</b>ultilinguals <b>On</b>line
           </Text>
 
           <Group mt={30}>
@@ -34,7 +34,7 @@
             </Button>
           </Group>
         </div>
-        <img src={image} alt="Quassel family" className={classes.image} />
+        <img src={image} alt="Lemon family" className={classes.image} />
       </div>
     </Container>
   );

diff --git a/libs/ui/src/assets/KleineWeltentdeckerLogo.png b/libs/ui/src/assets/KleineWeltentdeckerLogo.png
diff --git a/libs/ui/src/assets/Logo.svg b/libs/ui/src/assets/Logo.svg
diff --git a/libs/ui/src/components/Logo.svg → libs/ui/src/assets/UZHLogo.svg b/libs/ui/src/components/Logo.svg → libs/ui/src/assets/UZHLogo.svg
diff --git a/libs/ui/src/components/Brand.tsx b/libs/ui/src/components/Brand.tsx
@@ -1,14 +1,15 @@
-import { Divider, Group, Text } from "@mantine/core";
-import Logo from "./Logo.svg?react";
+import { Group, Stack, Title } from "@mantine/core";
+import Logo from "../assets/Logo.svg?react";
 
 export function Brand() {
   return (
-    <Group gap={30}>
+    <Group className="quassel-Brand" gap="md">
       <Logo className="quassel-Logo" />
-      <Divider orientation="vertical" />
-      <Text size="xl" fw={600} c="black">
-        Quassel
-      </Text>
+      <Stack gap={0}>
+        <Title order={2} c="black">
+          LEMON
+        </Title>
+      </Stack>
     </Group>
   );
 }
diff --git a/libs/ui/src/components/FooterLogos.tsx b/libs/ui/src/components/FooterLogos.tsx
@@ -0,0 +1,16 @@
+import { Group } from "@mantine/core";
+import UZHLogo from "../assets/UZHLogo.svg?react";
+import KleineWeltentdeckerLogo from "../assets/KleineWeltentdeckerLogo.png";
+
+export function FooterLogos() {
+  return (
+    <Group>
+      <a href="https://uzh.ch">
+        <UZHLogo />
+      </a>
+      <a href="https://www.psychologie.uzh.ch/de/bereiche/dev/devpsy/Weltentdecker.html">
+        <img src={KleineWeltentdeckerLogo} height={50} />
+      </a>
+    </Group>
+  );
+}
diff --git a/libs/ui/src/index.ts b/libs/ui/src/index.ts
@@ -41,6 +41,7 @@ export { formatDate, getTime, getDateFromTimeAndWeekday, getNext, isSameOrAfter,
 
 // custom components
 export { Brand } from "./components/Brand";
+export { FooterLogos } from "./components/FooterLogos";
 export { ImportInput } from "./components/ImportInput";
 export { ImportPreview } from "./components/ImportPreview";
 export { MonthPicker } from "./components/MonthPicker";

diff --git a/libs/ui/src/theme/Theme.css b/libs/ui/src/theme/Theme.css
@@ -7,19 +7,25 @@
   --fc-border-color: var(--mantine-color-default-border);
 }
 
-/* Page layout */
+.quassel-Logo {
+  max-height: 4rem;
+  width: auto;
+}
 
+/* Page layout */
 .mantine-AppShell-header,
 .mantine-AppShell-footer {
-  padding: var(--mantine-spacing-xl) var(--quassel-padding-x);
-}
+  display: flex;
+  align-items: center;
+  padding-inline: var(--quassel-padding-x);
 
-[data-admin] :is(.mantine-AppShell-header, .mantine-AppShell-footer) {
-  padding: var(--mantine-spacing-xl) var(--mantine-spacing-sm);
+  >* {
+    flex: 1;
+  }
 }
 
-[data-admin] .mantine-AppShell-header .quassel-Logo {
-  width: calc(var(--app-shell-navbar-width) - var(--mantine-spacing-sm) - var(--group-gap));
+[data-admin] :is(.mantine-AppShell-header, .mantine-AppShell-footer) {
+  padding-inline: var(--mantine-spacing-xl);
 }
 
 /* Components overrides */
@@ -35,4 +41,4 @@
 
 .mantine-AppShell-footer {
   background-color: var(--quassel-color-light-gray);
-}
+}
diff --git a/libs/ui/src/theme/ThemeProvider.tsx b/libs/ui/src/theme/ThemeProvider.tsx
@@ -34,7 +34,7 @@ export const theme: MantineThemeOverride = {
     uzhBlack: convertUZHColorsToMantine(uzhColors.uzhBlack),
     uzhWhite: convertUZHColorsToMantine(uzhColors.uzhWhite),
   },
-  primaryColor: "uzhBlue",
+  primaryColor: "uzhGold",
 };
 
 export function ThemeProvider({ children, ...args }: ThemeProviderProps) {