From 194bda6739ca709134cef31e467502e372595e70 Mon Sep 17 00:00:00 2001
From: Markus Johansen <markus.aleksander.rakil.johansen@nav.no>
Date: Wed, 2 Aug 2023 18:50:48 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Gj=C3=B8r=20sm=C3=A5=20styling?=
 =?UTF-8?q?=20forbedringer,=20forbedret=20UU=20ved=20=C3=A5=20lage=20skill?=
 =?UTF-8?q?elinjer=20i=20forms?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/BildeOpplastning.tsx   | 5 ++++-
 frontend/src/components/FeilModal.tsx          | 2 +-
 frontend/src/components/RedigeringsVerktoy.tsx | 5 ++++-
 frontend/src/components/Skillelinje.tsx        | 8 ++++++++
 frontend/src/pages/feil.tsx                    | 3 +++
 5 files changed, 20 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/Skillelinje.tsx

diff --git a/frontend/src/components/BildeOpplastning.tsx b/frontend/src/components/BildeOpplastning.tsx
index f3eb29b..345dfa3 100644
--- a/frontend/src/components/BildeOpplastning.tsx
+++ b/frontend/src/components/BildeOpplastning.tsx
@@ -1,5 +1,5 @@
 import { FileImageIcon, UploadIcon } from "@navikt/aksel-icons"
-import { Button } from "@navikt/ds-react"
+import { Button, Heading } from "@navikt/ds-react"
 
 
 /**
@@ -10,6 +10,9 @@ import { Button } from "@navikt/ds-react"
 const BildeOpplastning = () => {
     return(
         <div className="flex gap-2 flex-col">
+            <Heading size="xsmall">
+                Skjermbilder
+            </Heading>
             <div className="
                 h-48 p-5 bg-bg-subtle hover:bg-surface-selected border-2 border-blue-500
                 rounded-lg border-dashed flex flex-col items-center justify-center text-center gap-2 
diff --git a/frontend/src/components/FeilModal.tsx b/frontend/src/components/FeilModal.tsx
index 483684c..89069c5 100644
--- a/frontend/src/components/FeilModal.tsx
+++ b/frontend/src/components/FeilModal.tsx
@@ -11,7 +11,7 @@ interface modalInterface {
 const FeilModal = (props: modalInterface) => {
     return(                  
         <Modal
-            className="w-3/5"
+            className="w-3/5 p-5"
             open={props.open}
             aria-label={" modal"}
             onClose={() => props.setOpen(false)}
diff --git a/frontend/src/components/RedigeringsVerktoy.tsx b/frontend/src/components/RedigeringsVerktoy.tsx
index 6a9c8e5..9b7c2f9 100644
--- a/frontend/src/components/RedigeringsVerktoy.tsx
+++ b/frontend/src/components/RedigeringsVerktoy.tsx
@@ -3,6 +3,7 @@ import { TextField, Textarea, RadioGroup, Radio, Button, Switch } from "@navikt/
 import { useState } from "react"
 import { FeilmeldingsInnholdInterface } from "../interface"
 import axios from "axios"
+import Skillelinje from "./Skillelinje"
 
 interface redigeringsInterface extends FeilmeldingsInnholdInterface {
     reset: () => void
@@ -53,6 +54,7 @@ const RedigeringsVerktoy = (props: redigeringsInterface) => {
                     value={beskrivelse}
                     onChange={e => setBeskrivelse(e.target.value)}
                 />
+                <Skillelinje/>
                 <RadioGroup
                     legend="Velg arbeidsstatus for feil"
                     onChange={(arbeidsstatus: number) => {setArbeidsstatus(arbeidsstatus)}}
@@ -62,6 +64,7 @@ const RedigeringsVerktoy = (props: redigeringsInterface) => {
                     <Radio value={1}>Feilen jobbes med</Radio>
                     <Radio value={2}>Feilen er fikset</Radio>
                 </RadioGroup>
+                <Skillelinje/>
                 <Switch checked={haster} onClick={() => setHaster(!haster)}>
                     Saken haster
                 </Switch>
@@ -87,4 +90,4 @@ const RedigeringsVerktoy = (props: redigeringsInterface) => {
         </div>
     )
 }
-export default RedigeringsVerktoy;
\ No newline at end of file
+export default RedigeringsVerktoy;
diff --git a/frontend/src/components/Skillelinje.tsx b/frontend/src/components/Skillelinje.tsx
new file mode 100644
index 0000000..1df1ccd
--- /dev/null
+++ b/frontend/src/components/Skillelinje.tsx
@@ -0,0 +1,8 @@
+
+
+const Skillelinje = () => {
+    return (
+        <div className="h-1 bg-gray-200 my-4 rounded-lg w-full"></div>
+    )
+}
+export default Skillelinje
\ No newline at end of file
diff --git a/frontend/src/pages/feil.tsx b/frontend/src/pages/feil.tsx
index 2cbd365..f962b90 100644
--- a/frontend/src/pages/feil.tsx
+++ b/frontend/src/pages/feil.tsx
@@ -7,6 +7,7 @@ import { useState } from "react";
 import BildeOpplastning from "../components/BildeOpplastning";
 import Header from "../components/Header";
 import { useNavigate } from "react-router-dom";
+import Skillelinje from "../components/Skillelinje";
 
 export default function Feil() {
     const [tittel, setTittel] = useState("");
@@ -85,7 +86,9 @@ export default function Feil() {
                             description="Detaljert beskrivelse av problemet"
                             onChange={e => setBeskrivelse(e.target.value)}
                         />
+                        <Skillelinje/>
                         <BildeOpplastning/>
+                        <Skillelinje/>
                     </div>
                     <div className="w-1/2 flex flex-col gap-2 justify-center">
                         {status != 0 ? handleAlerts() : <></>}