🎱 Feil-side lagt til!

Co-authored-by: Amalie Erdal Mansaker <amalie.erdal.mansaker@nav.no>
Co-authored-by: Markus A. R. Johansen <markus.aleksander.rakil.johansen@nav.no>

frontend/.eslintrc.json

@@ -1,3 +1,5 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": [
+    "next/core-web-vitals"
+  ]
 }

frontend/.stylelintrc

@@ -0,0 +1,7 @@
+{
+    "stylelint": {
+        "extends": [
+          "@navikt/aksel-stylelint/recommended"
+        ]
+      }
+}

frontend/package.json

@@ -22,7 +22,12 @@
     "postcss": "8.4.24",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-router-dom": "^6.14.0",
     "tailwindcss": "3.3.2",
     "typescript": "5.1.5"
+  },
+  "devDependencies": {
+    "@navikt/aksel-stylelint": "^4.5.0",
+    "stylelint": "^15.9.0"
   }
 }

frontend/pages/feil.tsx

@@ -0,0 +1,54 @@
+import "@navikt/ds-css";
+
+import { Button, Heading, TextField, Textarea } from "@navikt/ds-react";
+import { BugIcon, UploadIcon, ArrowLeftIcon } from "@navikt/aksel-icons";
+
+export default function Home() {
+    return (
+      <main className="flex flex-col justify-center gap-32 p-16">
+        <div className="w-1/2 flex flex-col gap-4 justify-center">
+            <BugIcon 
+                title="Insekts ikon" 
+                fontSize="3rem" 
+            />
+            <Heading 
+                level="1" 
+                size="xlarge"
+            >
+                    Innmelding av feil i speil
+            </Heading>
+        </div>
+        <div className="w-1/2 flex flex-col gap-4 justify-center">
+            <TextField 
+                label="Tittel" 
+                description="En kort oppsummering av problemet" 
+            />
+            <Textarea 
+                label="Beskrivelse" 
+                description="Detaljert beskrivelse av problemet" 
+            />
+
+            <Button 
+                variant="secondary"
+                icon={<UploadIcon />}
+            >
+                Last opp skjermbilder
+            </Button>
+        </div>
+        <div className="w-1/2 flex flex-col gap-2 justify-center">
+            <Button
+                variant="primary"
+            >
+                Meld inn feil
+            </Button>
+            <Button
+                variant="tertiary"
+                icon={<ArrowLeftIcon />}
+            >
+                Gå tilbake til hovedmenyen
+            </Button>
+        </div>
+
+      </main>
+    )
+  }

frontend/pages/index.tsx

@@ -5,9 +5,10 @@ import { Button, Heading } from "@navikt/ds-react";
 export default function Home() {
   return (
     <main className="flex justify-center">
-      <div className="w-1/2 flex justify-center">
+      <div className="w-1/2 flex flex-col gap-4 justify-center text-center">
         <Heading level="1" size="xlarge">Sprik</Heading>
-        <Button variant="secondary">Test</Button>
+        <Button variant="primary">Meld inn feil</Button>
+        <Button variant="secondary">Meld inn funksjonalitetsønsker</Button>
       </div>
     </main>
   )

frontend/styles/globals.css

@@ -2,26 +2,3 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}