Justere layout og legge inn valideringsmeldinger

Author: frodehansen2

apps/ungdomsytelse-veileder/src/components/deltaker-kort/DeltakerKort.tsx

@@ -24,7 +24,11 @@ const DeltakerKort = ({
     const alder = dayjs().diff(dayjs(fødselsdato), 'year');
 
     return (
-        <Box.New className="rounded-md p-4 items-center w-full" background="accent-moderateA">
+        <Box.New
+            className="rounded-md p-4 items-center w-full"
+            background="info-soft"
+            borderColor="info-subtle"
+            borderWidth="2">
             <HGrid columns="4.5rem auto 2rem" align="start" gap="4">
                 <PersonNøytral width="4.5rem" height="4.5rem" />
                 <VStack gap="2" flexGrow="2">

apps/ungdomsytelse-veileder/src/components/section-container/SectionContainer.tsx

@@ -13,7 +13,7 @@ const SectionContainer = ({ header, children }: Props) => {
                     {header}
                 </Heading>
             </HGrid>
-            <BoxNew background="info-soft" padding="5" borderRadius="medium">
+            <BoxNew background="info-moderate" padding="5" borderRadius="medium">
                 <VStack gap="4">{children}</VStack>
             </BoxNew>
         </VStack>

apps/ungdomsytelse-veileder/src/forms/endre-periode-form/EndrePeriodeForm.tsx

@@ -6,7 +6,7 @@ import {
     YesOrNo,
 } from '@navikt/sif-common-formik-ds';
 import { dateToISODate, getDateToday, ISODateToDate } from '@navikt/sif-common-utils';
-import { getRequiredFieldValidator } from '@navikt/sif-validation';
+import { getCheckedValidator, getRequiredFieldValidator } from '@navikt/sif-validation';
 import { Deltakelse, Deltaker, formaterNavn } from '@navikt/ung-common';
 import { max } from 'date-fns';
 import { useIntl } from 'react-intl';
@@ -156,7 +156,7 @@ const EndrePeriodeForm = ({ variant, deltakelse, deltaker, onCancel, onDeltakels
                                     {variant === EndrePeriodeVariant.startdato && startdatoMinMax !== 'fomFørTom' ? (
                                         <DatePicker
                                             name={FieldNames.fom}
-                                            label={`Oppgi startdato:`}
+                                            label="Oppgi startdato:"
                                             minDate={startdatoMinMax.from}
                                             maxDate={startdatoMinMax.to}
                                             defaultMonth={deltakelse.fraOgMed}
@@ -165,7 +165,7 @@ const EndrePeriodeForm = ({ variant, deltakelse, deltaker, onCancel, onDeltakels
                                     ) : (
                                         <DatePicker
                                             name={FieldNames.tom}
-                                            label={`Oppgi sluttdato:`}
+                                            label="Oppgi sluttdato:"
                                             minDate={sluttdatoMinMax.from}
                                             maxDate={sluttdatoMinMax.to}
                                             defaultMonth={deltakelse.tilOgMed}
@@ -182,8 +182,8 @@ const EndrePeriodeForm = ({ variant, deltakelse, deltaker, onCancel, onDeltakels
                                     {deltakerInformertBesvart && datoErEndret ? (
                                         <ConfirmationCheckbox
                                             name={FieldNames.bekrefterEndring}
-                                            label={`Dette er riktig`}
-                                            validate={getRequiredFieldValidator()}>
+                                            label="Dette er riktig"
+                                            validate={getCheckedValidator()}>
                                             {variant === EndrePeriodeVariant.startdato && fomDato ? (
                                                 <BekreftEndretStartdatoInfo
                                                     deltakernavn={deltakernavn}

apps/ungdomsytelse-veileder/src/forms/endre-periode-form/endrePeriodeFormMessages.ts

@@ -0,0 +1,21 @@
+const nb = {
+    'endrePeriodeForm.fom.dateHasNoValue': 'Startdato har ingen verdi',
+    'endrePeriodeForm.fom.dateHasInvalidFormat':
+        'Startdatoen må oppgis i et gyldig format. Gyldig format er dd.mm.åååå.',
+    'endrePeriodeForm.fom.dateIsAfterMax': 'Startdatoen kan ikke være etter {max}.',
+    'endrePeriodeForm.fom.dateIsBeforeMin': 'Startdatoen kan ikke være før {min}.',
+
+    'endrePeriodeForm.tom.dateHasNoValue': 'Sluttdatoen har ingen verdi',
+    'endrePeriodeForm.tom.dateHasInvalidFormat':
+        'Sluttdatoen må oppgis i et gyldig format. Gyldig format er dd.mm.åååå.',
+    'endrePeriodeForm.tom.dateIsAfterMax': 'Sluttdatoen kan ikke være etter {max}.',
+    'endrePeriodeForm.tom.dateIsBeforeMin': 'Sluttdatoen kan ikke være før {min}.',
+
+    'endrePeriodeForm.deltakerErInformert.noValue': 'Du må svare på om deltaker er informert',
+    'endrePeriodeForm.bekrefterEndring.notChecked': 'Du må krysse av for at du bekrefter endringen',
+};
+
+export const endrePeriodeFormMessages = {
+    nb,
+    nn: nb,
+};

apps/ungdomsytelse-veileder/src/forms/finn-deltaker-form/FinnDeltakerForm.tsx

@@ -79,7 +79,7 @@ const FinnDeltakerForm = ({ onDeltakerFetched, onDeltakelseRegistrert }: Props)
 
     return (
         <BoxNew
-            background="accent-soft"
+            background="info-moderate"
             borderRadius="medium"
             shadow="dialog"
             className="p-8 pt-8 pb-14 items-center w-full"

apps/ungdomsytelse-veileder/src/forms/meld-inn-deltaker-form/meldInnDeltakerMessages.ts

@@ -4,7 +4,7 @@ const nb = {
         'Du må oppgi startdatoen i et gyldig format. Gyldig format er dd.mm.åååå.',
     'meldInnDeltakerForm.startDato.dateIsAfterMax': 'Startdatoen kan ikke være etter {max}.',
     'meldInnDeltakerForm.startDato.dateIsBeforeMin': 'Startdatoen kan ikke være før {min}.',
-    'meldInnDeltakerForm.bekreftRegistrering.notChecked': 'Du må bekrefte deltakselsen',
+    'meldInnDeltakerForm.bekreftRegistrering.notChecked': 'Du må bekrefte deltakelsen',
 };
 export const meldInnDeltakerFormMessages = {
     nb,

apps/ungdomsytelse-veileder/src/i18n/index.ts

@@ -1,7 +1,9 @@
+import { endrePeriodeFormMessages } from '../forms/endre-periode-form/endrePeriodeFormMessages';
 import { meldInnDeltakerFormMessages } from '../forms/meld-inn-deltaker-form/meldInnDeltakerMessages';
 
 const nb = {
     ...meldInnDeltakerFormMessages.nb,
+    ...endrePeriodeFormMessages.nb,
 };
 
 export const appMessages = {

apps/ungdomsytelse-veileder/src/pages/deltaker-page/DeltakerPageContent.tsx

@@ -42,7 +42,7 @@ const DeltakerPageContent = ({ deltaker, deltakelser = [] }: Props) => {
             <VStack gap="10">
                 {deltakelse.harSøkt === false ? (
                     <HStack>
-                        <Alert variant="info">Søknad om ungdomsytelse er ikke mottatt fra deltaker</Alert>
+                        <Alert variant="warning">Søknad om ungdomsytelse er ikke mottatt fra deltaker</Alert>
                     </HStack>
                 ) : null}
 

apps/ungdomsytelse-veileder/src/pages/deltaker-page/parts/DeltakelsePeriodeInfo.tsx

@@ -94,7 +94,7 @@ interface DatoBoksProps {
 
 const DatoBoks = ({ tittel, dato, endre, kanIkkeEndreTekst }: DatoBoksProps) => {
     return (
-        <BoxNew background="info-soft" padding="5" borderRadius="medium">
+        <BoxNew background="info-moderate" padding="5" borderRadius="medium">
             <VStack gap="1">
                 <Heading level="3" size="xsmall">
                     <BodyShort as="span">{tittel}</BodyShort>