APPT-2291 - Moving the change availability button to where it should be (#1631)

# Description

Also changing the button type to `secondarySolid` for both as per the
designs. Screenshots below of when both buttons are visible vs when only
the print button is visible.

<img width="912" height="895" alt="image"
src="https://github.com/user-attachments/assets/1f2e5f18-c293-445f-baed-0eb1ba3ec709"
/>
<img width="909" height="878" alt="image"
src="https://github.com/user-attachments/assets/ccb91a39-9c6d-4bff-ad50-a5d485c80366"
/>


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"
- [ ] 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/lib/components/print-page-button.tsx

@@ -8,11 +8,7 @@ const PrintPageButton = () => {
   };
 
   return (
-    <Button
-      className="no-print nhsuk-button--small"
-      secondary
-      onClick={() => onClick()}
-    >
+    <Button className="no-print" small secondarySolid onClick={() => onClick()}>
       Print page
     </Button>
   );

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

@@ -15,7 +15,6 @@ import {
 import { notFound } from 'next/navigation';
 import fromServer from '@server/fromServer';
 import PrintPageButton from '@components/print-page-button';
-import Link from 'next/link';
 import { Heading, Button } from 'nhsuk-react-components';
 import { DayView } from './day-view';
 
@@ -71,27 +70,29 @@ const Page = async ({ params, searchParams }: PageProps) => {
 
   return (
     <>
-      <div className="nhsuk-button-group nhsuk-button-group--small">
+      <ol className="nhsuk-list nhsuk-u-margin-0 nhsuk-button-group-flat flex-row">
+        {canChangeAvailability && (
+          <Button
+            href={`/manage-your-appointments/site/${siteFromPath}/change-availability?returnUrl=${encodedReturnUrl}`}
+            className="no-print"
+            small
+            secondarySolid
+            style={{
+              marginRight: '1rem',
+            }}
+          >
+            Change availability
+          </Button>
+        )}
+        &nbsp;
         <PrintPageButton />
-      </div>
+      </ol>
 
       <Heading headingLevel="h2">
         <span className="nhsuk-caption-l">{site.name}</span>
         {fromDate.format('dddd D MMMM YYYY')}
       </Heading>
 
-      {canChangeAvailability && (
-        <Link
-          /* Inject the returnUrl into the href */
-          href={`/site/${siteFromPath}/change-availability?returnUrl=${encodedReturnUrl}`}
-          className="no-print nhsuk-u-margin-right-3"
-        >
-          <Button type="button" secondary>
-            Change availability
-          </Button>
-        </Link>
-      )}
-
       <p className="print-out-data" aria-hidden="true">
         Generated: {GetCurrentDateTime()}
       </p>