Amsterdam · alimpens · Feb 17, 2025 · Feb 13, 2025 · Feb 13, 2025 · Feb 17, 2025
diff --git a/apps/public/src/app/(general)/Home.tsx b/apps/public/src/app/(general)/Home.tsx
@@ -17,7 +17,7 @@ export const Home = ({ formData }: { formData: Component[] }) => {
 
   return (
     <Grid paddingBottom="large" paddingTop="medium">
-      <Grid.Cell span={{ narrow: 4, medium: 6, wide: 7 }} start={{ narrow: 1, medium: 2, wide: 2 }}>
+      <Grid.Cell span={{ narrow: 4, medium: 6, wide: 6 }} start={{ narrow: 1, medium: 2, wide: 3 }}>
         {formState?.message && <Paragraph>{formState.message}</Paragraph>}
         <FormRenderer formData={formData} action={formAction} />
       </Grid.Cell>

diff --git a/...lic/src/app/(general)/aanvullende-vragen/[classification]/[panelId]/AanvullendeVragen.tsx b/...lic/src/app/(general)/aanvullende-vragen/[classification]/[panelId]/AanvullendeVragen.tsx
@@ -20,7 +20,7 @@ export const AanvullendeVragen = ({ action, formData, previousPanelPath }: Props
 
   return (
     <Grid paddingBottom="large" paddingTop="medium">
-      <Grid.Cell span={{ narrow: 4, medium: 6, wide: 7 }} start={{ narrow: 1, medium: 2, wide: 2 }}>
+      <Grid.Cell span={{ narrow: 4, medium: 6, wide: 6 }} start={{ narrow: 1, medium: 2, wide: 3 }}>
         {formState?.message && <Paragraph>{formState.message}</Paragraph>}
         <BackLink href={previousPanelPath} className="ams-mb--xs">
           Vorige vraag

diff --git a/apps/public/src/app/(general)/bedankt/Bedankt.tsx b/apps/public/src/app/(general)/bedankt/Bedankt.tsx
@@ -10,7 +10,7 @@ type Props = {
 
 export const Bedankt = ({ meldingId }: Props) => (
   <Grid paddingBottom="large" paddingTop="medium">
-    <Grid.Cell span={{ narrow: 4, medium: 6, wide: 7 }} start={{ narrow: 1, medium: 2, wide: 2 }}>
+    <Grid.Cell span={{ narrow: 4, medium: 6, wide: 6 }} start={{ narrow: 1, medium: 2, wide: 3 }}>
       <Heading className="ams-mb--xs">Bedankt</Heading>
       <Paragraph>Bedankt voor uw melding.</Paragraph>
       <Paragraph className="ams-mb--sm">{`Wij hebben uw melding ontvangen op 21-11-2023 om 17:11. Uw meldnummer is ${meldingId}.`}</Paragraph>

diff --git a/apps/public/src/app/(general)/bijlage/Bijlage.tsx b/apps/public/src/app/(general)/bijlage/Bijlage.tsx
@@ -10,7 +10,7 @@ import { postAttachmentForm } from './actions'
 
 export const Bijlage = () => (
   <Grid paddingBottom="large" paddingTop="medium">
-    <Grid.Cell span={{ narrow: 4, medium: 6, wide: 7 }} start={{ narrow: 1, medium: 2, wide: 2 }}>
+    <Grid.Cell span={{ narrow: 4, medium: 6, wide: 6 }} start={{ narrow: 1, medium: 2, wide: 3 }}>
       <BackLink href="/locatie" className="ams-mb--xs">
         Vorige vraag
       </BackLink>

diff --git a/apps/public/src/app/(general)/contact/Contact.tsx b/apps/public/src/app/(general)/contact/Contact.tsx
@@ -15,7 +15,7 @@ export const Contact = () => {
 
   return (
     <Grid paddingBottom="large" paddingTop="medium">
-      <Grid.Cell span={{ narrow: 4, medium: 6, wide: 7 }} start={{ narrow: 1, medium: 2, wide: 2 }}>
+      <Grid.Cell span={{ narrow: 4, medium: 6, wide: 6 }} start={{ narrow: 1, medium: 2, wide: 3 }}>
         <BackLink href="/bijlage" className="ams-mb--xs">
           Vorige vraag
         </BackLink>

diff --git a/apps/public/src/app/(general)/layout.test.tsx b/apps/public/src/app/(general)/layout.test.tsx
@@ -2,6 +2,12 @@ import { render } from '@testing-library/react'
 
 import Layout from './layout'
 
+// We have to mock matchMedia here, because it is used in the Amsterdam Design System Header component
+// We do not really use the matchMedia functionality, so we use a simple mock.
+Object.defineProperty(window, 'matchMedia', {
+  value: vi.fn().mockImplementation(() => ({})),
+})
+
 describe('Layout', () => {
   it('should render', () => {
     const { container } = render(<Layout>Test</Layout>)

diff --git a/apps/public/src/app/(general)/layout.tsx b/apps/public/src/app/(general)/layout.tsx
@@ -6,7 +6,7 @@ const GeneralLayout = ({ children }: { children: React.ReactNode }) => (
   <MeldingContextProvider>
     <Screen maxWidth="wide">
       <Header />
-      <main id="main">{children}</main>
+      <main>{children}</main>
       <Footer />
     </Screen>
   </MeldingContextProvider>

diff --git a/apps/public/src/app/(general)/locatie/Locatie.tsx b/apps/public/src/app/(general)/locatie/Locatie.tsx
@@ -26,7 +26,7 @@ export const Locatie = ({ prevPage, locationData }: Props) => {
 
   return (
     <Grid paddingBottom="large" paddingTop="medium">
-      <Grid.Cell span={{ narrow: 4, medium: 6, wide: 7 }} start={{ narrow: 1, medium: 2, wide: 2 }}>
+      <Grid.Cell span={{ narrow: 4, medium: 6, wide: 6 }} start={{ narrow: 1, medium: 2, wide: 3 }}>
         <BackLink href={prevPage} className="ams-mb--xs">
           Vorige vraag
         </BackLink>

diff --git a/libs/ui/src/Footer/Footer.tsx b/libs/ui/src/Footer/Footer.tsx
@@ -9,20 +9,23 @@ export const Footer = () => (
         Colofon
       </Heading>
       <Grid gapVertical="large" paddingVertical="medium">
-        <Grid.Cell span={{ narrow: 3, medium: 4, wide: 4 }}>
+        <Grid.Cell span={4}>
           <Column gap="small">
             <Heading level={2} size="level-4" inverseColor>
               Contact
             </Heading>
             <Paragraph size="small" inverseColor>
-              Lukt het niet om een melding te doen? Bel het telefoonnummer{' '}
-              <Link href="tel:+3114020" inverseColor variant="inline">
+              Lukt het niet om een melding te doen?
+            </Paragraph>
+            <Paragraph size="small" inverseColor>
+              Bel het telefoonnummer{' '}
+              <Link href="tel:14020" inverseColor variant="inline">
                 14 020
               </Link>
               .
             </Paragraph>
             <Paragraph size="small" inverseColor>
-              Wij zijn bereikbaar van maandag tot en met vrijdag van 08.00 tot 18.00 uur.
+              Maandag tot en met vrijdag van 08.00 tot 18.00 uur.
             </Paragraph>
           </Column>
         </Grid.Cell>

diff --git a/libs/ui/src/Header/Header.tsx b/libs/ui/src/Header/Header.tsx
@@ -1,21 +1,5 @@
 'use client'
 
-import { Header as ADSHeader, Grid, PageMenu, SkipLink } from '@amsterdam/design-system-react'
+import { Header as ADSHeader } from '@amsterdam/design-system-react'
 
-export const Header = () => (
-  <Grid>
-    <Grid.Cell span="all">
-      <SkipLink href="#main">Direct naar inhoud</SkipLink>
-      <ADSHeader
-        logoLinkTitle="Signalen homepage"
-        links={
-          <PageMenu alignEnd>
-            <PageMenu.Link href="/">Doe een melding</PageMenu.Link>
-            <PageMenu.Link href="#">Meldingenkaart</PageMenu.Link>
-            <PageMenu.Link href="#">Mijn meldingen</PageMenu.Link>
-          </PageMenu>
-        }
-      />
-    </Grid.Cell>
-  </Grid>
-)
+export const Header = () => <ADSHeader brandName="Melding openbare ruimte" />
diff --git a/package.json b/package.json
@@ -35,11 +35,11 @@
     "update-minor": "npm-check-updates --target minor --upgrade && pnpm install"
   },
   "dependencies": {
-    "@amsterdam/design-system-assets": "0.2.2",
-    "@amsterdam/design-system-css": "0.13.1",
-    "@amsterdam/design-system-react": "0.13.1",
+    "@amsterdam/design-system-assets": "0.3.0",
+    "@amsterdam/design-system-css": "0.14.1",
+    "@amsterdam/design-system-react": "0.14.1",
     "@amsterdam/design-system-react-icons": "0.1.13",
-    "@amsterdam/design-system-tokens": "0.13.0",
+    "@amsterdam/design-system-tokens": "0.14.0",
     "@formio/react": "5.3.0",
     "formiojs": "4.21.6",
     "react": "18.3.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml