APPT-2291 - Updating the change availability button on week / month view (#1639)

# Description

Updating the change availability button location and size on week and
month views.

<img width="895" height="809" alt="image"
src="https://github.com/user-attachments/assets/2c019549-f218-49f6-a46e-0284eb8f90a4"
/>
<img width="902" height="904" alt="image"
src="https://github.com/user-attachments/assets/cd71a525-fbd2-4e9d-9367-961950088772"
/>


Fixes # (issue)

# Checklist:

- [ ] My work is behind a feature toggle (if appropriate)
- [ ] If my work is behind a feature toggle, I've added a full suite of
tests for both the ON and OFF state
- [x] The ticket number is in the Pull Request title, with format
"APPT-XXX: My Title Here"
- [x] I have ran npm tsc / lint (in the future these will be ran
automatically)
- [ ] My code generates no new .NET warnings (in the future these will
be treated as errors)
- [ ] If I've added a new Function, it is disabled in all but one of the
terraform groups (e.g. http_functions)
- [ ] If I've added a new Function, it has both unit and integration
tests. Any request body validators have unit tests also
- [ ] If I've made UI changes, I've added appropriate Playwright and
Jest tests
- [ ] If I've added/updated an end-point, I've added the appropriate
annotations and tested the Swagger documentation reflects the change

Author: ste-banks

src/client/src/app/site/[site]/view-availability/(nhs-layout)/page.tsx

@@ -7,7 +7,6 @@ import {
 import { ViewAvailabilityPage } from './view-availability-page';
 import { RFC3339Format, parseToUkDatetime, ukNow } from '@services/timeService';
 import fromServer from '@server/fromServer';
-import Link from 'next/link';
 import { Heading, Button } from 'nhsuk-react-components';
 
 type PageProps = {
@@ -45,22 +44,24 @@ const Page = async ({ params, searchParams }: PageProps) => {
 
   return (
     <>
-      <Heading headingLevel="h2">
-        <span className="nhsuk-caption-l">{site.name}</span>
-        {`View availability for ${searchMonth.format('MMMM YYYY')}`}
-      </Heading>
-
       {canChangeAvailability && (
-        /* Pass the returnUrl to the wizard */
-        <Link
-          href={`/site/${siteFromPath}/change-availability?returnUrl=${encodedReturnUrl}`}
-        >
-          <Button type="button" secondary>
+        <ol className="nhsuk-list nhsuk-u-margin-0 nhsuk-button-group-flat flex-row">
+          <Button
+            href={`/manage-your-appointments/site/${siteFromPath}/change-availability?returnUrl=${encodedReturnUrl}`}
+            className="no-print"
+            small
+            secondarySolid
+          >
             Change availability
           </Button>
-        </Link>
+        </ol>
       )}
 
+      <Heading headingLevel="h2">
+        <span className="nhsuk-caption-l">{site.name}</span>
+        {`View availability for ${searchMonth.format('MMMM YYYY')}`}
+      </Heading>
+
       <ViewAvailabilityPage site={site} searchMonth={searchMonth} />
     </>
   );

src/client/src/app/site/[site]/view-availability/(nhs-layout)/week/page.tsx

@@ -8,7 +8,6 @@ import { ViewWeekAvailabilityPage } from './view-week-availability-page';
 import { endOfUkWeek, startOfUkWeek } from '@services/timeService';
 import { notFound } from 'next/navigation';
 import fromServer from '@server/fromServer';
-import Link from 'next/link';
 import { Heading, Button } from 'nhsuk-react-components';
 
 type PageProps = {
@@ -51,22 +50,24 @@ const Page = async ({ searchParams, params }: PageProps) => {
 
   return (
     <>
-      <Heading headingLevel="h2">
-        <span className="nhsuk-caption-l">{site.name}</span>
-        {`${ukWeekStart.format('D MMMM')} to ${ukWeekEnd.format('D MMMM')}`}
-      </Heading>
-
       {canChangeAvailability && (
-        /* Inject the returnUrl */
-        <Link
-          href={`/site/${siteFromPath}/change-availability?returnUrl=${encodedReturnUrl}`}
-        >
-          <Button type="button" secondary>
+        <ol className="nhsuk-list nhsuk-u-margin-0 nhsuk-button-group-flat flex-row">
+          <Button
+            href={`/manage-your-appointments/site/${siteFromPath}/change-availability?returnUrl=${encodedReturnUrl}`}
+            className="no-print"
+            small
+            secondarySolid
+          >
             Change availability
           </Button>
-        </Link>
+        </ol>
       )}
 
+      <Heading headingLevel="h2">
+        <span className="nhsuk-caption-l">{site.name}</span>
+        {`${ukWeekStart.format('D MMMM')} to ${ukWeekEnd.format('D MMMM')}`}
+      </Heading>
+
       <ViewWeekAvailabilityPage
         ukWeekStart={ukWeekStart}
         ukWeekEnd={ukWeekEnd}