chore: add primary color to hero

Author: openscript

apps/frontend/src/sections/HeroSection.svg

@@ -1,6 +1,5 @@
-import image from "./HeroSection.svg";
 import classes from "./HeroSection.module.css";
-import { Button, Container, Group, Text, Title } from "@quassel/ui";
+import { Button, Container, Group, Hero, Text, Title } from "@quassel/ui";
 import { i18n } from "../stores/i18n";
 import { useStore } from "@nanostores/react";
 import { Link } from "@tanstack/react-router";
@@ -34,7 +33,7 @@ export function HeroSection() {
             </Button>
           </Group>
         </div>
-        <img src={image} alt="Lemon family" className={classes.image} />
+        <Hero />
       </div>
     </Container>
   );

apps/frontend/src/sections/HeroSection.tsx

@@ -0,0 +1,3 @@
+.hero :global(.accent) {
+  fill: var(--mantine-primary-color-1);
+}

libs/ui/src/assets/hero.svg

@@ -0,0 +1,6 @@
+import HeroSVG from "../assets/hero.svg?react";
+import classes from "./Hero.module.css";
+
+export function Hero() {
+  return <HeroSVG className={classes.hero} />;
+}

libs/ui/src/components/Hero.module.css

@@ -43,6 +43,7 @@ export { ThemeProvider, defaultTheme } from "./theme/ThemeProvider";
 export { Brand } from "./components/Brand";
 export { ContentShell } from "./components/ContentShell";
 export { FooterLogos } from "./components/FooterLogos";
+export { Hero } from "./components/Hero";
 export { ImportInput } from "./components/ImportInput";
 export { ImportPreview } from "./components/ImportPreview";
 export { MonthPicker } from "./components/MonthPicker";