refactor: adjust all dialogs to use oak components

apps/nextjs/package.json

@@ -45,7 +45,7 @@
     "@oakai/exports": "*",
     "@oakai/logger": "*",
     "@oakai/prettier-config": "*",
-    "@oaknational/oak-components": "^1.26.0",
+    "@oaknational/oak-components": "^1.44.0",
     "@oaknational/oak-consent-client": "^2.1.0",
     "@portabletext/react": "^3.1.0",
     "@prisma/client": "5.16.1",

apps/nextjs/src/components/AppComponents/Chat/Chat/types.ts

@@ -1,7 +1,6 @@
 export type DialogTypes =
   | ""
   | "share-chat"
-  | "whats-new"
   | "feedback"
   | "report-content"
   | "sensitive-moderation-user-comment"

apps/nextjs/src/components/AppComponents/download/SectionsNotCompleteDownloadNotice.tsx

@@ -46,6 +46,7 @@ const SectionsNotCompleteDownloadNotice = ({
         $mt="space-between-s"
       >
         <OakLink
+          element="button"
           iconName={showMissingSections ? "chevron-up" : "chevron-down"}
           isTrailingIcon={true}
           onClick={() => setShowMissingSections(!showMissingSections)}

apps/nextjs/src/components/DialogControl/ContentOptions/DemoInterstitialDialog.tsx

@@ -4,18 +4,15 @@ import { aiLogger } from "@oakai/logger";
 import {
   OakFlex,
   OakLink,
+  OakP,
   OakPrimaryButton,
   OakSecondaryLink,
 } from "@oaknational/oak-components";
 import { captureMessage } from "@sentry/nextjs";
 
 import { useDemoUser } from "@/components/ContextProviders/Demo";
 
-import {
-  DialogContainer,
-  DialogContent,
-  DialogHeading,
-} from "./DemoSharedComponents";
+import { DialogContainer, DialogHeading } from "./DemoSharedComponents";
 
 const log = aiLogger("demo");
 
@@ -82,13 +79,12 @@ const CreatingChatDialog = ({
   if (appSessionsRemaining === 0) {
     return (
       <DialogContainer>
-        <DialogHeading>Lesson limit reached</DialogHeading>
-        <DialogContent>
+        <OakP>
           You have created {demo.appSessionsPerMonth} of your{" "}
           {demo.appSessionsPerMonth} lessons available this month. If you are a
           teacher in the UK, please{" "}
           <OakLink href={demo.contactHref}>contact us for full access.</OakLink>
-        </DialogContent>
+        </OakP>
 
         <OakFlex
           $width={"100%"}
@@ -105,15 +101,15 @@ const CreatingChatDialog = ({
 
   return (
     <DialogContainer>
-      <DialogHeading>
+      <OakP>
         Your {friendlyNumber(appSessionsRemaining, demo.appSessionsPerMonth)}
         demo lesson…
-      </DialogHeading>
-      <DialogContent>
+      </OakP>
+      <OakP>
         You can create {demo.appSessionsPerMonth} lessons per month. If you are
         a teacher in the UK and want to create more lessons,{" "}
         <OakLink href={demo.contactHref}>contact us for full access.</OakLink>
-      </DialogContent>
+      </OakP>
 
       <OakFlex
         $width={"100%"}

apps/nextjs/src/components/DialogControl/ContentOptions/DemoShareLockedDialog.tsx

@@ -1,3 +1,4 @@
+import { OakFlex, OakP, OakPrimaryButton } from "@oaknational/oak-components";
 import { Flex } from "@radix-ui/themes";
 
 import Button from "@/components/Button";
@@ -37,21 +38,18 @@ const DemoShareLockedDialog = ({
 
   return (
     <DialogContainer>
-      <Heading>Sharing and downloading</Heading>
-      <Content>
+      <OakP $textAlign="center">
         Share and download options are not available to users outside of the UK.
         If you are a teacher in the UK,{" "}
         <a href={demo.contactHref} className="underline">
           contact us for full access.
         </a>
-      </Content>
-
-      <div className="flex w-full items-center justify-between">
-        <div />
-        <Button variant="primary" onClick={closeDialog}>
+      </OakP>
+      <OakFlex $justifyContent="center" $width="100%" $mt="space-between-m">
+        <OakPrimaryButton onClick={closeDialog}>
           Back to lesson
-        </Button>
-      </div>
+        </OakPrimaryButton>
+      </OakFlex>
     </DialogContainer>
   );
 };

apps/nextjs/src/components/DialogControl/ContentOptions/ModalFooterButtons.tsx

@@ -0,0 +1,35 @@
+import { OakFlex, OakSpan } from "@oaknational/oak-components";
+
+import { OakLinkNoUnderline } from "@/components/OakLinkNoUnderline";
+
+const ModalFooterButtons = ({
+  closeDialog,
+  actionButtonStates,
+}: {
+  closeDialog: () => void;
+  actionButtonStates: () => JSX.Element;
+}) => {
+  return (
+    <OakFlex
+      $flexDirection="column"
+      $width="100%"
+      $justifyContent="center"
+      $alignItems="center"
+      $gap="all-spacing-3"
+      $pb="inner-padding-m"
+    >
+      {actionButtonStates()}
+      <OakLinkNoUnderline
+        onClick={() => closeDialog()}
+        element="button"
+        tabIndex={1}
+      >
+        <OakSpan $font="body-2-bold" $color="black" $textDecoration="none">
+          Cancel
+        </OakSpan>
+      </OakLinkNoUnderline>
+    </OakFlex>
+  );
+};
+
+export default ModalFooterButtons;

apps/nextjs/src/components/DialogControl/ContentOptions/ReportContentDialog.tsx

@@ -1,13 +1,21 @@
 import { useState } from "react";
 
 import { aiLogger } from "@oakai/logger";
+import {
+  OakFlex,
+  OakP,
+  OakPrimaryButton,
+  OakTextInput,
+} from "@oaknational/oak-components";
 import { Flex } from "@radix-ui/themes";
 import type { Message } from "ai";
 import { usePosthogFeedbackSurvey } from "hooks/surveys/usePosthogFeedbackSurvey";
 
 import ChatButton from "@/components/AppComponents/Chat/ui/chat-button";
 import { Icon } from "@/components/Icon";
 
+import ModalFooterButtons from "./ModalFooterButtons";
+
 const log = aiLogger("chat");
 
 type ShareChatProps = {
@@ -63,37 +71,39 @@ const ReportContentDialog = ({
           e.preventDefault();
         }}
       >
-        <Icon icon="warning" size="lg" />
         {userHasSubmitted ? (
           <>
-            <p className="text-2xl">Thank you</p>
-            <p>Your feedback has been submitted.</p>
-            <div className=" flex w-full justify-end gap-7">
-              <ChatButton variant="primary" onClick={() => closeDialog()}>
+            <OakP className="text-2xl">Thank you</OakP>
+            <OakP>Your feedback has been submitted.</OakP>
+            <OakFlex
+              $width="100%"
+              $justifyContent="flex-end"
+              $gap="all-spacing-3"
+            >
+              <OakPrimaryButton onClick={() => closeDialog()}>
                 Close
-              </ChatButton>
-            </div>
+              </OakPrimaryButton>
+            </OakFlex>
           </>
         ) : (
           <>
-            <div className="flex w-full flex-col gap-9">
-              <p className="text-2xl font-semibold">Report content</p>
-              <p className="">Please provide details below.</p>
-            </div>
-            <textarea
-              className="h-40 w-full resize-none rounded-sm border-2 border-black border-opacity-60 p-16 focus:rounded-none"
+            <OakFlex $width="100%" $flexDirection="column" $gap="all-spacing-4">
+              <OakP>Please provide details below.</OakP>
+            </OakFlex>
+            <OakTextInput
               value={userInput}
               onChange={(e) => setUserInput(e.target.value)}
+              $minHeight="all-spacing-18"
             />
 
-            <div className="flex w-full justify-between gap-7">
-              <ChatButton variant="secondary" onClick={() => close()}>
-                Back
-              </ChatButton>
-              <ChatButton variant="primary" onClick={() => onSubmit()}>
-                Submit feedback
-              </ChatButton>
-            </div>
+            <ModalFooterButtons
+              actionButtonStates={() => (
+                <OakPrimaryButton onClick={() => onSubmit()}>
+                  Submit feedback
+                </OakPrimaryButton>
+              )}
+              closeDialog={close}
+            />
           </>
         )}
       </form>

apps/nextjs/src/components/DialogControl/ContentOptions/ShareChatDialog.tsx

@@ -1,16 +1,25 @@
 import { useCallback } from "react";
 
 import type { LooseLessonPlan } from "@oakai/aila/src/protocol/schema";
-import { Flex } from "@radix-ui/themes";
+import {
+  OakBox,
+  OakFlex,
+  OakLink,
+  OakP,
+  OakPrimaryButton,
+  OakSpan,
+} from "@oaknational/oak-components";
 import * as Sentry from "@sentry/react";
+import Link from "next/link";
 
 import type { DialogTypes } from "@/components/AppComponents/Chat/Chat/types";
-import ChatButton from "@/components/AppComponents/Chat/ui/chat-button";
 import LoadingWheel from "@/components/LoadingWheel";
 import { getLessonTrackingProps } from "@/lib/analytics/helpers";
 import useAnalytics from "@/lib/analytics/useAnalytics";
 import { trpc } from "@/utils/trpc";
 
+import ModalFooterButtons from "./ModalFooterButtons";
+
 type ShareChatProps = {
   chatId: string;
   setOpenExportDialog: (open: DialogTypes) => void;
@@ -48,55 +57,54 @@ const ShareChat = ({
 
   function handleShareButtonState() {
     if (isLoading) {
-      return <LoadingWheel />;
+      return (
+        <OakFlex $justifyContent="center" $alignItems="center">
+          <LoadingWheel />
+        </OakFlex>
+      );
     } else if (isSuccess || isShared) {
       return (
-        <ChatButton
-          variant="primary"
+        <OakPrimaryButton
+          element={Link}
           href={`/aila/${chatId}/share`}
-          disabled={isLoading}
           target="_blank"
+          iconName="external"
+          isTrailingIcon={true}
         >
-          Go to share page
-        </ChatButton>
+          View share page
+        </OakPrimaryButton>
       );
     }
     return (
-      <ChatButton
-        variant="primary"
-        onClick={attemptToShareChat}
-        disabled={isLoading}
-      >
+      <OakPrimaryButton onClick={attemptToShareChat} disabled={isLoading}>
         Create shareable link
-      </ChatButton>
+      </OakPrimaryButton>
     );
   }
 
   return (
-    <Flex
+    <OakFlex
       data-testid="chat-share-dialog"
-      className="h-full w-full"
-      direction="column"
-      justify="between"
+      $width="100%"
+      $height="100%"
+      $flexDirection="column"
+      $justifyContent="space-between"
     >
-      <div>
-        <p className="mb-12 text-2xl">Share Chat</p>
-        <p className="mb-18">
-          Please be aware that while our AI lesson planning tool aims to assist
-          educators by generating educational content, it should be used as a
-          supplementary resource. The content generated by the tool should
-          always be reviewed and adapted to ensure accuracy, relevance, and
-          alignment with specific educational standards and objectives.
-        </p>
-      </div>
-      <div className="flex w-full justify-end gap-7">
-        <ChatButton variant="secondary" onClick={() => closeDialog()}>
-          Cancel
-        </ChatButton>
-        {handleShareButtonState()}
-      </div>
+      <OakBox>
+        <OakP $textAlign="center" $mb={"space-between-l"}>
+          Content generated by Aila should be reviewed and adapted to ensure
+          accuracy and relevance before sharing.
+          <br />
+          <br /> If you make any updates to this lesson, the share page content
+          will also update.
+        </OakP>
+      </OakBox>
+      <ModalFooterButtons
+        closeDialog={closeDialog}
+        actionButtonStates={handleShareButtonState}
+      />
       {isError && <p>There was an error sharing the chat.</p>}
-    </Flex>
+    </OakFlex>
   );
 };