style: WIP BatchBoard and train schedule

apps/edr-freight-web/backoffice/src/pages/trainScheduling/TrainSchedulingGlobalRulesPage.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
-import { Button, Card, Group, NumberInput, Stack, Text, Title } from "@mantine/core";
+import { Button, Card, Group, NumberInput, Stack } from "@mantine/core";
 
+import { PageContainer, PageHeader } from "@/components/page";
 import { trainSchedulingService } from "@/services/trainScheduling.service";
 import { useToast } from "@/hooks/use-toast";
 import type { TrainSchedulingGlobalRules } from "@/types/trainScheduling";
@@ -44,15 +45,13 @@ export default function TrainSchedulingGlobalRulesPage() {
   };
 
   return (
-    <Stack gap="lg" maw={720}>
-      <Stack gap={4}>
-        <Title order={3}>Train scheduling rules</Title>
-        <Text size="sm" c="dimmed">
-          Global limits applied when previewing and assigning bookings to trains.
-        </Text>
-      </Stack>
+    <PageContainer>
+      <PageHeader
+        title="Train scheduling rules"
+        subtitle="Global limits applied when previewing and assigning bookings to trains."
+      />
 
-      <Card radius="xl" padding="lg" withBorder>
+      <Card maw={720}>
         <Stack gap="md">
           <NumberInput
             label="Max train length (m)"
@@ -110,12 +109,12 @@ export default function TrainSchedulingGlobalRulesPage() {
             disabled={loading}
           />
           <Group justify="flex-end">
-            <Button color="teal" loading={saving} disabled={loading} onClick={() => void handleSave()}>
+            <Button loading={saving} disabled={loading} onClick={() => void handleSave()}>
               Save rules
             </Button>
           </Group>
         </Stack>
       </Card>
-    </Stack>
+    </PageContainer>
   );
 }