Designiterasjoner med Martine: flytting og omgjøring av Alerts, fiksi…

…ng av marginer/paddings, osv.
navikt · Oct 5, 2023 · e5a59ff · e5a59ff
1 parent 1544dc1
commit e5a59ff
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 22 deletions.
diff --git a/client/src/personoversikt/Personoversikt.tsx b/client/src/personoversikt/Personoversikt.tsx
@@ -30,7 +30,7 @@ const Container = styled(Flex)`
 `
 
 const Content = styled.div`
-  padding: 0 1.4rem;
+  padding: 0 2rem;
   padding-top: 1rem;
   flex: 2;
   box-sizing: border-box;
@@ -58,8 +58,9 @@ const PersonoversiktContent: React.FC = () => {
   }
 
   const hotsakSaker = saksoversikt?.hotsakSaker.sort((a, b) => sorterKronologisk(a.mottattDato, b.mottattDato)) || []
-  const barnebrilleSaker =
-    saksoversikt?.barnebrilleSaker?.sort((a, b) => sorterKronologisk(a.sak.mottattDato, b.sak.mottattDato)) || []
+  const barnebrilleSaker = saksoversikt?.barnebrilleSaker?.sort((a, b) =>
+    sorterKronologisk(a.sak.mottattDato, b.sak.mottattDato)
+  )
   const hjelpemidler = hjelpemiddelArtikler?.sort((a, b) => sorterKronologisk(a.datoUtsendelse, b.datoUtsendelse)) || []
   const antallUtlånteHjelpemidler = hjelpemidler?.reduce((antall, artikkel) => {
     return (antall += artikkel.antall)
@@ -73,17 +74,8 @@ const PersonoversiktContent: React.FC = () => {
       ) : (
         <>
           <Personlinje loading={personInfoLoading} person={personInfo} />
-          <Alert size="small" variant="info" style={{ margin: '0.2rem' }}>
-            Her ser du saker på bruker i HOTSAK. Vi kan foreløpig ikke vise saker fra Infotrygd
-          </Alert>
-          {!saksoversikt?.barnebrilleSaker && (
-            <Alert size="small" variant="warning" style={{ margin: '0.2rem' }}>
-              Vi får ikke kontakt med baksystemet til direkteoppgjørsløsningen for barnebriller akkurat nå. Disse sakene
-              vises derfor ikke i listen over brukers saker under.
-            </Alert>
-          )}
           <SaksoversiktLinje
-            sakerCount={hotsakSaker.length + barnebrilleSaker.length}
+            sakerCount={hotsakSaker.length + (barnebrilleSaker?.length || 0)}
             hjelpemidlerCount={antallUtlånteHjelpemidler}
           />
           <Container>

diff --git a/client/src/personoversikt/Saksoversikt.tsx b/client/src/personoversikt/Saksoversikt.tsx
@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom'
 import styled from 'styled-components'
 
 import { FileIcon } from '@navikt/aksel-icons'
-import { Table } from '@navikt/ds-react'
+import { Alert, Table } from '@navikt/ds-react'
 
 import { DataCelle, EllipsisCell, TekstCell } from '../felleskomponenter/table/Celle'
 import { KolonneHeader } from '../felleskomponenter/table/KolonneHeader'
@@ -38,7 +38,7 @@ const ScrollWrapper = styled.div`
 
 interface SaksoversiktProps {
   hotsakSaker: Saksoversikt_Sak[]
-  barnebrilleSaker: Saksoversikt_Barnebrille_Sak[]
+  barnebrilleSaker?: Saksoversikt_Barnebrille_Sak[]
   henterSaker: boolean
 }
 
@@ -98,7 +98,7 @@ export const Saksoversikt: React.FC<SaksoversiktProps> = ({ hotsakSaker, barnebr
         const tittel = OppgaveStatusLabel.get(sak.status) || 'Ikke vurdert'
         const tittelWithIcon = (
           <>
-            <FileIcon title="a11y-title" fontSize="1rem" style={{ marginRight: '0.2rem' }} />
+            <FileIcon title="a11y-title" fontSize="1.2rem" style={{ marginRight: '0.2rem', marginBottom: '-0.2rem' }} />
             {tittel}
           </>
         )
@@ -157,7 +157,7 @@ export const Saksoversikt: React.FC<SaksoversiktProps> = ({ hotsakSaker, barnebr
   const saker: Saksoversikt_Sak_Felles_Type[] =
     hotsakSaker
       .map((a): Saksoversikt_Sak_Felles_Type => ({ sak: a, barnebrilleSak: undefined }))
-      .concat(barnebrilleSaker.map((a): Saksoversikt_Sak_Felles_Type => ({ sak: a.sak, barnebrilleSak: a })))
+      .concat(barnebrilleSaker?.map((a): Saksoversikt_Sak_Felles_Type => ({ sak: a.sak, barnebrilleSak: a })) || [])
       .sort((a, b) => sorterKronologisk(a.sak.mottattDato, b.sak.mottattDato)) || []
 
   const hasData = saker && saker.length > 0
@@ -169,6 +169,16 @@ export const Saksoversikt: React.FC<SaksoversiktProps> = ({ hotsakSaker, barnebr
         <Toast>Henter saksoversikt</Toast>
       ) : (
         <Container>
+          {!barnebrilleSaker && (
+            <Alert size="small" variant="warning" style={{ margin: '0.2rem 0 1rem 0', width: 'fit-content' }}>
+              Vi kan for øyeblikket ikke vise barnebrillesaker fra direkteoppgjørsløsningen for optikere.
+            </Alert>
+          )}
+          <div>
+            <Alert size="small" variant="info" inline={true} style={{ margin: '0 0 1rem 0' }}>
+              Her ser du saker for brukeren i HOTSAK. Vi kan foreløpig ikke vise saker fra Infotrygd.
+            </Alert>
+          </div>
           {hasData ? (
             <ScrollWrapper>
               <Table style={{ width: 'initial' }} zebraStripes size="small">

diff --git a/client/src/personoversikt/SaksoversiktLinje.tsx b/client/src/personoversikt/SaksoversiktLinje.tsx
@@ -14,10 +14,6 @@ const Container = styled.div`
   padding: 0 0 0 2rem;
   min-width: ${hotsakTotalMinWidth};
   white-space: nowrap;
-
-  > div:last-of-type {
-    margin-left: 1rem;
-  }
 `
 
 const TabList = styled.span`
@@ -31,7 +27,7 @@ interface SaksoversiktLinjeProps {
 
 export const SaksoversiktLinje: React.FC<SaksoversiktLinjeProps> = ({ sakerCount, hjelpemidlerCount }) => {
   return (
-    <Container>
+    <Container style={{ marginTop: '1rem' }}>
       <Flex>
         <TabList role="tablist">
           <TabLink to={`/personoversikt/saker`} title={`Saker (${sakerCount})`}>