Fix background color (#439)

* fix background-color * add component for common heading+ingress * fix font size
Altinn · Nov 28, 2024 · 4ae8326 · 4ae8326
1 parent 90792d6
commit 4ae8326
Show file tree

Hide file tree

Showing 10 changed files with 61 additions and 32 deletions.
diff --git a/bff/src/Altinn.Authentication.UI/Altinn.Authentication.UI/Views/Home/Index.cshtml b/bff/src/Altinn.Authentication.UI/Altinn.Authentication.UI/Views/Home/Index.cshtml
@@ -20,7 +20,7 @@
           href="https://altinncdn.no/fonts/inter/inter.css" />
     <title>Altinn</title>
 </head>
-<body>
+<body style="background-color: #1EADF7;">
     <div id="root"></div>
     @if (isDev)
     {

diff --git a/frontend/index.html b/frontend/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="no">
+<html lang="no" style="background-color: #1eadf7">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/src/assets/altinn-logo.svg" />

diff --git a/frontend/src/components/PageDescription/PageDescription.module.css b/frontend/src/components/PageDescription/PageDescription.module.css
@@ -0,0 +1,6 @@
+.pageDescription {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-spacing-1);
+  margin-bottom: var(--ds-spacing-8);
+}
diff --git a/frontend/src/components/PageDescription/PageDescription.tsx b/frontend/src/components/PageDescription/PageDescription.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Heading, Paragraph } from '@digdir/designsystemet-react';
+import classes from './PageDescription.module.css';
+
+interface PageDescriptionProps {
+  heading: string;
+  ingress: string;
+}
+
+export const PageDescription = ({ heading, ingress }: PageDescriptionProps): React.ReactNode => {
+  return (
+    <div className={classes.pageDescription}>
+      <Heading level={2} data-size='sm'>
+        {heading}
+      </Heading>
+      <Paragraph data-size='sm'>{ingress}</Paragraph>
+    </div>
+  );
+};
diff --git a/frontend/src/components/PageDescription/index.ts b/frontend/src/components/PageDescription/index.ts
@@ -0,0 +1 @@
+export { PageDescription } from './PageDescription';
diff --git a/frontend/src/features/creationpage/CreationPageContent.tsx b/frontend/src/features/creationpage/CreationPageContent.tsx
@@ -1,13 +1,14 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { Button, Heading, Combobox, Alert, Paragraph } from '@digdir/designsystemet-react';
+import { Button, Combobox, Alert } from '@digdir/designsystemet-react';
 import { AuthenticationRoute } from '@/routes/paths';
 import classes from './CreationPageContent.module.css';
 import { useGetVendorsQuery } from '@/rtk/features/systemUserApi';
 import { useAppDispatch, useAppSelector } from '@/rtk/app/hooks';
 import { setSelectedSystemType } from '@/rtk/features/createSystemUserSlice';
 import { i18nLanguageToShortLanguageCode } from '@/utils/languageUtils';
