💄 Gjør små styling forbedringer, forbedret UU ved å lage skillelinjer i forms
This commit is contained in:
parent
d00c38f93e
commit
318123c9c7
5 changed files with 20 additions and 3 deletions
|
@ -1,5 +1,5 @@
|
||||||
import { FileImageIcon, UploadIcon } from "@navikt/aksel-icons"
|
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 = () => {
|
const BildeOpplastning = () => {
|
||||||
return(
|
return(
|
||||||
<div className="flex gap-2 flex-col">
|
<div className="flex gap-2 flex-col">
|
||||||
|
<Heading size="xsmall">
|
||||||
|
Skjermbilder
|
||||||
|
</Heading>
|
||||||
<div className="
|
<div className="
|
||||||
h-48 p-5 bg-bg-subtle hover:bg-surface-selected border-2 border-blue-500
|
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
|
rounded-lg border-dashed flex flex-col items-center justify-center text-center gap-2
|
||||||
|
|
|
@ -11,7 +11,7 @@ interface modalInterface {
|
||||||
const FeilModal = (props: modalInterface) => {
|
const FeilModal = (props: modalInterface) => {
|
||||||
return(
|
return(
|
||||||
<Modal
|
<Modal
|
||||||
className="w-3/5"
|
className="w-3/5 p-5"
|
||||||
open={props.open}
|
open={props.open}
|
||||||
aria-label={" modal"}
|
aria-label={" modal"}
|
||||||
onClose={() => props.setOpen(false)}
|
onClose={() => props.setOpen(false)}
|
||||||
|
|
|
@ -3,6 +3,7 @@ import { TextField, Textarea, RadioGroup, Radio, Button, Switch } from "@navikt/
|
||||||
import { useState } from "react"
|
import { useState } from "react"
|
||||||
import { FeilmeldingsInnholdInterface } from "../interface"
|
import { FeilmeldingsInnholdInterface } from "../interface"
|
||||||
import axios from "axios"
|
import axios from "axios"
|
||||||
|
import Skillelinje from "./Skillelinje"
|
||||||
|
|
||||||
interface redigeringsInterface extends FeilmeldingsInnholdInterface {
|
interface redigeringsInterface extends FeilmeldingsInnholdInterface {
|
||||||
reset: () => void
|
reset: () => void
|
||||||
|
@ -55,6 +56,7 @@ const RedigeringsVerktoy = (props: redigeringsInterface) => {
|
||||||
value={beskrivelse}
|
value={beskrivelse}
|
||||||
onChange={e => setBeskrivelse(e.target.value)}
|
onChange={e => setBeskrivelse(e.target.value)}
|
||||||
/>
|
/>
|
||||||
|
<Skillelinje/>
|
||||||
<RadioGroup
|
<RadioGroup
|
||||||
legend="Velg arbeidsstatus for feil"
|
legend="Velg arbeidsstatus for feil"
|
||||||
onChange={(arbeidsstatus: number) => {setArbeidsstatus(arbeidsstatus)}}
|
onChange={(arbeidsstatus: number) => {setArbeidsstatus(arbeidsstatus)}}
|
||||||
|
@ -64,6 +66,7 @@ const RedigeringsVerktoy = (props: redigeringsInterface) => {
|
||||||
<Radio value={1}>Feilen jobbes med</Radio>
|
<Radio value={1}>Feilen jobbes med</Radio>
|
||||||
<Radio value={2}>Feilen er fikset</Radio>
|
<Radio value={2}>Feilen er fikset</Radio>
|
||||||
</RadioGroup>
|
</RadioGroup>
|
||||||
|
<Skillelinje/>
|
||||||
<Switch checked={haster} onClick={() => setHaster(!haster)}>
|
<Switch checked={haster} onClick={() => setHaster(!haster)}>
|
||||||
Saken haster
|
Saken haster
|
||||||
</Switch>
|
</Switch>
|
||||||
|
|
8
frontend/src/components/Skillelinje.tsx
Normal file
8
frontend/src/components/Skillelinje.tsx
Normal file
|
@ -0,0 +1,8 @@
|
||||||
|
|
||||||
|
|
||||||
|
const Skillelinje = () => {
|
||||||
|
return (
|
||||||
|
<div className="h-1 bg-gray-200 my-4 rounded-lg w-full"></div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default Skillelinje
|
|
@ -7,6 +7,7 @@ import { useState } from "react";
|
||||||
import BildeOpplastning from "../components/BildeOpplastning";
|
import BildeOpplastning from "../components/BildeOpplastning";
|
||||||
import Header from "../components/Header";
|
import Header from "../components/Header";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import Skillelinje from "../components/Skillelinje";
|
||||||
|
|
||||||
export default function Feil() {
|
export default function Feil() {
|
||||||
const [tittel, setTittel] = useState("");
|
const [tittel, setTittel] = useState("");
|
||||||
|
@ -85,7 +86,9 @@ export default function Feil() {
|
||||||
description="Detaljert beskrivelse av problemet"
|
description="Detaljert beskrivelse av problemet"
|
||||||
onChange={e => setBeskrivelse(e.target.value)}
|
onChange={e => setBeskrivelse(e.target.value)}
|
||||||
/>
|
/>
|
||||||
|
<Skillelinje/>
|
||||||
<BildeOpplastning/>
|
<BildeOpplastning/>
|
||||||
|
<Skillelinje/>
|
||||||
</div>
|
</div>
|
||||||
<div className="w-1/2 flex flex-col gap-2 justify-center">
|
<div className="w-1/2 flex flex-col gap-2 justify-center">
|
||||||
{status != 0 ? handleAlerts() : <></>}
|
{status != 0 ? handleAlerts() : <></>}
|
||||||
|
|
Reference in a new issue