From 937b3dac2d2d96c037088d6e8fe5bb76d2ce5d7b Mon Sep 17 00:00:00 2001
From: "Markus A. R. Johansen" <90006516+J0hans1@users.noreply.github.com>
Date: Thu, 3 Aug 2023 10:51:04 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Alternativ=20Layout=20for=20redi?=
 =?UTF-8?q?geringsskjema=20(#25)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 💄 Alternativ Layout for redigeringsskjema

* 💄 Gjort endringer på Modal layout og lagt til header på redigering

---------

Co-authored-by: Sid <93219711+SindreKjelsrud@users.noreply.github.com>
---
 frontend/src/components/FeilModal.tsx         |  2 +-
 .../src/components/FeilmeldingsInnhold.tsx    |  9 ++++---
 .../src/components/RedigeringsVerktoy.tsx     | 24 ++++++++++++-------
 3 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/FeilModal.tsx b/frontend/src/components/FeilModal.tsx
index 89069c5..e7eb4a3 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 p-5"
+            className="w-3/5 min-w-2/4 p-5"
             open={props.open}
             aria-label={" modal"}
             onClose={() => props.setOpen(false)}
diff --git a/frontend/src/components/FeilmeldingsInnhold.tsx b/frontend/src/components/FeilmeldingsInnhold.tsx
index caa3c6d..d48e7be 100644
--- a/frontend/src/components/FeilmeldingsInnhold.tsx
+++ b/frontend/src/components/FeilmeldingsInnhold.tsx
@@ -6,7 +6,6 @@ import { useState } from "react"
 import Skillelinje from "./Skillelinje"
 import axios from "axios"
 
-
 const FeilmeldingsInnhold = (props: FeilmeldingsInnholdInterface) => {
     const [kommentar, setKommentar] = useState("") 
     const [kommentarfelt, setKommentarfelt] = useState("")
@@ -33,8 +32,8 @@ const FeilmeldingsInnhold = (props: FeilmeldingsInnholdInterface) => {
     }
 
     return(
-        <div>
-            <div className="flex justify-between">
+        <>
+            <div className="flex justify-between ">
                 <FeilkortHeader
                     id={props.id}
                     tittel={props.tittel}
@@ -55,7 +54,7 @@ const FeilmeldingsInnhold = (props: FeilmeldingsInnholdInterface) => {
                         onClick={() => {
                             props.setVisModal(false)
                             props.setRedigeringsmodus(false)
-                        } }
+                        }}
                     >
                         Lukk
                     </Button>
@@ -74,7 +73,7 @@ const FeilmeldingsInnhold = (props: FeilmeldingsInnholdInterface) => {
                     tekst={kommentar}
                 />
             }
-        </div>
+      </>
     )
 }
 export default FeilmeldingsInnhold;
diff --git a/frontend/src/components/RedigeringsVerktoy.tsx b/frontend/src/components/RedigeringsVerktoy.tsx
index 087a887..f9ca506 100644
--- a/frontend/src/components/RedigeringsVerktoy.tsx
+++ b/frontend/src/components/RedigeringsVerktoy.tsx
@@ -42,8 +42,12 @@ const RedigeringsVerktoy = (props: redigeringsInterface) => {
     }
 
     return (
-        <div className="flex justify-between">
-            <div className="flex flex-col gap-4 w-1/2">
+        <div className="flex flex-col gap-12 items-center px-12">
+
+            <div className="flex flex-col gap-6 w-full">
+            <Heading className="" size="large">
+                Rediger feil
+            </Heading>
                 <TextField 
                     label="Tittel"
                     value={tittel}
@@ -65,14 +69,16 @@ const RedigeringsVerktoy = (props: redigeringsInterface) => {
                     <Radio value={2}>Feilen er fikset</Radio>
                 </RadioGroup>
                 <Skillelinje/>
-                <Heading size="xsmall">
-                    Haster det å fikse feilen?
-                </Heading>
-                <Switch checked={haster} onClick={() => setHaster(!haster)}>
-                    Feilen haster
-                </Switch>
+                <div>
+                    <Heading size="xsmall">
+                        Haster det å fikse feilen?
+                    </Heading>
+                    <Switch checked={haster} onClick={() => setHaster(!haster)}>
+                        Feilen haster
+                    </Switch>
+                </div>
             </div>
-            <div className="flex gap-4 items-start">
+            <div className="flex gap-4 items-start w-full">
                 <Button
                     variant="primary"
                     icon={<FloppydiskIcon/>}