💄 Alternativ Layout for redigeringsskjema (#25)

* 💄 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>
This commit is contained in:
Markus A. R. Johansen 2023-08-03 10:51:04 +02:00 committed by GitHub
parent a399eb31d1
commit 937b3dac2d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 20 additions and 15 deletions

View file

@ -11,7 +11,7 @@ interface modalInterface {
const FeilModal = (props: modalInterface) => { const FeilModal = (props: modalInterface) => {
return( return(
<Modal <Modal
className="w-3/5 p-5" className="w-3/5 min-w-2/4 p-5"
open={props.open} open={props.open}
aria-label={" modal"} aria-label={" modal"}
onClose={() => props.setOpen(false)} onClose={() => props.setOpen(false)}

View file

@ -6,7 +6,6 @@ import { useState } from "react"
import Skillelinje from "./Skillelinje" import Skillelinje from "./Skillelinje"
import axios from "axios" import axios from "axios"
const FeilmeldingsInnhold = (props: FeilmeldingsInnholdInterface) => { const FeilmeldingsInnhold = (props: FeilmeldingsInnholdInterface) => {
const [kommentar, setKommentar] = useState("") const [kommentar, setKommentar] = useState("")
const [kommentarfelt, setKommentarfelt] = useState("") const [kommentarfelt, setKommentarfelt] = useState("")
@ -33,8 +32,8 @@ const FeilmeldingsInnhold = (props: FeilmeldingsInnholdInterface) => {
} }
return( return(
<div> <>
<div className="flex justify-between"> <div className="flex justify-between ">
<FeilkortHeader <FeilkortHeader
id={props.id} id={props.id}
tittel={props.tittel} tittel={props.tittel}
@ -55,7 +54,7 @@ const FeilmeldingsInnhold = (props: FeilmeldingsInnholdInterface) => {
onClick={() => { onClick={() => {
props.setVisModal(false) props.setVisModal(false)
props.setRedigeringsmodus(false) props.setRedigeringsmodus(false)
} } }}
> >
Lukk Lukk
</Button> </Button>
@ -74,7 +73,7 @@ const FeilmeldingsInnhold = (props: FeilmeldingsInnholdInterface) => {
tekst={kommentar} tekst={kommentar}
/> />
} }
</div> </>
) )
} }
export default FeilmeldingsInnhold; export default FeilmeldingsInnhold;

View file

@ -42,8 +42,12 @@ const RedigeringsVerktoy = (props: redigeringsInterface) => {
} }
return ( return (
<div className="flex justify-between"> <div className="flex flex-col gap-12 items-center px-12">
<div className="flex flex-col gap-4 w-1/2">
<div className="flex flex-col gap-6 w-full">
<Heading className="" size="large">
Rediger feil
</Heading>
<TextField <TextField
label="Tittel" label="Tittel"
value={tittel} value={tittel}
@ -65,14 +69,16 @@ const RedigeringsVerktoy = (props: redigeringsInterface) => {
<Radio value={2}>Feilen er fikset</Radio> <Radio value={2}>Feilen er fikset</Radio>
</RadioGroup> </RadioGroup>
<Skillelinje/> <Skillelinje/>
<Heading size="xsmall"> <div>
Haster det å fikse feilen? <Heading size="xsmall">
</Heading> Haster det å fikse feilen?
<Switch checked={haster} onClick={() => setHaster(!haster)}> </Heading>
Feilen haster <Switch checked={haster} onClick={() => setHaster(!haster)}>
</Switch> Feilen haster
</Switch>
</div>
</div> </div>
<div className="flex gap-4 items-start"> <div className="flex gap-4 items-start w-full">
<Button <Button
variant="primary" variant="primary"
icon={<FloppydiskIcon/>} icon={<FloppydiskIcon/>}