Vaihdettu tekstikomponenti OphTypographyyn

Opetushallitus · Dec 10, 2024 · a3eb81e · a3eb81e
1 parent b9abc09
commit a3eb81e
Show file tree

Hide file tree

Showing 18 changed files with 187 additions and 127 deletions.
diff --git a/src/maksut-ui/app/[locale]/error.tsx b/src/maksut-ui/app/[locale]/error.tsx
@@ -2,12 +2,13 @@
 
 import ErrorPanel from '@/app/components/ErrorPanel';
 import { useTranslations } from 'use-intl';
+import { OphTypography } from '@opetushallitus/oph-design-system';
 
 export default function Error() {
   const t = useTranslations('Error');
   return (
     <ErrorPanel>
-      <h2>{t('header')}</h2>
+      <OphTypography variant={'h2'}>{t('header')}</OphTypography>
     </ErrorPanel>
   );
 }
diff --git a/src/maksut-ui/app/[locale]/error/page.tsx b/src/maksut-ui/app/[locale]/error/page.tsx
@@ -2,13 +2,14 @@
 
 import ErrorPanel from '@/app/components/ErrorPanel';
 import { useTranslations } from 'use-intl';
+import { OphTypography } from '@opetushallitus/oph-design-system';
 
 export default function ErrorPage() {
   const t = useTranslations('PaymentError');
 
   return (
     <ErrorPanel>
-      <h2>{t('header')}</h2>
+      <OphTypography variant={'h2'}>{t('header')}</OphTypography>
     </ErrorPanel>
   );
 }
diff --git a/src/maksut-ui/app/[locale]/layout.tsx b/src/maksut-ui/app/[locale]/layout.tsx
@@ -7,7 +7,7 @@ import { NextIntlClientProvider } from 'next-intl';
 import { getMessages } from 'next-intl/server';
 import { TopBar } from '@/app/components/TopBar';
 import { Locale } from '@/app/lib/types';
