CSS justeringer uttak (#6925)

navikt · Dec 13, 2024 · e3932b2 · e3932b2
1 parent 412fdd7
commit e3932b2
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 16 deletions.
diff --git a/packages/prosess-uttak/src/ui/components/uttak-detaljer/GraderingMotArbeidstidDetaljer.tsx b/packages/prosess-uttak/src/ui/components/uttak-detaljer/GraderingMotArbeidstidDetaljer.tsx
@@ -49,7 +49,7 @@ const GraderingMotArbeidstidDetaljer: FC<ownProps> = ({
 
           return (
             <Box key={`${arbeidsgiverIdentifikator}_avkorting_arbeidstid`}>
-              <BodyShort size="small">
+              <BodyShort size="small" className="text-text-subtle font-semibold leading-6">
                 {arbeidstype}{' '}
                 {erNyInntekt && (
                   <Tag size="small" variant="info">
@@ -58,14 +58,20 @@ const GraderingMotArbeidstidDetaljer: FC<ownProps> = ({
                 )}
               </BodyShort>
               {arbeidsforhold.type !== Arbeidstype.FRILANSER && (
-                <BodyShort size="small" weight="semibold">
+                <BodyShort size="small" weight="semibold" className="leading-6">
                   {arbeidsforholdData?.navn || 'Mangler navn'} (
                   {arbeidsforholdData?.identifikator || arbeidsgiverIdentifikator})
                 </BodyShort>
               )}
-              <BodyShort size="small">Normal arbeidstid: {beregnetNormalArbeidstid} timer</BodyShort>
-              <BodyShort as="div" size="small" className={cx({ uttakDetaljer__beregningStrek: true })}>
-                <HStack gap="1">
+              <BodyShort size="small" className="leading-6">
+                Normal arbeidstid: {beregnetNormalArbeidstid} timer
+              </BodyShort>
+              <BodyShort
+                as="div"
+                size="small"
+                className={cx({ uttakDetaljer__beregningStrek: true, 'leading-6': true })}
+              >
+                <HStack gap="1" className="leading-6">
                   Faktisk arbeidstid:
                   <span className={cx({ uttakDetaljer__utnullet: faktiskOverstigerNormal })}>
                     {beregnetFaktiskArbeidstid}
@@ -78,7 +84,7 @@ const GraderingMotArbeidstidDetaljer: FC<ownProps> = ({
                   )}
                 </HStack>
               </BodyShort>
-              <BodyShort className="mt-1" size="small">
+              <BodyShort className="mt-1 leading-6" size="small">
                 = {fraværsprosent} % fravær{' '}
               </BodyShort>
             </Box>

diff --git a/packages/prosess-uttak/src/ui/components/uttak-detaljer/GraderingMotInntektDetaljer.tsx b/packages/prosess-uttak/src/ui/components/uttak-detaljer/GraderingMotInntektDetaljer.tsx
@@ -3,9 +3,12 @@ import { tilNOK } from '@k9-sak-web/gui/utils/formatters.js';
 import { BodyShort, Box, Tag, VStack } from '@navikt/ds-react';
 import UttakDetaljerEkspanderbar from './UttakDetaljerEkspanderbar';
 import { ArbeidsgiverOpplysninger, Inntektsgradering } from '../../../types';
+import classNames from 'classnames/bind';
+import { Arbeidstype } from '../../../constants';
 
 import styles from './nyUttakDetaljer.module.css';
-import { Arbeidstype } from '../../../constants';
+
+const cx = classNames.bind(styles);
 
 interface ownProps {
   alleArbeidsforhold: Record<string, ArbeidsgiverOpplysninger>;
@@ -29,7 +32,7 @@ const GraderingMotInntektDetaljer: FC<ownProps> = ({ alleArbeidsforhold, inntekt
               key={`${arbeidsgiverIdentifikator}_avkorting_inntekt_grunnlag`}
               className={styles.uttakDetaljer__beregningFirma}
             >
-              <BodyShort size="small" weight="semibold">
+              <BodyShort size="small" weight="semibold" className="leading-6">
                 {arbeidsforholdData?.navn || 'Mangler navn'} (
                 {arbeidsforholdData?.identifikator || arbeidsgiverIdentifikator}){' '}
                 {inntForhold.erNytt && (
@@ -60,9 +63,15 @@ const GraderingMotInntektDetaljer: FC<ownProps> = ({ alleArbeidsforhold, inntekt
                     </Tag>
                   )}
                 </BodyShort>
-                <BodyShort size="small">Inntekt: {tilNOK.format(inntForhold.bruttoInntekt)}</BodyShort>
-                <BodyShort size="small">Jobber: {inntForhold.arbeidstidprosent} %</BodyShort>
-                <BodyShort size="small">= {tilNOK.format(inntForhold.løpendeInntekt)} i utbetalt lønn</BodyShort>
+                <BodyShort className="leading-6" size="small">
+                  Inntekt: {tilNOK.format(inntForhold.bruttoInntekt)}
+                </BodyShort>
+                <BodyShort className="leading-6" size="small">
+                  Jobber: {inntForhold.arbeidstidprosent} %
+                </BodyShort>
+                <BodyShort className="leading-6" size="small">
+                  = {tilNOK.format(inntForhold.løpendeInntekt)} i utbetalt lønn
+                </BodyShort>
               </Box>
             </React.Fragment>
           );
@@ -86,22 +95,22 @@ const GraderingMotInntektDetaljer: FC<ownProps> = ({ alleArbeidsforhold, inntekt
       </UttakDetaljerEkspanderbar>
 
       <VStack className={styles.uttakDetaljer__nyGradering}>
-        <BodyShort as="div" size="small" weight="semibold">
+        <BodyShort as="div" size="small" weight="semibold" className="leading-6">
           Ny gradering
         </BodyShort>
-        <BodyShort as="div" size="small">
+        <BodyShort as="div" size="small" className="leading-6">
           {løpendeInntekt} (utbetalt lønn) /
         </BodyShort>
-        <BodyShort as="div" size="small" className={styles.uttakDetaljer__beregningStrek}>
+        <BodyShort as="div" size="small" className={cx({ uttakDetaljer__beregningStrek: true, 'leading-6': true })}>
           {beregningsgrunnlag} (beregningsgrunnlag)
         </BodyShort>
-        <BodyShort as="div" size="small" className={styles.uttakDetaljer__beregningSum}>
+        <BodyShort as="div" size="small" className={cx({ uttakDetaljer__beregningSum: true, 'leading-6': true })}>
           = {reduksjonsProsent} % reduksjon pga. utbetalt lønn
         </BodyShort>
       </VStack>
 
       <Box>
-        <BodyShort as="div" className={styles.uttakDetaljer__detailSum} size="small">
+        <BodyShort as="div" size="small" className={cx({ uttakDetaljer__detailSum: true, 'leading-6': true })}>
           = {graderingsProsent} % totalt inntektstap
         </BodyShort>
       </Box>