Omskriv modaler i FagsakContainer (#1686)

* Skriv om HenterBehandling-modal til rent innholdselement * Flytt PåVentModal så den ikke ligger over tomt innhold * Fjern unødvendig fragment og løs styling med styled-components * Legg til litt luft
navikt · Mar 5, 2024 · 097b86d · 097b86d
1 parent 22f72d8
commit 097b86d
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 42 deletions.
diff --git a/src/frontend/komponenter/Fagsak/FagsakContainer.tsx b/src/frontend/komponenter/Fagsak/FagsakContainer.tsx
@@ -68,39 +68,32 @@ const FagsakContainer: React.FC = () => {
         return <HenterBehandling />;
     }
 
-    if (visVenteModal && ventegrunn && behandling?.status === RessursStatus.SUKSESS) {
-        return (
-            <PåVentModal
-                behandling={behandling.data}
-                ventegrunn={ventegrunn}
-                onClose={lukkVenteModal}
-            />
-        );
-    }
-
     switch (fagsak?.status) {
         case RessursStatus.SUKSESS: {
             switch (behandling?.status) {
                 case RessursStatus.SUKSESS:
                     return (
-                        !visVenteModal && (
-                            <>
-                                <Personlinje bruker={fagsak.data.bruker} fagsak={fagsak.data} />
-
-                                {ventegrunn && (
-                                    <FTAlertStripe
-                                        children={venteBeskjed(ventegrunn)}
-                                        variant="info"
-                                    />
-                                )}
-                                <FagsakContainerContent className={ventegrunn ? 'venter' : ''}>
-                                    <BehandlingContainer
-                                        fagsak={fagsak.data}
-                                        behandling={behandling.data}
-                                    />
-                                </FagsakContainerContent>
-                            </>
-                        )
+                        <>
+                            <Personlinje bruker={fagsak.data.bruker} fagsak={fagsak.data} />
+
+                            {ventegrunn && (
+                                <FTAlertStripe children={venteBeskjed(ventegrunn)} variant="info" />
+                            )}
+                            {visVenteModal && ventegrunn && (
+                                <PåVentModal
+                                    behandling={behandling.data}
+                                    ventegrunn={ventegrunn}
+                                    onClose={lukkVenteModal}
+                                />
+                            )}
+
+                            <FagsakContainerContent className={ventegrunn ? 'venter' : ''}>
+                                <BehandlingContainer
+                                    fagsak={fagsak.data}
+                                    behandling={behandling.data}
+                                />
+                            </FagsakContainerContent>
+                        </>
                     );
                 case RessursStatus.IKKE_TILGANG:
                     return (

diff --git a/src/frontend/komponenter/Felleskomponenter/Modal/HenterBehandling.tsx b/src/frontend/komponenter/Felleskomponenter/Modal/HenterBehandling.tsx
@@ -1,24 +1,34 @@
 import * as React from 'react';
 
-import { BodyShort, HStack, Loader, Modal } from '@navikt/ds-react';
+import styled from 'styled-components';
+
+import { BodyShort, Box, HStack, Heading, Loader, VStack } from '@navikt/ds-react';
+
+const BoxMedMargin = styled(Box)`
+    margin-top: 2rem;
+`;
 
 const HenterBehandling: React.FC = () => {
     return (
-        <Modal
-            header={{ heading: 'Henter behandling', size: 'medium', closeButton: false }}
-            portal={true}
-            width="small"
-        >
-            <Modal.Body>
-                <HStack justify="space-between">
-                    <div>
-                        <BodyShort>Henting av behandlingen tar litt tid.</BodyShort>
-                        <BodyShort>Vennligst vent!</BodyShort>
-                    </div>
+        <VStack justify="center" align="center">
+            <BoxMedMargin
+                background="surface-subtle"
+                padding="8"
+                borderRadius="large"
+                borderColor="border-default"
+            >
+                <Heading level="1" size="medium" spacing>
+                    Henter behandling
+                </Heading>
+
+                <BodyShort>Henting av behandlingen tar litt tid.</BodyShort>
+                <BodyShort spacing>Vennligst vent!</BodyShort>
+
+                <HStack justify="center">
                     <Loader size="large" title="venter..." transparent={false} variant="neutral" />
                 </HStack>
-            </Modal.Body>
-        </Modal>
+            </BoxMedMargin>
+        </VStack>
     );
 };