backoffice

apps/backoffice/src/app/features/payment-config/pages/PaymentConfigPage/index.tsx

@@ -1,37 +1,13 @@
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  Alert,
-  Badge,
-  Button,
-  Center,
-  Group,
-  Loader,
-  Modal,
-  NumberInput,
-  Paper,
-  Stack,
-  Switch,
-  Text,
-  TextInput,
-  ThemeIcon,
-  Title,
-  Tooltip,
-} from '@mantine/core';
+import {Alert, Badge, Button, Center, Group, Loader, Modal, NumberInput, Paper, Stack, Switch, Text, TextInput, ThemeIcon, Tooltip} from '@mantine/core';
 import {
   IconAlertTriangle,
   IconCreditCard,
   IconInfoCircle,
   IconLock,
 } from '@tabler/icons-react';
-import {
-  notify,
-  ModalFooter,
-  AdvancedTable,
-  useServerTable,
-  type AdvancedColumn,
-  PageLoader,
-} from '@ema-platform/ui';
+import { AdvancedTable, ModalFooter, notify, PageHeader, PageLoader, useServerTable, type AdvancedColumn } from '@ema-platform/ui';
 import {
   extractErrorMessage,
   useLocalized,
@@ -92,20 +68,19 @@ export function PaymentConfigPage() {
 
   return (
     <Stack gap="lg">
-      <Group justify="space-between" align="flex-start">
-        <div>
-          <Title order={3}>{t('paymentConfig.title', 'Payment configuration')}</Title>
-          <Text size="sm" c="dimmed" mt={4}>
-            {t(
-              'paymentConfig.subtitle',
-              'What each licence costs. Applicants are charged after approval, and the amount is fixed onto the application at that moment.',
-            )}
-          </Text>
-        </div>
-        <ThemeIcon size="xl" radius="md" variant="light">
-          <IconCreditCard size={22} />
-        </ThemeIcon>
-      </Group>
+      <PageHeader
+        title={t('paymentConfig.title', 'Payment configuration')}
+        subtitle={t(
+          'paymentConfig.subtitle',
+          'What each licence costs. Applicants are charged after approval, and the amount is fixed onto the application at that moment.',
+        )}
+        noMargin
+        action={
+          <ThemeIcon size="xl" radius="md" variant="light">
+            <IconCreditCard size={22} />
+          </ThemeIcon>
+        }
+      />
 
       <Alert
         variant="light"