CSS-fix

navikt · Feb 16, 2024 · d829bc3 · d829bc3
1 parent 41ff9cd
commit d829bc3
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 16 deletions.
diff --git a/apps/dolly-frontend/src/main/js/src/pages/tenorSoek/SoekForm.tsx b/apps/dolly-frontend/src/main/js/src/pages/tenorSoek/SoekForm.tsx
@@ -29,7 +29,7 @@ const SoekefeltWrapper = styled.div`
 `
 
 const Soekefelt = styled.div`
-	padding: 20px 15px 5px 15px;
+	padding: 20px 15px;
 `
 
 export const SoekForm = ({ request, setRequest, mutate }) => {

diff --git a/apps/dolly-frontend/src/main/js/src/pages/tenorSoek/resultatVisning/PersonVisning.tsx b/apps/dolly-frontend/src/main/js/src/pages/tenorSoek/resultatVisning/PersonVisning.tsx
@@ -30,7 +30,7 @@ export const PersonVisning = ({ person, loading, error }) => {
 	// TODO maa kanskje ta med flere personer hvis lista er lengre?
 
 	return (
-		<Box background="surface-default" padding="3">
+		<Box background="surface-default" padding="3" borderRadius="medium">
 			<NavnHeader>{personData?.visningnavn}</NavnHeader>
 			<FolkeregisteretVisning data={personData} />
 			<EnhetsregisteretForetaksregisteretVisning

diff --git a/apps/dolly-frontend/src/main/js/src/pages/tenorSoek/resultatVisning/TreffListe.tsx b/apps/dolly-frontend/src/main/js/src/pages/tenorSoek/resultatVisning/TreffListe.tsx
@@ -3,6 +3,17 @@ import React, { useEffect, useState } from 'react'
 import { useTenorIdent } from '@/utils/hooks/useTenorSoek'
 import { PersonVisning } from '@/pages/tenorSoek/resultatVisning/PersonVisning'
 import Loading from '@/components/ui/loading/Loading'
+import styled from 'styled-components'
+
+const PersonNavn = styled.h3`
+	word-break: break-word;
+	hyphens: auto;
+	margin: 5px 0;
+`
+
+const PersonIdent = styled.p`
+	margin: 5px 0 15px 0;
+`
 export const TreffListe = ({ response, loading, error }: any) => {
 	if (loading) {
 		return <Loading label="Laster treff ..." />
@@ -19,31 +30,27 @@ export const TreffListe = ({ response, loading, error }: any) => {
 	if (!response) {
 		return null
 	}
-	// console.log('response: ', response?.data?.personer) //TODO - SLETT MEG
 
 	const [valgtPerson, setValgtPerson] = useState(null)
+
 	const {
 		person: valgtPersonData,
 		loading: valgtPersonLoading,
 		error: valgtPersonError,
 	} = useTenorIdent(valgtPerson?.identifikator)
 
-	// console.log('valgtPerson: ', valgtPerson) //TODO - SLETT MEG
-	// console.log('person: ', valgtPersonData) //TODO - SLETT MEG
-
 	useEffect(() => {
 		setValgtPerson(response?.data?.personer?.[0] || null)
 	}, [response])
 
 	const antallTreff = response?.data?.treff
+
 	return (
 		<div className="flexbox--flex-wrap">
 			<div style={{ width: '30%' }}>
 				<h2>{antallTreff} treff</h2>
-				{/*<p>{response}</p>*/}
 				<VStack gap="4">
 					{response?.data?.personer?.map((person: any) => (
-						// <Box key={person.identifikator} padding="2" border="1" borderColor="navds-color-gray-20">
 						<Box
 							key={person.identifikator}
 							padding="2"
@@ -52,15 +59,14 @@ export const TreffListe = ({ response, loading, error }: any) => {
 									? 'surface-alt-3-moderate'
 									: 'surface-alt-3-subtle'
 							}
-							// background={'surface-alt-3-subtle'}
+							borderRadius="medium"
 							onClick={() => setValgtPerson(person)}
 							style={{ cursor: 'pointer' }}
 						>
-							{/*<h3>{person.visningnavn}</h3>*/}
-							<h3 style={{ wordBreak: 'break-word', hyphens: 'auto' }}>
+							<PersonNavn>
 								{person.fornavn} {person.etternavn}
-							</h3>
-							<p>{person.identifikator}</p>
+							</PersonNavn>
+							<PersonIdent>{person.identifikator}</PersonIdent>
 							{person.tenorRelasjoner?.map((relasjon: any, idx: number) => (
 								<Tag
 									size="small"
@@ -82,9 +88,6 @@ export const TreffListe = ({ response, loading, error }: any) => {
 						loading={valgtPersonLoading}
 						error={valgtPersonError}
 					/>
-					// <div className="dolly-panel-content">
-
-					// </div>
 				)}
 			</div>
 		</div>