Use new button styles sitewide

src/app/components/elements/ConceptGameboardButton.tsx

@@ -10,7 +10,7 @@ export interface ConceptGameboardButtonProps {
 
 // Currently PHY doesn't use this
 export const ConceptGameboardButton = ({conceptId, className} : ConceptGameboardButtonProps) => {
-    return <Link className={classNames(className, "btn btn-sm btn-primary")} to={`${PATHS.GAMEBOARD_BUILDER}?concepts=${conceptId}`} >
+    return <Link className={classNames(className, "btn btn-sm btn-solid")} to={`${PATHS.GAMEBOARD_BUILDER}?concepts=${conceptId}`} >
         Generate a {siteSpecific("question deck", "quiz")}
     </Link>;
 };

src/app/components/elements/GoogleSignInButton.tsx

@@ -11,7 +11,8 @@ export const GoogleSignInButton = () => {
         dispatch(handleProviderLoginRedirect("GOOGLE"));
     };
 
-    return <Button className={"position-relative"} block outline color={siteSpecific("primary", undefined)} style={siteSpecific({borderWidth: "1px"}, {borderColor: "black", color: "black"})} onClick={logInWithGoogle}>
+    // This can't use btn-keyline because we don't want the keyline hover behaviour
+    return <Button className={"position-relative"} block outline color={siteSpecific("primary", undefined)} style={siteSpecific({borderColor: "#545461", borderWidth: "1.5px"}, {borderColor: "black", color: "black"})} onClick={logInWithGoogle}>
         <img className="google-button-logo" src={"/assets/common/logos/google-logo.svg"} height={siteSpecific("20px", "auto")} alt={"Google logo"}/>Google
     </Button>;
 };

src/app/components/elements/LLMFreeTextQuestionFeedbackView.tsx

