Merge pull request #217 from openscript-ch/200-rebrand-quassel-to-lemon

openscript · web-flow · commit 771672fe3f18 · 2024-12-21T16:35:14.000+01:00
200 rebrand quassel to lemon
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: "admin@example.com",
-        password: await getPasswordHash("Quassel*1234"),
+        password: await getPasswordHash("Lemon*1234"),
       },
       {
         role: UserRole.ASSISTANT,
         email: "assistant@example.com",
-        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 @@ import {
   IconCalendarWeek,
   IconMapSearch,
   Divider,
+  FooterLogos,
 } from "@quassel/ui";
 import { createRootRouteWithContext, Link, Outlet, useNavigate } from "@tanstack/react-router";
 import { version } from "../../package.json";
@@ -48,7 +49,7 @@ function Root() {
   return (
     <>
       <AppShell
-        header={{ height: 118 }}
+        header={{ height: 104 }}
         footer={{ height: 84 }}
         navbar={{ width: 300, breakpoint: "sm", collapsed: { desktop: !layoutStore.admin } }}
         padding="xl"
@@ -62,7 +63,7 @@ function Root() {
             {sessionStore.email && (
               <Group>
                 <Text>{sessionStore.email}</Text>
-                <Button leftSection={<IconLogout />} onClick={handleSignOut}>
+                <Button variant="outline" leftSection={<IconLogout />} onClick={handleSignOut}>
                   Sign out
                 </Button>
               </Group>
@@ -90,10 +91,16 @@ function Root() {
             <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>
     </>
   );
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 { useStore } from "@nanostores/react";
 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 @@ export function HeroSection() {
             <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 @@ export function HeroSection() {
             </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
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 213 316" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;">
+    <g transform="matrix(1,0,0,1,-145.175,-88.3567)">
+        <g id="Layer-1" serif:id="Layer 1">
+            <path d="M146,89.5C156.9,89.4 167.8,88.9 178.6,89.4C195.8,90.9 212.9,96.7 226.5,107.6C237.5,116.3 245.5,128.1 252,140.5C232.9,146.4 211.8,146.4 193.1,138.9C182.4,134.6 172.4,128 164.6,119.4C156.9,110.5 150.5,100.4 146,89.5Z" style="fill:rgb(165,210,51);fill-rule:nonzero;stroke:rgb(245,231,8);stroke-width:0.4px;"/>
+            <path d="M160.1,96C172.6,101.7 185,107.9 197.6,113.4C212.8,120.7 227.9,128.2 243.1,135.6C227.4,129.6 211.6,123.8 196.4,116.5C184.2,109.9 171.9,103.4 160.1,96.1L160.1,96Z" style="fill-rule:nonzero;stroke:black;stroke-width:0.4px;"/>
+            <path d="M275.6,110.6C278.3,109.8 280.1,113.2 281.7,114.9C270.2,127.3 262.9,143.3 260.5,160C260.433,161.333 260.433,162.667 260.5,164C283.1,165 305,175.1 321,191C353.3,221.9 364.4,271.5 351.9,313.9C344,342.1 324.9,366.8 299.6,381.5C289.4,387.3 279.4,393.4 269.3,399.3C262.5,403.4 253.5,404.3 246.3,400.7C235.7,395.5 226.1,388.7 215.7,383.3C192.1,370.6 173.2,349.5 163.3,324.6C153.6,301.2 151.9,274.8 157.2,250.1C162.1,227.3 173.3,205.5 190.4,189.4C206.8,173.4 229.2,163.4 252.2,163.4C254.6,144 262.3,125 275.6,110.6Z" style="fill:rgb(255,200,69);fill-rule:nonzero;stroke:rgb(245,231,8);stroke-width:0.4px;"/>
+            <path d="M231.9,387.6C248,387.3 264.2,387.1 280.3,387.6C275,389.2 269.4,389.4 263.9,389.6C253.2,389.9 242.4,389.8 231.9,387.5L231.9,387.6Z" style="fill-rule:nonzero;stroke:black;stroke-width:0.4px;"/>
+        </g>
+    </g>
+</svg>
diff --git a/libs/ui/src/assets/UZHLogo.svg b/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) {

Original file line number	Diff line number	Diff line change
`@@ -18,12 +18,12 @@ export class DatabaseSeeder extends Seeder {`
`18`	`18`	`{`
`19`	`19`	`role: UserRole.ADMIN,`
`20`	`20`	`email: "admin@example.com",`
`21`		`- password: await getPasswordHash("Quassel*1234"),`
	`21`	`+ password: await getPasswordHash("Lemon*1234"),`
`22`	`22`	`},`
`23`	`23`	`{`
`24`	`24`	`role: UserRole.ASSISTANT,`
`25`	`25`	`email: "assistant@example.com",`
`26`		`- password: await getPasswordHash("Quassel*1234"),`
	`26`	`+ password: await getPasswordHash("Lemon*1234"),`
`27`	`27`	`},`
`28`	`28`	`];`
`29`	`29`