frontend/src/index.css

@@ -197,7 +197,7 @@
   --color-su-primary: #002f5f;
   --color-su-primary-80: #33587f;
   --bottom-nav-height: 4.5rem;
-  font-family: 'TheSans', system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family: "TheSans", system-ui, Avenir, Helvetica, Arial, sans-serif;
   background-color: #ffffff;
   color: #000000;
 }
@@ -218,7 +218,6 @@
   font-size: 18px;
 }
 
-
 .body-semibold-md {
   font-family: "TheSansB W5 Plain", system-ui, sans-serif;
   font-size: 16px;

frontend/src/studentportalen/ComponentLibrary.tsx

@@ -1,48 +1,48 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from "react";
-import Button from '../components/Button/Button';
+import Button from "../components/Button/Button";
 
 export default function ComponentLibrary() {
-    const [darkMode, setDarkMode] = useState(() => {
+  const [darkMode, setDarkMode] = useState(() => {
-        return document.documentElement.classList.contains('dark');
+    return document.documentElement.classList.contains("dark");
-    });
+  });
 
-    useEffect(() => {
+  useEffect(() => {
-        if (darkMode) {
+    if (darkMode) {
-            document.documentElement.classList.add('dark');
+      document.documentElement.classList.add("dark");
-        } else {
+    } else {
-            document.documentElement.classList.remove('dark');
+      document.documentElement.classList.remove("dark");
-        }
+    }
-    }, [darkMode]);
+  }, [darkMode]);
 
-    return (
+  return (
-        <>
+    <>
-            <h1>Component Library</h1>
+      <h1>Component Library</h1>
 
-            <section className="mt-lg">
+      <section className="mt-lg">
-                <h2 className="mb-md">Dark Mode</h2>
+        <h2 className="mb-md">Dark Mode</h2>
-                <Button variant="primary" onClick={() => setDarkMode(!darkMode)}>
+        <Button variant="primary" onClick={() => setDarkMode(!darkMode)}>
-                    {darkMode ? 'Light Mode' : 'Dark Mode'}
+          {darkMode ? "Light Mode" : "Dark Mode"}
-                </Button>
+        </Button>
-            </section>
+      </section>
 
-            <section className="mt-lg">
+      <section className="mt-lg">
-                <h2 className="mb-md">Button Variants</h2>
+        <h2 className="mb-md">Button Variants</h2>
-                <div className="flex flex-wrap gap-md">
+        <div className="flex flex-wrap gap-md">
-                    <Button variant="primary">Primary</Button>
+          <Button variant="primary">Primary</Button>
-                    <Button variant="secondary">Secondary</Button>
+          <Button variant="secondary">Secondary</Button>
-                    <Button variant="red">Red</Button>
+          <Button variant="red">Red</Button>
-                    <Button variant="green">Green</Button>
+          <Button variant="green">Green</Button>
-                </div>
+        </div>
-            </section>
+      </section>
 
-            <section className="mt-lg">
+      <section className="mt-lg">
-                <h2 className="mb-md">Button Sizes</h2>
+        <h2 className="mb-md">Button Sizes</h2>
-                <div className="flex flex-wrap items-center gap-md">
+        <div className="flex flex-wrap items-center gap-md">
-                    <Button size="sm">Small</Button>
+          <Button size="sm">Small</Button>
-                    <Button size="md">Medium</Button>
+          <Button size="md">Medium</Button>
-                    <Button size="lg">Large</Button>
+          <Button size="lg">Large</Button>
-                </div>
+        </div>
-            </section>
+      </section>
-        </>
+    </>
-    );
+  );
 }

frontend/vite.config.ts

@@ -1,8 +1,8 @@
-import { defineConfig } from 'vite';
+import { defineConfig } from "vite";
-import react from '@vitejs/plugin-react-swc';
+import react from "@vitejs/plugin-react-swc";
-import tailwindcss from '@tailwindcss/vite';
+import tailwindcss from "@tailwindcss/vite";
 
 // https://vite.dev/config/
 export default defineConfig({
-    plugins: [react(), tailwindcss()],
+  plugins: [react(), tailwindcss()],
 });