@@ -84,7 +84,7 @@ export default function LLMFreeTextQuestionFeedbackView({validationResponse, has
                         </li>
                     </ul>
                     <Button
-                        color="primary" outline disabled={Object.values(feedback).every(a => !a)}
+                        color="keyline" disabled={Object.values(feedback).every(a => !a)}
                         onClick={() => {
                             dispatch(logAction({type: "LLM_FREE_TEXT_QUESTION_FEEDBACK", events: {...validationResponse, pageId, userFeedback: feedback}}));
                             setSentFeedback(true);

src/app/components/elements/RaspberryPiSignInButton.tsx

@@ -9,7 +9,7 @@ export const RaspberryPiSignInButton = ({isSignup, concise}: {isSignup?: boolean
         dispatch(handleProviderLoginRedirect("RASPBERRYPI", isSignup));
     };
 
-    return <Button className={"position-relative"} block outline color="primary" onClick={logInWithRaspberryPi}>
+    return <Button className={"position-relative"} block color="keyline" onClick={logInWithRaspberryPi}>
         <img className="rpf-button-logo" src={"/assets/common/logos/raspberry-pi.png"} alt={"Raspberry Pi logo"}/>
         {
             concise ?

src/app/components/elements/ShareLink.tsx

@@ -1,5 +1,5 @@
 import React, {useEffect, useRef, useState} from "react";
-import {isAda, isMobile, isPhy, isTutorOrAbove, PATHS, siteSpecific, useOutsideCallback} from "../../services";
+import {isMobile, isPhy, isTutorOrAbove, PATHS, siteSpecific, useOutsideCallback} from "../../services";
 import {selectors, useAppSelector} from "../../state";
 import classNames from "classnames";
 import { IconButton } from "./AffixButton";
@@ -62,7 +62,7 @@ export const ShareLink = ({linkUrl, reducedWidthLink, gameboardId, clickAwayClos
                 data-bs-theme="neutral"
                 onClick={(e) => { e.preventDefault(); toggleShareLink(); }}
             />,
-            <button className={siteSpecific("btn-action", classNames("btn btn-primary", {"outline": outline}))} onClick={(e) => {e.preventDefault(); toggleShareLink();}} aria-label={buttonAriaLabel} />
+            <button className={siteSpecific("btn-action", classNames("btn btn-solid", {"outline": outline}))} onClick={(e) => {e.preventDefault(); toggleShareLink();}} aria-label={buttonAriaLabel} />
         )}
     </div>;
 };

src/app/components/elements/StudentDashboard.tsx

@@ -36,7 +36,7 @@ const GroupJoinPanel = () => {
                     e.preventDefault();
                 }}}
             />
-            <Button onClick={processToken} outline color="secondary">
+            <Button onClick={processToken} color="solid">
                 Connect
             </Button>
         </InputGroup>

src/app/components/elements/cards/BoardCard.tsx

@@ -224,7 +224,7 @@ export const BoardCard = ({user, board, boardView, assignees, toggleAssignModal,
                 {isAda && <td className={basicCellClasses} data-testid={"owner"}>{formatBoardOwner(user, board)}</td>}
                 <td className={basicCellClasses} data-testid={"last-visited"}>{formatDate(board.lastVisited)}</td>
                 <td className={"align-middle text-center"}>
-                    <Button className="set-assignments-button" color={siteSpecific("tertiary", "secondary")} size="sm" onClick={toggleAssignModal}>
+                    <Button className="set-assignments-button" color={siteSpecific("tertiary", "solid")} size="sm" onClick={toggleAssignModal}>
                         Assign{hasAssignedGroups && "\u00a0/ Unassign"}
                     </Button>
                 </td>
@@ -234,7 +234,7 @@ export const BoardCard = ({user, board, boardView, assignees, toggleAssignModal,
                     </div>
                 </td>}
                 {isAda && <td className={basicCellClasses}>
-                    <Button outline color={"secondary"} className={"bin-icon d-inline-block outline"} onClick={confirmDeleteBoard} aria-label="Delete quiz"/>
+                    <Button color="keyline" className={"bin-icon d-inline-block outline"} onClick={confirmDeleteBoard} aria-label="Delete quiz"/>
                 </td>}
             </> 
                 : 
@@ -265,7 +265,7 @@ export const BoardCard = ({user, board, boardView, assignees, toggleAssignModal,
                     </td>}
                     {siteSpecific(
                         <td className={"text-center align-middle"}>
-                            <Button outline color="primary" className={"bin-icon d-inline-block outline"} style={{
+                            <Button outline color="solid" className={"bin-icon d-inline-block outline"} style={{
                                 width: "20px",
                                 minWidth: "20px",
                             }} onClick={confirmDeleteBoard} aria-label="Delete quiz"/>
@@ -348,8 +348,8 @@ export const BoardCard = ({user, board, boardView, assignees, toggleAssignModal,
                     </Row>
                     <CardFooter className={"text-end p-3 mt-3"}>
                         <ShareLink outline linkUrl={boardLink} gameboardId={board.id} reducedWidthLink clickAwayClose className={"d-inline-block"} />
-                        <Button outline color={"secondary"} className={"me-0 bin-icon d-inline-block outline"} onClick={confirmDeleteBoard} aria-label="Delete quiz"/>
-                        {isSetAssignments && <Button className={"d-block w-100 assign-button"} color="secondary" onClick={toggleAssignModal}>
+                        <Button color="keyline" className={"me-0 bin-icon d-inline-block outline"} onClick={confirmDeleteBoard} aria-label="Delete quiz"/>
+                        {isSetAssignments && <Button className={"d-block w-100 assign-button"} color="solid" onClick={toggleAssignModal}>
                             Assign{hasAssignedGroups && " / Unassign"}
                         </Button>}
                     </CardFooter>

src/app/components/elements/inputs/ConfidenceQuestions.tsx

@@ -159,7 +159,7 @@ export const ConfidenceQuestions = ({state, setState, validationPending, setVali
         {state === "initial" && <div className={"d-flex"}>
             <h4 className={classNames({"text-muted": disabled && isAda})}>{confidenceVariables?.title}</h4>
             <div className="ms-2 mt-n1 not-mobile">
-                <Button outline={isPhy} color="primary" className={"confidence-help"} size="sm"
+                <Button outline={isPhy} color="solid" className={"confidence-help"} size="sm"
                     onClick={() => dispatch(confidenceInformationModal())}
                 >
                     {
@@ -175,7 +175,7 @@ export const ConfidenceQuestions = ({state, setState, validationPending, setVali
         </Row>
         <Row className={"justify-content-center"}>
             {confidenceStateVariables.options.map(option => <Col key={option.label} xl={4} size={12} className={classNames("mb-2")}>
-                <Button outline={isAda} color={isAda ? "secondary" : option.color} disabled={disabled} block
+                <Button color={isAda ? "keyline" : option.color} disabled={disabled} block
                     className={classNames({"active": isPhy && state === "followUp"})} type="submit"
                     onClick={() => toggle(option.label, state)}
                 >

src/app/components/elements/inputs/SchoolInput.tsx

@@ -133,7 +133,7 @@ export const SchoolInput = ({userToUpdate, setUserToUpdate, submissionAttempted,
             <StyledCheckbox
                 type="checkbox" id={`${idPrefix}-not-associated-with-school`}
                 checked={userToUpdate.schoolOther === NOT_APPLICABLE}
-                color={siteSpecific("primary", "")}
+                color="solid"
                 invalid={isInvalid}
                 disabled={disableInput || !setUserToUpdate}
                 onChange={(e => {

src/app/components/elements/inputs/UserContextAccountInput.tsx

@@ -196,7 +196,7 @@ export function UserContextAccountInput({
             {isAda && <>
                 {tutorOrAbove &&
                     <Col lg={6} className="p-0 pe-4 pe-lg-0">
-                        <Button color="primary" outline className="mb-3 px-2 w-100"
+                        <Button color="keyline" className="mb-3 px-2 w-100"
                             onClick={() => setUserContexts([...userContexts, {}])}
                             disabled={!validateUserContexts(userContexts)}>
                             Add more content

src/app/components/elements/list-groups/AbstractListViewItem.tsx

@@ -58,7 +58,7 @@ const LinkTags = ({linkTags}: {linkTags: ListViewTagProps[];}) => {
 const QuizLinks = (props: React.HTMLAttributes<HTMLSpanElement> & {previewQuizUrl?: string, quizButton?: ReactNode}) => {
     const { previewQuizUrl, quizButton, ...rest } = props;
     return <span {...rest} className={classNames(rest.className, "d-flex justify-content-end gap-3")}>
-        {previewQuizUrl && <Button to={previewQuizUrl} color={siteSpecific("keyline", "secondary")} tag={Link} className="set-quiz-button-md">
+        {previewQuizUrl && <Button to={previewQuizUrl} color={siteSpecific("keyline", "solid")} tag={Link} className="set-quiz-button-md">
             {previewQuizUrl.includes("/preview/") ? "Preview" : "View test"}
         </Button>}
         {quizButton}

src/app/components/elements/list-groups/ListView.tsx

@@ -105,10 +105,10 @@ export const QuizListViewItem = ({item, isQuizSetter, useViewQuizLink, ...rest}:
     const dispatch = useAppDispatch();
     const itemSubject = tags.getSpecifiedTag(TAG_LEVEL.subject, item.tags as TAG_ID[])?.id as Subject;
     const quizButton = isQuizSetter ? 
-        <AffixButton size="md" color={siteSpecific("solid", "primary")} onClick={() => (dispatch(showQuizSettingModal(item)))} affix={{ affix: "icon-right", position: "suffix", type: "icon" }}>
+        <AffixButton size="md" color="solid" onClick={() => (dispatch(showQuizSettingModal(item)))} affix={{ affix: "icon-right", position: "suffix", type: "icon" }}>
             Set test
         </AffixButton> :
-        <AffixButton size="md" color={siteSpecific("solid", "primary")} to={`/${documentTypePathPrefix[DOCUMENT_TYPE.QUIZ]}/attempt/${item.id}`} tag={Link} affix={{ affix: "icon-right", position: "suffix", type: "icon" }}>
+        <AffixButton size="md" color="solid" to={`/${documentTypePathPrefix[DOCUMENT_TYPE.QUIZ]}/attempt/${item.id}`} tag={Link} affix={{ affix: "icon-right", position: "suffix", type: "icon" }}>
             Take the test
         </AffixButton>;
 

src/app/components/elements/modals/AccountDeletionModal.tsx

@@ -9,7 +9,7 @@ export const ConfirmAccountDeletionRequestModal = (confirmAccountDeletionRequest
         title: siteSpecific("Delete Account", "Delete account"),
         body: <PageFragment fragmentId="account_deletion_email_confirmation_notice" />,
         buttons: [
-            <Button key={0} block color="primary" onClick={() => {confirmAccountDeletionRequest();}}>
+            <Button key={0} block color="solid" onClick={() => {confirmAccountDeletionRequest();}}>
                 Confirm via email
             </Button>,
             <Button key={1} block color="tertiary" onClick={() => {store.dispatch(closeActiveModal());}}>

src/app/components/elements/modals/AssignmentProgressModalCreators.tsx

@@ -11,7 +11,7 @@ export const downloadLinkModal = (link: string) => {
         title: "Privacy Notice",
         body: <PageFragment fragmentId="csv_download_notice" />,
         buttons: [
-            <Button key={0} block color="primary" tag="a"  href={link} target="_blank" onClick={() => {store.dispatch(closeActiveModal());}}>
+            <Button key={0} block color="solid" tag="a"  href={link} target="_blank" onClick={() => {store.dispatch(closeActiveModal());}}>
                 Download CSV
             </Button>,
         ]

src/app/components/elements/modals/GameboardCreatedModal.tsx

@@ -32,15 +32,15 @@ const GameboardCreatedModalButtons = ({gameboardId, resetBuilder}: {gameboardId:
         </Col>
         <Col sm={12} lg={siteSpecific("auto", 4)} className="mb-1">
             <Button
-                className="w-100" color={siteSpecific("secondary", "primary")} outline={isAda}
+                className="w-100" color="keyline"
                 onClick={() => {resetBuilder(); closeModal();}}
             >
                 Create another {siteSpecific("question deck", "quiz")}
             </Button>
         </Col>
         <Col sm={12} lg={siteSpecific("auto", 4)} className="mb-1">
             <Button
-                className="w-100" tag={Link} to={PATHS.SET_ASSIGNMENTS} color={siteSpecific("secondary", "primary")} outline={isAda}
+                className="w-100" tag={Link} to={PATHS.SET_ASSIGNMENTS} color="keyline"
                 onClick={closeModal}
             >
                 View all of your {siteSpecific("question decks", "quizzes")}

src/app/components/elements/modals/GroupsModalCreators.tsx

@@ -37,14 +37,14 @@ export const additionalManagerSelfRemovalModal = (group: AppGroup, user: Registe
     buttons: [
         <Row key={0}>
             <Col>
-                <Button block outline color="primary" onClick={() => {
+                <Button block color={siteSpecific("solid", "keyline")} onClick={() => {
                     store.dispatch(closeActiveModal());
                 }}>
                     Cancel
                 </Button>
             </Col>
             <Col>
-                <Button block color="secondary" onClick={() => {
+                <Button block color={siteSpecific("keyline", "solid")} onClick={() => {
                     if (group.id && user.id) {
                         store.dispatch(groupsApi.endpoints.deleteGroupManager.initiate({groupId: group.id, managerUserId: user.id}));
                     }
@@ -251,7 +251,7 @@ Are you sure you want to promote this manager to group owner?\n
                             <span className="icon-group-table-person" />{manager.givenName} {manager.familyName} {user.id === manager.id && <span className={"text-muted"}>(you)</span>} ({manager.email})
                         </td>
                         {userIsOwner && <td className={"text-center"}>
-                            <Button outline={isAda} className="d-none d-sm-inline" size="sm" color={siteSpecific("tertiary", "secondary")} onClick={() => promoteManager(manager)}>
+                            <Button className="d-none d-sm-inline" size="sm" color={siteSpecific("tertiary", "keyline")} onClick={() => promoteManager(manager)}>
                                 Make owner
                             </Button>
                         </td>}

src/app/components/elements/modals/LoginOrSignUpModal.tsx

@@ -49,7 +49,7 @@ const LoginOrSignUpBody = () => {
                 <p>You need to be logged in to your account to <b>save your answers and progress</b>. If you don&apos;t have an account, you can <b>sign up today for free</b>.</p>
                 <br/>
                 <p>Alternatively, you can</p>
-                <Button size={"sm"} color={"primary"} style={{backgroundColor: siteSpecific("#ffffff66","#ffffff99")}} outline onClick={closeModal} block>
+                <Button size={"sm"} color="keyline" onClick={closeModal} block>
                     Continue without an account
                 </Button>
             </div>
@@ -88,15 +88,15 @@ const LoginOrSignUpBody = () => {
                         <Button
                             id="log-in"
                             tag="input" value="Log in"
-                            color="secondary" type="submit" block
+                            color="solid" type="submit" block
                             className="mb-2"
                             onClick={attemptLogIn}
                             disabled={!!user?.requesting}
                         />
 
-                        <Button id="sign-up" color="primary" onClick={(e) => {
+                        <Button id="sign-up" color="keyline" onClick={(e) => {
                             closeModal(); signUp(e);
-                        }} outline block>
+                        }} block>
                             Sign up
                         </Button>
 

src/app/components/elements/modals/QuestionSearchModal.tsx

@@ -179,7 +179,7 @@ export const QuestionSearchModal = (
                 type="button"
                 value={siteSpecific("Add Selections to Question Deck", "Add selections to quiz")}
                 disabled={isEqual(new Set(modalQuestions.selectedQuestions.keys()), new Set(currentQuestions.selectedQuestions.keys()))}
-                className={classNames("btn w-100 h-100", siteSpecific("btn-keyline", "btn-secondary border-0"))}
+                className={classNames("btn w-100 h-100", siteSpecific("btn-keyline", "btn-solid border-0"))}
                 onClick={() => {
                     undoStack.push({questionOrder: currentQuestions.questionOrder, selectedQuestions: currentQuestions.selectedQuestions});
                     currentQuestions.setSelectedQuestions(modalQuestions.selectedQuestions);

src/app/components/elements/modals/ReservationsModal.tsx

@@ -304,7 +304,7 @@ const ReservationsModal = ({event} :{event: AugmentedEvent}) => {
                             </Table>
 
                             <div className="text-center mb-3">
-                                <Button color="primary" outline disabled={!Object.values(cancelReservationCheckboxes).some(v => v)} onClick={cancelReservations}>
+                                <Button color="keyline" disabled={!Object.values(cancelReservationCheckboxes).some(v => v)} onClick={cancelReservations}>
                                     Cancel reservations
                                 </Button>
                             </div>
@@ -400,7 +400,7 @@ const ReservationsModal = ({event} :{event: AugmentedEvent}) => {
                                         You can only reserve a maximum of {event.groupReservationLimit} group members onto this event.
                                     </p>}
                                     <div className="text-center">
-                                        <Button color="primary" disabled={!allowedToReserve} onClick={requestReservations}>
+                                        <Button color="solid" disabled={!allowedToReserve} onClick={requestReservations}>
                                             Reserve places
                                         </Button>
                                     </div>