From 39c0de740208f4150ca6a2a711a936f2de6ac61f Mon Sep 17 00:00:00 2001
From: Hallvard Andreas Stark
 <57254397+hallvardastark@users.noreply.github.com>
Date: Wed, 2 Oct 2024 18:24:20 +0200
Subject: [PATCH] =?UTF-8?q?Endrer=20ikon=20og=20justererer=20alignment=20i?=
 =?UTF-8?q?=20inngangsvilk=C3=A5r=20(#6653)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Endrer ikon og justererer alignment i inngangsvilkår

* Fiks test

* Endrer ikon og justererer alignment flere steder
---
 .../VilkarresultatMedOverstyringHeader.tsx    | 46 +++++++++----------
 .../src/components/SoknadsfristVilkarForm.tsx | 10 ++--
 .../SoknadsfristVilkarHeader.spec.tsx         |  3 +-
 .../components/SoknadsfristVilkarHeader.tsx   | 25 +++++-----
 .../components/SoknadsfristVilkarDokument.tsx |  2 +-
 .../components/SoknadsfristVilkarHeader.tsx   | 38 ++++++++-------
 .../src/SykdomProsessIndex.tsx                | 40 ++++++++--------
 7 files changed, 79 insertions(+), 85 deletions(-)

diff --git a/packages/prosess-vilkar-overstyring/src/components/VilkarresultatMedOverstyringHeader.tsx b/packages/prosess-vilkar-overstyring/src/components/VilkarresultatMedOverstyringHeader.tsx
index 59e9a7b918..3e51de0914 100644
--- a/packages/prosess-vilkar-overstyring/src/components/VilkarresultatMedOverstyringHeader.tsx
+++ b/packages/prosess-vilkar-overstyring/src/components/VilkarresultatMedOverstyringHeader.tsx
@@ -1,18 +1,16 @@
-import avslattImage from '@fpsak-frontend/assets/images/avslaatt_hover.svg';
-import innvilgetImage from '@fpsak-frontend/assets/images/innvilget_hover.svg';
 import vilkarUtfallType from '@fpsak-frontend/kodeverk/src/vilkarUtfallType';
-import { FlexColumn, FlexContainer, FlexRow, Image, VerticalSpacer } from '@fpsak-frontend/shared-components';
+import {
+  hent847Text,
+  opptjeningMidlertidigInaktivKoder,
+} from '@fpsak-frontend/prosess-vilkar-opptjening-oms/src/components/VilkarField';
+import { FlexColumn, FlexContainer, FlexRow, VerticalSpacer } from '@fpsak-frontend/shared-components';
 import { Lovreferanse } from '@k9-sak-web/gui/shared/lovreferanse/Lovreferanse.js';
 import { Aksjonspunkt, Vilkarperiode } from '@k9-sak-web/types';
-import { KeyHorizontalIcon } from '@navikt/aksel-icons';
-import { Button, Detail, Heading, Label } from '@navikt/ds-react';
+import { CheckmarkCircleFillIcon, KeyHorizontalIcon, XMarkOctagonFillIcon } from '@navikt/aksel-icons';
+import { Button, Detail, Heading, HStack, Label } from '@navikt/ds-react';
 import { SetStateAction } from 'react';
 import { FormattedMessage } from 'react-intl';
 import styles from './vilkarresultatMedOverstyringForm.module.css';
-import {
-  hent847Text,
-  opptjeningMidlertidigInaktivKoder,
-} from '@fpsak-frontend/prosess-vilkar-opptjening-oms/src/components/VilkarField';
 
 const isOverridden = (aksjonspunktCodes: string[], aksjonspunktCode: string) =>
   aksjonspunktCodes.some(code => code === aksjonspunktCode);
@@ -78,25 +76,25 @@ const VilkarresultatMedOverstyringHeader = ({
   return (
     <>
       <FlexContainer>
-        <FlexRow>
+        <HStack gap="4">
           {!erOverstyrt && erVilkarOk !== undefined && (
-            <FlexColumn>
-              <Image className={styles.status} src={erVilkarOk ? innvilgetImage : avslattImage} />
-            </FlexColumn>
+            <>
+              {erVilkarOk ? (
+                <CheckmarkCircleFillIcon fontSize={24} style={{ color: 'var(--a-surface-success)' }} />
+              ) : (
+                <XMarkOctagonFillIcon fontSize={24} style={{ color: 'var(--a-surface-danger)' }} />
+              )}
+            </>
           )}
-          <FlexColumn>
-            <Heading size="small" level="2">
-              <FormattedMessage id={panelTittelKode} />
-            </Heading>
-          </FlexColumn>
+          <Heading size="small" level="2">
+            <FormattedMessage id={panelTittelKode} />
+          </Heading>
           {lovReferanse && (
-            <FlexColumn>
-              <Detail className={styles.vilkar}>
-                <Lovreferanse>{lovReferanse}</Lovreferanse>
-              </Detail>
-            </FlexColumn>
+            <Detail className={styles.vilkar}>
+              <Lovreferanse>{lovReferanse}</Lovreferanse>
+            </Detail>
           )}
-        </FlexRow>
+        </HStack>
         <FlexRow>
           <FlexColumn>
             <VerticalSpacer eightPx />
diff --git a/packages/prosess-vilkar-soknadsfrist-v2/src/components/SoknadsfristVilkarForm.tsx b/packages/prosess-vilkar-soknadsfrist-v2/src/components/SoknadsfristVilkarForm.tsx
index 3e08f19e87..3e13c7d119 100644
--- a/packages/prosess-vilkar-soknadsfrist-v2/src/components/SoknadsfristVilkarForm.tsx
+++ b/packages/prosess-vilkar-soknadsfrist-v2/src/components/SoknadsfristVilkarForm.tsx
@@ -4,7 +4,7 @@ import { decodeHtmlEntity, initializeDate } from '@fpsak-frontend/utils';
 import { vilkårStatus } from '@k9-sak-web/backend/k9sak/kodeverk/behandling/VilkårStatus.js';
 import { Periode, SubmitCallback } from '@k9-sak-web/types';
 import { ExclamationmarkTriangleFillIcon } from '@navikt/aksel-icons';
-import { Button, Label } from '@navikt/ds-react';
+import { Button, HStack, Label } from '@navikt/ds-react';
 import { Form } from '@navikt/ft-form-hooks';
 import { AksjonspunktDto, KravDokumentStatus } from '@navikt/k9-sak-typescript-client';
 import { Dayjs } from 'dayjs';
@@ -260,7 +260,7 @@ export const SoknadsfristVilkarForm = ({
                 </Label>
               </div>
               <div className="mt-4" />
-              <div className="flex gap-4">
+              <HStack gap="4">
                 <OverstyrBekreftKnappPanel
                   disabled={!formMethods.formState.isValid}
                   submitting={formMethods.formState.isSubmitting}
@@ -277,11 +277,11 @@ export const SoknadsfristVilkarForm = ({
                 >
                   Avbryt
                 </Button>
-              </div>
+              </HStack>
             </>
           )}
           {(harÅpentAksjonspunkt || editForm) && !erOverstyrt && (
-            <div className="flex gap-4">
+            <HStack gap="4">
               <Button
                 variant="primary"
                 size="small"
@@ -304,7 +304,7 @@ export const SoknadsfristVilkarForm = ({
                   Avbryt
                 </Button>
               )}
-            </div>
+            </HStack>
           )}
         </AksjonspunktBox>
       )}
diff --git a/packages/prosess-vilkar-soknadsfrist-v2/src/components/SoknadsfristVilkarHeader.spec.tsx b/packages/prosess-vilkar-soknadsfrist-v2/src/components/SoknadsfristVilkarHeader.spec.tsx
index 02976ea202..22502c817a 100644
--- a/packages/prosess-vilkar-soknadsfrist-v2/src/components/SoknadsfristVilkarHeader.spec.tsx
+++ b/packages/prosess-vilkar-soknadsfrist-v2/src/components/SoknadsfristVilkarHeader.spec.tsx
@@ -20,6 +20,7 @@ describe('<SoknadsfristVilkarHeader>', () => {
     );
 
     expect(screen.getByRole('heading', { name: 'Søknadsfrist' })).toBeInTheDocument();
-    expect(screen.getByText('§23')).toBeInTheDocument();
+    expect(screen.getByText('§')).toBeInTheDocument();
+    expect(screen.getByText('23')).toBeInTheDocument();
   });
 });
diff --git a/packages/prosess-vilkar-soknadsfrist-v2/src/components/SoknadsfristVilkarHeader.tsx b/packages/prosess-vilkar-soknadsfrist-v2/src/components/SoknadsfristVilkarHeader.tsx
index 0b2b740818..470df42579 100644
--- a/packages/prosess-vilkar-soknadsfrist-v2/src/components/SoknadsfristVilkarHeader.tsx
+++ b/packages/prosess-vilkar-soknadsfrist-v2/src/components/SoknadsfristVilkarHeader.tsx
@@ -1,6 +1,7 @@
 import { vilkårStatus } from '@k9-sak-web/backend/k9sak/kodeverk/behandling/VilkårStatus.js';
+import { Lovreferanse } from '@k9-sak-web/gui/shared/lovreferanse/Lovreferanse.js';
 import { CheckmarkCircleFillIcon, KeyHorizontalIcon, XMarkOctagonFillIcon } from '@navikt/aksel-icons';
-import { Button, Detail, Heading, Label } from '@navikt/ds-react';
+import { Button, Detail, Heading, HStack, Label } from '@navikt/ds-react';
 import { AksjonspunktDto } from '@navikt/k9-sak-typescript-client';
 import { SetStateAction } from 'react';
 import styles from './SoknadsfristVilkarForm.module.css';
@@ -60,27 +61,25 @@ const SoknadsfristVilkarHeader = ({
   return (
     <>
       <>
-        <div className="flex">
+        <HStack gap="4">
           {!erOverstyrt && originalErVilkarOk !== undefined && (
-            <div className="px-2">
+            <>
               {originalErVilkarOk ? (
                 <CheckmarkCircleFillIcon fontSize={24} style={{ color: 'var(--a-surface-success)' }} />
               ) : (
                 <XMarkOctagonFillIcon fontSize={24} style={{ color: 'var(--a-surface-danger)' }} />
               )}
-            </div>
+            </>
           )}
-          <div className="px-2">
-            <Heading size="small" level="2">
-              {panelTittelKode}
-            </Heading>
-          </div>
+          <Heading size="small" level="2">
+            {panelTittelKode}
+          </Heading>
           {lovReferanse && (
-            <div className="px-2">
-              <Detail className={styles.vilkar}>{lovReferanse}</Detail>
-            </div>
+            <Detail className={styles.vilkar}>
+              <Lovreferanse>{lovReferanse}</Lovreferanse>
+            </Detail>
           )}
-        </div>
+        </HStack>
         <div className="flex">
           <div className="px-2">
             <div className="mt-2" />
diff --git a/packages/prosess-vilkar-soknadsfrist/src/components/SoknadsfristVilkarDokument.tsx b/packages/prosess-vilkar-soknadsfrist/src/components/SoknadsfristVilkarDokument.tsx
index f38a003e49..787400f8e3 100644
--- a/packages/prosess-vilkar-soknadsfrist/src/components/SoknadsfristVilkarDokument.tsx
+++ b/packages/prosess-vilkar-soknadsfrist/src/components/SoknadsfristVilkarDokument.tsx
@@ -23,7 +23,7 @@ import { DokumentStatus } from '@k9-sak-web/types';
 import { BodyShort } from '@navikt/ds-react';
 import { AssessedBy } from '@navikt/ft-plattform-komponenter';
 import moment from 'moment';
-import React, { useCallback, useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 
 import { formatDate } from '../utils';
diff --git a/packages/prosess-vilkar-soknadsfrist/src/components/SoknadsfristVilkarHeader.tsx b/packages/prosess-vilkar-soknadsfrist/src/components/SoknadsfristVilkarHeader.tsx
index a319a2bbd7..55fb70f267 100644
--- a/packages/prosess-vilkar-soknadsfrist/src/components/SoknadsfristVilkarHeader.tsx
+++ b/packages/prosess-vilkar-soknadsfrist/src/components/SoknadsfristVilkarHeader.tsx
@@ -1,11 +1,9 @@
-import avslattImage from '@fpsak-frontend/assets/images/avslaatt_hover.svg';
-import innvilgetImage from '@fpsak-frontend/assets/images/innvilget_hover.svg';
 import vilkarUtfallType from '@fpsak-frontend/kodeverk/src/vilkarUtfallType';
-import { FlexColumn, FlexContainer, FlexRow, Image, VerticalSpacer } from '@fpsak-frontend/shared-components';
+import { FlexColumn, FlexContainer, FlexRow, VerticalSpacer } from '@fpsak-frontend/shared-components';
 import { Lovreferanse } from '@k9-sak-web/gui/shared/lovreferanse/Lovreferanse.js';
 import { Aksjonspunkt } from '@k9-sak-web/types';
-import { KeyHorizontalIcon } from '@navikt/aksel-icons';
-import { Button, Detail, Heading, Label } from '@navikt/ds-react';
+import { CheckmarkCircleFillIcon, KeyHorizontalIcon, XMarkOctagonFillIcon } from '@navikt/aksel-icons';
+import { Button, Detail, Heading, HStack, Label } from '@navikt/ds-react';
 import { SetStateAction } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
@@ -63,25 +61,25 @@ const SoknadsfristVilkarHeader = ({
   return (
     <>
       <FlexContainer>
-        <FlexRow>
+        <HStack gap="4">
           {!erOverstyrt && originalErVilkarOk !== undefined && (
-            <FlexColumn>
-              <Image className={styles.status} src={originalErVilkarOk ? innvilgetImage : avslattImage} />
-            </FlexColumn>
+            <>
+              {originalErVilkarOk ? (
+                <CheckmarkCircleFillIcon fontSize={24} style={{ color: 'var(--a-surface-success)' }} />
+              ) : (
+                <XMarkOctagonFillIcon fontSize={24} style={{ color: 'var(--a-surface-danger)' }} />
+              )}
+            </>
           )}
-          <FlexColumn>
-            <Heading size="small" level="2">
-              <FormattedMessage id={panelTittelKode} />
-            </Heading>
-          </FlexColumn>
+          <Heading size="small" level="2">
+            <FormattedMessage id={panelTittelKode} />
+          </Heading>
           {lovReferanse && (
-            <FlexColumn>
-              <Detail className={styles.vilkar}>
-                <Lovreferanse>{lovReferanse}</Lovreferanse>
-              </Detail>
-            </FlexColumn>
+            <Detail className={styles.vilkar}>
+              <Lovreferanse>{lovReferanse}</Lovreferanse>
+            </Detail>
           )}
-        </FlexRow>
+        </HStack>
         <FlexRow>
           <FlexColumn>
             <VerticalSpacer eightPx />
diff --git a/packages/prosess-vilkar-sykdom/src/SykdomProsessIndex.tsx b/packages/prosess-vilkar-sykdom/src/SykdomProsessIndex.tsx
index 60c078e7fe..3ca074b897 100644
--- a/packages/prosess-vilkar-sykdom/src/SykdomProsessIndex.tsx
+++ b/packages/prosess-vilkar-sykdom/src/SykdomProsessIndex.tsx
@@ -1,21 +1,19 @@
-import avslattImage from '@fpsak-frontend/assets/images/avslaatt_hover.svg';
-import innvilgetImage from '@fpsak-frontend/assets/images/innvilget_hover.svg';
 import vilkarUtfallType from '@fpsak-frontend/kodeverk/src/vilkarUtfallType';
 import { FlexColumn, FlexContainer } from '@fpsak-frontend/shared-components/index';
-import Image from '@fpsak-frontend/shared-components/src/Image';
 import VerticalSpacer from '@fpsak-frontend/shared-components/src/VerticalSpacer';
 import FlexRow from '@fpsak-frontend/shared-components/src/flexGrid/FlexRow';
 import { dateFormat } from '@fpsak-frontend/utils';
+import { Lovreferanse } from '@k9-sak-web/gui/shared/lovreferanse/Lovreferanse.js';
 import Vilkarperiode from '@k9-sak-web/types/src/vilkarperiode';
-import { Detail, Heading, Label } from '@navikt/ds-react';
+import { CheckmarkCircleFillIcon, XMarkOctagonFillIcon } from '@navikt/aksel-icons';
+import { Detail, Heading, HStack, Label } from '@navikt/ds-react';
 import { SideMenu } from '@navikt/ft-plattform-komponenter';
 import classNames from 'classnames/bind';
 import isEqual from 'lodash/isEqual';
 import React from 'react';
-import { FormattedMessage, RawIntlProvider, createIntl, createIntlCache } from 'react-intl';
+import { createIntl, createIntlCache, FormattedMessage, RawIntlProvider } from 'react-intl';
 import messages from '../i18n/nb_NO.json';
 import styles from './sykdomProsessIndex.module.css';
-import { Lovreferanse } from '@k9-sak-web/gui/shared/lovreferanse/Lovreferanse.js';
 
 const cx = classNames.bind(styles);
 
@@ -94,23 +92,23 @@ const SykdomProsessIndex = ({ perioder, panelTittelKode, lovReferanse }: SykdomP
         )}
         <div className={styles.contentContainer}>
           <FlexContainer>
-            <FlexRow>
+            <HStack gap="4">
               {erVilkarOk !== undefined && (
-                <FlexColumn>
-                  <Image className={styles.status} src={erVilkarOk ? innvilgetImage : avslattImage} />
-                </FlexColumn>
+                <>
+                  {erVilkarOk ? (
+                    <CheckmarkCircleFillIcon fontSize={24} style={{ color: 'var(--a-surface-success)' }} />
+                  ) : (
+                    <XMarkOctagonFillIcon fontSize={24} style={{ color: 'var(--a-surface-danger)' }} />
+                  )}
+                </>
               )}
-              <FlexColumn>
-                <Heading size="small" level="2">
-                  <FormattedMessage id={panelTittelKode} />
-                </Heading>
-              </FlexColumn>
-              <FlexColumn>
-                <Detail className={styles.vilkar}>
-                  <Lovreferanse>{lovReferanseTekst}</Lovreferanse>
-                </Detail>
-              </FlexColumn>
-            </FlexRow>
+              <Heading size="small" level="2">
+                <FormattedMessage id={panelTittelKode} />
+              </Heading>
+              <Detail className={styles.vilkar}>
+                <Lovreferanse>{lovReferanseTekst}</Lovreferanse>
+              </Detail>
+            </HStack>
             <FlexRow>
               <FlexColumn>
                 <VerticalSpacer eightPx />