-import { OphLanguage } from '@opetushallitus/oph-design-system';
+import { OphLanguage, ophColors } from '@opetushallitus/oph-design-system';
 
 export const metadata: Metadata = {
   title: 'Maksut',
@@ -28,7 +28,7 @@ export default async function LocaleLayout({
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
-    backgroundColor: '#F6F6F6',
+    backgroundColor: ophColors.grey50,
   };
 
   return (

diff --git a/src/maksut-ui/app/[locale]/not-found.tsx b/src/maksut-ui/app/[locale]/not-found.tsx
@@ -1,14 +1,15 @@
 import { getTranslations } from 'next-intl/server';
 import ErrorPanel from '@/app/components/ErrorPanel';
+import { OphTypography } from '@opetushallitus/oph-design-system';
 
 export default async function NotFound() {
   const t = await getTranslations('NotFound');
 
   return (
     <ErrorPanel>
-      <h2>{t('header')}</h2>
-      <span>{t('body1')}</span>
-      <span>{t('body2')}</span>
+      <OphTypography variant={'h2'}>{t('header')}</OphTypography>
+      <OphTypography>{t('body1')}</OphTypography>
+      <OphTypography>{t('body2')}</OphTypography>
     </ErrorPanel>
   );
 }
diff --git a/src/maksut-ui/app/components/AlertIcon.tsx b/src/maksut-ui/app/components/AlertIcon.tsx
@@ -1,11 +1,12 @@
 import Image from 'next/image';
 import { Box } from '@mui/material';
+import { ophColors } from '@opetushallitus/oph-design-system';
 
 const AlertIcon = () => {
   return (
     <Box
       style={{
-        backgroundColor: '#cc2f1b',
+        backgroundColor: ophColors.orange3,
         borderRadius: '50%',
         width: '60px',
         height: '60px',

diff --git a/src/maksut-ui/app/components/AstuPanel.tsx b/src/maksut-ui/app/components/AstuPanel.tsx
@@ -6,6 +6,7 @@ import { useLocale, useTranslations } from 'use-intl';
 import { translateLocalizedString } from '@/app/lib/utils';
 import Panel from '@/app/components/Panel';
 import MaksaButton from '@/app/components/MaksaButton';
+import { OphTypography } from '@opetushallitus/oph-design-system';
 
 const AstuPanel = ({ lasku }: { lasku: Lasku }) => {
   const t = useTranslations('AstuPanel');
@@ -16,28 +17,28 @@ const AstuPanel = ({ lasku }: { lasku: Lasku }) => {
     if (lasku.status === 'paid') {
       return (
         <>
-          <span>{t('päätösMaksettu')}</span>
-          <span>{tMaksut('yhteiskäytto')}</span>
+          <OphTypography>{t('päätösMaksettu')}</OphTypography>
+          <OphTypography>{tMaksut('yhteiskäytto')}</OphTypography>
         </>
       );
     } else {
       return (
         <>
-          <span>{t('päätösMaksamatta')}</span>
+          <OphTypography>{t('päätösMaksamatta')}</OphTypography>
         </>
       );
     }
   };
 
   return (
     <Panel>
-      <h2>
+      <OphTypography variant={'h2'}>
         {translateLocalizedString(
           lasku.metadata?.form_name,
           locale,
           'ASTU lomake',
         )}
-      </h2>
+      </OphTypography>
       {stateText()}
       <Maksu lasku={lasku} />
       <MaksaButton lasku={lasku}></MaksaButton>

diff --git a/src/maksut-ui/app/components/ExpiredPanel.tsx b/src/maksut-ui/app/components/ExpiredPanel.tsx
@@ -2,19 +2,19 @@
 
 import ErrorPanel from '@/app/components/ErrorPanel';
 import { useTranslations } from 'use-intl';
-import { OphLink } from '@opetushallitus/oph-design-system';
+import { OphLink, OphTypography } from '@opetushallitus/oph-design-system';
 
 const ExpiredPanel = ({ contact }: { contact: string | undefined }) => {
   const t = useTranslations('ExpiredPanel');
 
   return (
     <ErrorPanel>
-      <h2>{t('header')}</h2>
-      <span>{t('body1')}</span>
-      <span>
+      <OphTypography variant={'h2'}>{t('header')}</OphTypography>
+      <OphTypography>{t('body1')}</OphTypography>
+      <OphTypography>
         {t('body2')}
         <OphLink href={`mailto:${contact}`}>{contact}</OphLink>.
-      </span>
+      </OphTypography>
     </ErrorPanel>
   );
 };

diff --git a/src/maksut-ui/app/components/Header.tsx b/src/maksut-ui/app/components/Header.tsx
@@ -1,14 +1,17 @@
 import { Box } from '@mui/material';
 import { Lasku } from '@/app/lib/types';
 import { getTranslations } from 'next-intl/server';
+import { OphTypography } from '@opetushallitus/oph-design-system';
 
 const Header = async ({ lasku }: { lasku: Lasku }) => {
   const t = await getTranslations('Header');
 
   return (
     <Box style={{ textAlign: 'center' }}>
-      <h3>{`${lasku.first_name} ${lasku.last_name}`}</h3>
-      <h1>{t('title')}</h1>
+      <OphTypography
+        variant={'h3'}
+      >{`${lasku.first_name} ${lasku.last_name}`}</OphTypography>
+      <OphTypography variant={'h1'}>{t('title')}</OphTypography>
     </Box>
   );
 };

diff --git a/src/maksut-ui/app/components/KkHakemusmaksuPanel.tsx b/src/maksut-ui/app/components/KkHakemusmaksuPanel.tsx
@@ -6,6 +6,7 @@ import { useLocale, useTranslations } from 'use-intl';
 import Panel from '@/app/components/Panel';
 import MaksaButton from '@/app/components/MaksaButton';
 import { translateLocalizedString } from '@/app/lib/utils';
+import { OphTypography } from '@opetushallitus/oph-design-system';
 
 const KkHakemusmaksuPanel = ({ lasku }: { lasku: Lasku }) => {
   const t = useTranslations('KkHakemusmaksuPanel');
@@ -22,9 +23,9 @@ const KkHakemusmaksuPanel = ({ lasku }: { lasku: Lasku }) => {
   const aloituskausiHeader = (aloitusvuosi?: number, aloituskausi?: string) => {
     if (aloitusvuosi && aloituskausi) {
       return (
-        <h3 style={{ margin: 0 }}>
+        <OphTypography variant={'h3'} style={{ margin: 0 }}>
           {t('aloituskausi')}: {aloituskausiText(aloitusvuosi, aloituskausi)}
-        </h3>
+        </OphTypography>
       );
     }
     return null;
@@ -34,58 +35,58 @@ const KkHakemusmaksuPanel = ({ lasku }: { lasku: Lasku }) => {
     if (lasku.status === 'paid') {
       return (
         <>
-          <span>{t('maksettu')}</span>
-          <span>
+          <OphTypography>{t('maksettu')}</OphTypography>
+          <OphTypography>
             {t('maksettu2')}{' '}
             {aloituskausiText(
               lasku.metadata?.alkamisvuosi,
               lasku.metadata?.alkamiskausi,
             )}
             . {t('maksettu3')}
-          </span>
-          <span>{t('maksettu4')}</span>
-          <span>{tMaksut('yhteiskäytto')}</span>
+          </OphTypography>
+          <OphTypography>{t('maksettu4')}</OphTypography>
+          <OphTypography>{tMaksut('yhteiskäytto')}</OphTypography>
         </>
       );
     } else if (lasku.status === 'overdue') {
       return (
         <>
-          <span>{t('eraantynyt')}</span>
+          <OphTypography>{t('eraantynyt')}</OphTypography>
         </>
       );
     } else if (lasku.status === 'invalidated') {
       return (
         <>
-          <span>
+          <OphTypography>
             {t('mitatoity')}{' '}
             {aloituskausiText(
               lasku.metadata?.alkamisvuosi,
               lasku.metadata?.alkamiskausi,
             )}
             . {t('mitatoity2')}
-          </span>
-          <span>{tMaksut('yhteiskäytto')}</span>
+          </OphTypography>
+          <OphTypography>{tMaksut('yhteiskäytto')}</OphTypography>
         </>
       );
     } else {
       return (
         <>
-          <span>{t('maksamatta')}</span>
-          <span>{t('maksamatta2')}</span>
+          <OphTypography>{t('maksamatta')}</OphTypography>
+          <OphTypography>{t('maksamatta2')}</OphTypography>
         </>
       );
     }
   };
 
   return (
     <Panel>
-      <h2 style={{ margin: 0 }}>
+      <OphTypography variant={'h2'} style={{ margin: 0 }}>
         {translateLocalizedString(
           lasku.metadata?.haku_name,
           locale,
           'Hakemusmaksu',
         )}
-      </h2>
+      </OphTypography>
       {aloituskausiHeader(
         lasku.metadata?.alkamisvuosi,
         lasku.metadata?.alkamiskausi,

diff --git a/src/maksut-ui/app/components/MaksaButton.tsx b/src/maksut-ui/app/components/MaksaButton.tsx
@@ -13,6 +13,7 @@ const MaksaButton = ({ lasku }: { lasku: Lasku }) => {
     return (
       <OphButton
         variant={'contained'}
+        target={'_self'}
         href={`${backendUrl}/lasku/${lasku.order_id}/maksa?secret=${lasku.secret}&locale=${locale}`}
       >
         {t('maksa')}

diff --git a/src/maksut-ui/app/components/Maksu.tsx b/src/maksut-ui/app/components/Maksu.tsx
@@ -3,7 +3,7 @@
 import { Lasku, PaymentStatus } from '@/app/lib/types';
 import { useTranslations } from 'use-intl';
 import { Box, useTheme } from '@mui/material';
-import { ophColors } from '@opetushallitus/oph-design-system';
+import { ophColors, OphTypography } from '@opetushallitus/oph-design-system';
 import { ReactNode } from 'react';
 import { BigNumber } from 'bignumber.js';
 
@@ -36,14 +36,14 @@ const StatusRow = ({ status }: { status: PaymentStatus }) => {
 
   return (
     <>
-      <span
+      <OphTypography
         style={{
           textAlign: 'left',
           margin: theme.spacing(1.5, 2, 1.5, 0),
         }}
       >
         {t('tila')}
-      </span>
+      </OphTypography>
       <Box
         style={{
           padding: theme.spacing(0.5, 1, 0.5, 1),
@@ -96,23 +96,23 @@ const MaksuRow = ({
 
   return (
     <>
-      <span
+      <OphTypography
         style={{
           textAlign: 'left',
           margin: theme.spacing(1, 2, 1, 0),
         }}
       >
         {name}
-      </span>
-      <span
+      </OphTypography>
+      <OphTypography
         style={{
           textAlign: 'right',
           margin: theme.spacing(1, 0, 1, 2),
           fontWeight: bold ? 'bold' : 'initial',
         }}
       >
         {value}
-      </span>
+      </OphTypography>
     </>
   );
 };
@@ -154,7 +154,9 @@ const Maksu = ({ lasku }: { lasku: Lasku }) => {
         textAlign: 'center',
       }}
     >
-      <h4 style={{ margin: theme.spacing(1) }}>{title()}</h4>
+      <OphTypography variant={'h4'} style={{ margin: theme.spacing(1) }}>
+        {title()}
+      </OphTypography>
       <Box
         style={{
           display: 'grid',

diff --git a/src/maksut-ui/app/components/Panel.tsx b/src/maksut-ui/app/components/Panel.tsx
@@ -17,7 +17,6 @@ const Panel = ({ children }: { children: ReactNode }) => {
         display: 'flex',
         flexDirection: 'column',
         maxWidth: '1200px',
-        minWidth: '800px',
         filter: 'drop-shadow(0 1px 3px rgba(0,0,0,0.30))',
         padding: theme.spacing(2, 4),
       }}

diff --git a/src/maksut-ui/app/components/TopBar.tsx b/src/maksut-ui/app/components/TopBar.tsx
@@ -8,7 +8,7 @@ export const TopBar = ({ lang }: { lang?: Locale }) => {
   const theme = useTheme();
   return (
     <AppBar position="static" style={{ padding: theme.spacing(3, 0) }}>
-      <Box style={{ margin: 'auto', width: '1000px' }}>
+      <Box style={{ margin: 'auto', maxWidth: '1000px' }}>
         <Image
           src={`/maksut-ui/opintopolku_logo_header_${lang || 'fi'}.svg`}
           alt="Opintopolku"