Legal Documents (#58)

.eslintrc.cjs

@@ -4,7 +4,7 @@ module.exports = {
     // ...
     "plugin:astro/recommended",
   ],
-  ignorePatterns: ["dist/"],
+  ignorePatterns: ["dist/", "*.config.js"],
   // ...
   overrides: [
     {

astro.config.mjs

@@ -1,8 +1,11 @@
-import { defineConfig } from 'astro/config';
+import { defineConfig } from "astro/config";
 
 import react from "@astrojs/react";
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [react()]
-});
+  integrations: [react()],
+  redirects: {
+    "/legal": "/legal/privacy",
+  },
+});

package.json

@@ -20,10 +20,11 @@
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
+    "@typescript-eslint/parser": "^6.7.3",
+    "prettier-plugin-astro": "^0.12.0",
     "eslint": "^8.50.0",
     "eslint-plugin-astro": "^0.29.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",
-    "@typescript-eslint/parser": "^6.7.3",
     "sass": "^1.68.0"
   }
 }

prettier.config.js

@@ -0,0 +1,12 @@
+/** @type {import("prettier").Config} */
+export default {
+  plugins: ["prettier-plugin-astro"],
+  overrides: [
+    {
+      files: "*.astro",
+      options: {
+        parser: "astro",
+      },
+    },
+  ],
+};

src/components/Choices.scss

@@ -115,16 +115,18 @@
   }
 }
 
-[theme="dark"] .choices__content {
-  background-image: url("/assets/backgrounds/bg_cloud_dark.svg");
+@media (prefers-color-scheme: dark) {
+  .choices__content {
+    background-image: url("/assets/backgrounds/bg_cloud_dark.svg");
 
-  .choices__video-button {
-    background: var(--darkmode-blue);
-  }
+    .choices__video-button {
+      background: var(--darkmode-blue);
+    }
 
-  .choices__video-position-buttons {
-    button {
-      background: var(--darkmode-pink);
+    .choices__video-position-buttons {
+      button {
+        background: var(--darkmode-pink);
+      }
     }
   }
 }

src/components/Choices.tsx

@@ -7,20 +7,15 @@ import Icon from "./Icon";
 
 const Choices = () => {
   const [position, setPosition] = useState(0);
-  const [theme, setTheme] = useState("dark");
+  const theme = useMediaQuery("(prefers-color-scheme: dark)")
+    ? "dark"
+    : "light";
   const [duration, setDuration] = useState(4000);
   const isMobile = useMediaQuery("(max-width: 850px)") ?? true;
 
   const setVideoDuration = (duration: number) =>
     isMobile && setDuration(duration * 1000);
 
-  useEffect(() => {
-    const theme = document.documentElement.getAttribute("theme");
-    if (theme) {
-      setTheme(theme);
-    }
-  }, []);
-
   useEffect(() => {
     setPosition(0);
     if (isMobile) setDuration(12012);
@@ -42,7 +37,7 @@ const Choices = () => {
   }, [position, duration, isMobile]);
 
   return (
-    <section className="choices" id="features">
+    <section className="choices" id="Features">
       <h2>Euer Board – Eure Entscheidungen.</h2>
       <p>Wählt eine beliebige Retrospektive, die zu eurem Team passt.</p>
       <div className="choices__content">