);
}
diff --git a/frontend/src/components/SchemeToggle.tsx b/frontend/src/components/SchemeToggle.tsx
new file mode 100644
index 0000000..4a326b3
--- /dev/null
+++ b/frontend/src/components/SchemeToggle.tsx
@@ -0,0 +1,18 @@
+import { ActionIcon, useMantineColorScheme } from "@mantine/core";
+import { IconMoon, IconSun } from "@tabler/icons-react";
+
+export default function SchemeToggle() {
+ const { colorScheme, toggleColorScheme } = useMantineColorScheme();
+ const dark = colorScheme === "dark";
+ return (
+ toggleColorScheme()}
+ aria-label={dark ? "Zum hellen Modus" : "Zum dunklen Modus"}
+ title={dark ? "Zum hellen Modus" : "Zum dunklen Modus"}
+ >
+ {dark ? : }
+
+ );
+}
diff --git a/frontend/src/components/StatusBadge.tsx b/frontend/src/components/StatusBadge.tsx
new file mode 100644
index 0000000..645c325
--- /dev/null
+++ b/frontend/src/components/StatusBadge.tsx
@@ -0,0 +1,21 @@
+import { Badge } from "@mantine/core";
+
+/* Single color language for every status in the app. */
+
+const COLORS: Record = {
+ completed: "green",
+ approved: "green",
+ genehmigt: "green",
+ deployed: "green",
+ running: "blue",
+ open: "yellow",
+ pending: "yellow",
+ pending_approval: "yellow",
+ failed: "red",
+ rejected: "red",
+ abgelehnt: "red",
+};
+
+export default function StatusBadge({ status }: { status: string }) {
+ return {status};
+}
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 350a0bf..41f6e8b 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,12 +1,21 @@
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
+import { MantineProvider } from "@mantine/core";
+import "@mantine/core/styles.css";
import App from "./App";
+import { colorSchemeManager, theme } from "./theme";
createRoot(document.getElementById("root")!).render(
-
-
-
+
+
+
+
+ ,
);
diff --git a/frontend/src/pages/AccessPage.tsx b/frontend/src/pages/AccessPage.tsx
index 39c98cd..8248d6f 100644
--- a/frontend/src/pages/AccessPage.tsx
+++ b/frontend/src/pages/AccessPage.tsx
@@ -1,4 +1,15 @@
import { useState } from "react";
+import {
+ Alert,
+ Button,
+ Card,
+ Stack,
+ Text,
+ Textarea,
+ TextInput,
+ Title,
+} from "@mantine/core";
+import { IconAlertCircle, IconCheck } from "@tabler/icons-react";
import { ApiError, api } from "../api";
export default function AccessPage() {
@@ -29,60 +40,54 @@ export default function AccessPage() {
}
}
- if (done) {
- return (
-
-
Zugang
-
+ return (
+
+
+ Zugang anfragen
+
+ {done ? (
+ } title="Angefragt">
Danke! Ihre Anfrage ist eingegangen. Sie erhalten eine E-Mail, sobald
sie freigegeben wurde.
-