+import { PageDescription } from '@/components/PageDescription';
 
 export const CreationPageContent = () => {
   const { i18n, t } = useTranslation();
@@ -42,10 +43,10 @@ export const CreationPageContent = () => {
   return (
     <div className={classes.creationPageContainer}>
       <div>
-        <Heading level={2} data-size='sm'>
-          {t('authent_creationpage.sub_title')}
-        </Heading>
-        <Paragraph data-size='sm'>{t('authent_creationpage.content_text1')}</Paragraph>
+        <PageDescription
+          heading={t('authent_creationpage.sub_title')}
+          ingress={t('authent_creationpage.content_text1')}
+        />
       </div>
       <div className={classes.inputContainer}>
         <Combobox

diff --git a/frontend/src/features/detailpage/DetailPageContent.tsx b/frontend/src/features/detailpage/DetailPageContent.tsx
@@ -1,7 +1,7 @@
 import React, { useRef, useState } from 'react';
 import { Link as RouterLink, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { Button, Heading, Modal, Paragraph, Textfield, Alert } from '@digdir/designsystemet-react';
+import { Button, Heading, Modal, Textfield, Alert } from '@digdir/designsystemet-react';
 import { TrashIcon } from '@navikt/aksel-icons';
 import classes from './DetailPage.module.css';
 import { AuthenticationRoute } from '@/routes/paths';
@@ -10,6 +10,7 @@ import {
   useUpdateSystemuserMutation,
 } from '@/rtk/features/systemUserApi';
 import { SystemUser } from '@/types';
+import { PageDescription } from '@/components/PageDescription';
 
 interface DetailPageContentProps {
   systemUser: SystemUser;
@@ -66,12 +67,10 @@ export const DetailPageContent = ({ systemUser }: DetailPageContentProps) => {
           </div>
         </Modal.Block>
       </Modal>
-      <div>
-        <Heading level={2} data-size='md'>
-          {systemUser.integrationTitle || t('authent_detailpage.no_name')}
-        </Heading>
-        <Paragraph data-size='sm'>{systemUser.supplierName?.toUpperCase()}</Paragraph>
-      </div>
+      <PageDescription
+        heading={systemUser.integrationTitle || t('authent_detailpage.no_name')}
+        ingress={systemUser.supplierName?.toUpperCase()}
+      />
       {IS_EDIT_NAME_ENABLED && (
         <Textfield
           label={t('authent_detailpage.edit_systemuser_name')}

diff --git a/frontend/src/features/overviewpage/OverviewPageContent.tsx b/frontend/src/features/overviewpage/OverviewPageContent.tsx
@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { AuthenticationRoute } from '@/routes/paths';
 import classes from './OverviewPageContent.module.css';
 import { PlusIcon } from '@navikt/aksel-icons';
-import { Alert, Button, Heading, Paragraph, Spinner } from '@digdir/designsystemet-react';
+import { Alert, Button, Heading, Spinner } from '@digdir/designsystemet-react';
 import { useFirstRenderEffect } from '@/resources/hooks';
 import { useTranslation } from 'react-i18next';
 import { useGetSystemUsersQuery } from '@/rtk/features/systemUserApi';
@@ -12,6 +12,7 @@ import { setSelectedSystemType } from '@/rtk/features/createSystemUserSlice';
 import { SystemUserActionBar } from '@/components/SystemUserActionBar';
 import { useGetLoggedInUserQuery } from '@/rtk/features/userApi';
 import { RightsError } from '@/components/RightsError';
+import { PageDescription } from '@/components/PageDescription';
 
 export const OverviewPageContent = () => {
   const {
@@ -51,12 +52,10 @@ export const OverviewPageContent = () => {
   return (
     <div>
       {(!userCanCreateSystemUser || (systemUsers && systemUsers.length === 0)) && (
-        <>
-          <Heading level={2} data-size='xs'>
-            {t('authent_overviewpage.sub_title')}
-          </Heading>
-          <Paragraph>{t('authent_overviewpage.sub_title_text')}</Paragraph>
-        </>
+        <PageDescription
+          heading={t('authent_overviewpage.sub_title')}
+          ingress={t('authent_overviewpage.sub_title_text')}
+        />
       )}
       <div>
         <Button

diff --git a/frontend/src/features/rightsincludedpage/RightsIncludedPageContent.tsx b/frontend/src/features/rightsincludedpage/RightsIncludedPageContent.tsx
@@ -1,14 +1,15 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { Alert, Button, Heading, Paragraph, Spinner } from '@digdir/designsystemet-react';
+import { Alert, Button, Spinner } from '@digdir/designsystemet-react';
 import { AuthenticationRoute } from '@/routes/paths';
 import classes from './RightsIncludedPageContent.module.css';
 import { useCreateSystemUserMutation, useGetSystemRightsQuery } from '@/rtk/features/systemUserApi';
 import { useAppDispatch, useAppSelector } from '@/rtk/app/hooks';
 import { useFirstRenderEffect } from '@/resources/hooks';
 import { setCreatedId } from '@/rtk/features/createSystemUserSlice';
 import { RightsList } from '@/components/RightsList';
+import { PageDescription } from '@/components/PageDescription';
 
 export const RightsIncludedPageContent = () => {
   // Dette er en ny side fra "Design av 5/12" (se Repo Wiki, med senere endringer tror jeg)
@@ -69,16 +70,18 @@ export const RightsIncludedPageContent = () => {
 
   return (
     <div className={classes.rightsIncludedWrapper}>
-      <Heading level={2} data-size='sm'>
-        {rights?.length === 1
-          ? t('authent_includedrightspage.sub_title_single')
-          : t('authent_includedrightspage.sub_title')}
-      </Heading>
-      <Paragraph data-size='sm'>
-        {rights?.length === 1
-          ? t('authent_includedrightspage.content_text_single')
-          : t('authent_includedrightspage.content_text')}
-      </Paragraph>
+      <PageDescription
+        heading={
+          rights?.length === 1
+            ? t('authent_includedrightspage.sub_title_single')
+            : t('authent_includedrightspage.sub_title')
+        }
+        ingress={
+          rights?.length === 1
+            ? t('authent_includedrightspage.content_text_single')
+            : t('authent_includedrightspage.content_text')
+        }
+      />
       <div>
         <RightsList resources={rights ?? []} />
         {isCreateSystemUserError && (

diff --git a/frontend/src/features/vendorRequestPage/VendorRequestPageContent.module.css b/frontend/src/features/vendorRequestPage/VendorRequestPageContent.module.css
@@ -20,6 +20,7 @@
   justify-content: space-between;
   align-items: center;
   text-align: right;
+  font-size: 16px;
   padding: var(--vendor-container-padding);
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { PageDescription } from './PageDescription';