💄 Gjør små styling forbedringer, forbedret UU ved å lage skillelinjer i forms
This commit is contained in:
		
							parent
							
								
									65c146fa87
								
							
						
					
					
						commit
						194bda6739
					
				
					 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 | ||||||
|  | @ -53,6 +54,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)}} | ||||||
|  | @ -62,6 +64,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
	
	 Markus Johansen
						Markus Johansen