Merge pull request #1823 from isaacphysics/hotfix/button-consistency

Style cancel/confirm button pairs consistently

Author: sjd210

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

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

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

@@ -1,6 +1,5 @@
 import {AppDispatch, closeActiveModal, openActiveModal} from "../../../state";
 import {Button} from "reactstrap";
-import {siteSpecific} from "../../../services";
 import React from "react";
 
 type EmailChangeModalProps = {
@@ -38,13 +37,14 @@ export const EmailChangeModal = (props: EmailChangeModalProps) => {
         <div className="w-100">
             <Button
                 className={"float-start mb-4"}
-                color={siteSpecific("tertiary", "keyline")}
+                color={"keyline"}
                 onClick={cancel}
             >
                 Cancel
             </Button>
             <Button
                 className={"float-end mb-4"}
+                color={"solid"}
                 onClick={proceed}
             >
                 OK

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

@@ -54,14 +54,14 @@ export const additionalManagerSelfRemovalModal = (group: AppGroup, user: Registe
     buttons: [
         <Row key={0}>
             <Col>
-                <Button block color={siteSpecific("solid", "keyline")} onClick={() => {
+                <Button block color="keyline" onClick={() => {
                     store.dispatch(closeActiveModal());
                 }}>
                     Cancel
                 </Button>
             </Col>
             <Col>
-                <Button block color={siteSpecific("keyline", "solid")} onClick={() => {
+                <Button block color="solid" onClick={() => {
                     if (group.id && user.id) {
                         store.dispatch(groupsApi.endpoints.deleteGroupManager.initiate({groupId: group.id, managerUserId: user.id}));
                     }
@@ -442,10 +442,10 @@ const GroupArchiveModal = ({group, toggleArchived}: {group: AppGroup; toggleArch
         <p>Are you sure you want to archive &quot;{group.groupName}&quot;? You will no longer be able to set assignments or tests to this group, and the group will not be visible {siteSpecific(<>on the <strong>Assignment progress</strong> or <strong>Assignment schedule</strong> pages.</>, <>in the Markbook.</>)}</p>
         <p>A group can be unarchived at any time by navigating to the group in the &quot;Archived&quot; section of this page and clicking &quot;Unarchive group&quot;.</p>
         <div className="text-end">
-            <Button color="secondary" className="me-2" onClick={() => dispatch(closeActiveModal())}>
+            <Button color="keyline" className="me-2" onClick={() => dispatch(closeActiveModal())}>
                 Cancel
             </Button>
-            <Button color={siteSpecific("danger", "keyline")} onClick={() => {
+            <Button color="solid" onClick={() => {
                 toggleArchived();
                 dispatch(closeActiveModal());
             }}>

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

@@ -209,14 +209,15 @@ export function QuizSettingModal({quiz, dueDate: initialDueDate, scheduledStartD
         <div className="d-flex justify-content-between gap-4 mb-4 w-100">
             <Button
                 className={"float-start w-100 w-sm-auto"}
-                color="tertiary"
+                color="keyline"
                 disabled={isAssigning}
                 onClick={() => dispatch(closeActiveModal())}
             >
                 Close
             </Button>
             <Button
                 className={"float-end w-100 w-sm-auto"}
+                color="solid"
                 disabled={isAssigning}
             >
                 {isAssigning ? <IsaacSpinner size={"sm"} /> : "Set test"}

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

@@ -5,7 +5,7 @@ import {
     closeActiveModal,
     store
 } from "../../../state";
-import {extractTeacherName, SITE_TITLE_SHORT, siteSpecific} from "../../../services";
+import {extractTeacherName, SITE_TITLE_SHORT} from "../../../services";
 import { Table, Button } from "reactstrap";
 
 export const tokenVerificationModal = (userId: number, authToken: string, usersToGrantAccess: UserSummaryWithEmailAddressDTO[]) => {
@@ -46,10 +46,10 @@ export const tokenVerificationModal = (userId: number, authToken: string, usersT
             </p>
         </React.Fragment>,
         buttons: [
-            <Button key={1} color={siteSpecific("solid", "keyline")} onClick={() => {store.dispatch(closeActiveModal());}}>
+            <Button key={1} color="keyline" onClick={() => {store.dispatch(closeActiveModal());}}>
                 Cancel
             </Button>,
-            <Button key={0} color={siteSpecific("keyline", "solid")} onClick={() => {
+            <Button key={0} color="solid" onClick={() => {
                 store.dispatch(authorisationsApi.endpoints.authenticateWithToken.initiate(authToken))
                     .then(() => store.dispatch(closeActiveModal()));
             }}>
@@ -73,10 +73,10 @@ export const revocationConfirmationModal = (userId: number, userToRevoke: UserSu
             </p>
         </React.Fragment>,
         buttons: [
-            <Button key={1} color={siteSpecific("solid", "keyline")} onClick={() => {store.dispatch(closeActiveModal());}}>
+            <Button key={1} color="keyline" onClick={() => {store.dispatch(closeActiveModal());}}>
                 Cancel
             </Button>,
-            <Button key={0} color={siteSpecific("keyline", "solid")} onClick={() => {
+            <Button key={0} color="solid" onClick={() => {
                 store.dispatch(authorisationsApi.endpoints.revokeAuthorisation.initiate(userToRevoke.id as number))
                     .then(() => store.dispatch(closeActiveModal()));
             }}>
@@ -99,10 +99,10 @@ export const releaseConfirmationModal = (userId: number, otherUser: UserSummaryD
             </p>
         </React.Fragment>,
         buttons: [
-            <Button key={1} color={siteSpecific("solid", "keyline")} onClick={() => {store.dispatch(closeActiveModal());}}>
+            <Button key={1} color="keyline" onClick={() => {store.dispatch(closeActiveModal());}}>
                 Cancel
             </Button>,
-            <Button key={0} color={siteSpecific("keyline", "solid")} onClick={() => {
+            <Button key={0} color="solid" onClick={() => {
                 store.dispatch(authorisationsApi.endpoints.releaseAuthorisation.initiate(otherUser.id as number))
                     .then(() => store.dispatch(closeActiveModal()));
             }}>
@@ -124,10 +124,10 @@ export const releaseAllConfirmationModal = () => {
             </p>
         </React.Fragment>,
         buttons: [
-            <Button key={1} color={siteSpecific("solid", "keyline")} onClick={() => {store.dispatch(closeActiveModal());}}>
+            <Button key={1} color="keyline" onClick={() => {store.dispatch(closeActiveModal());}}>
                 Cancel
             </Button>,
-            <Button key={0} color={siteSpecific("keyline", "solid")} onClick={() => {
+            <Button key={0} color="solid" onClick={() => {
                 store.dispatch(authorisationsApi.endpoints.releaseAllAuthorisations.initiate())
                     .then(() => store.dispatch(closeActiveModal()));
             }}>
@@ -153,10 +153,10 @@ export const confirmSelfRemovalModal = (userId: number, groupId: number) => {
             </p>
         </>,
         buttons: [
-            <Button key={1} color={siteSpecific("solid", "keyline")} onClick={() => store.dispatch(closeActiveModal())}>
+            <Button key={1} color="keyline" onClick={() => store.dispatch(closeActiveModal())}>
                 Cancel
             </Button>,
-            <Button key={0} color={siteSpecific("keyline", "solid")} onClick={() => {
+            <Button key={0} color="solid" onClick={() => {
                 store.dispatch(authorisationsApi.endpoints.deleteGroupMember.initiate({groupId, userId})).then(() => {
                     store.dispatch(closeActiveModal());
                 });

src/app/components/pages/AssignmentSchedule.tsx

@@ -531,19 +531,19 @@ const AssignmentModal = ({user, showSetAssignmentUI, toggleSetAssignmentUI, assi
             }
         </Label>}
         <Row className={"mt-3"}>
+            <Col xs={12} sm={6}>
+                <Button block color="keyline" className="w-100" onClick={toggleSetAssignmentUI}>Back to schedule</Button>
+            </Col>
             <Col xs={12} sm={6}>
                 <Button
                     className="mb-2 mb-sm-0 w-100"
-                    block color={siteSpecific("keyline", "solid")}
+                    block color="solid"
                     onClick={assign}
                     disabled={selectedGroups.length === 0 || (isDefined(assignmentNotes) && assignmentNotes.length > 500) || !isDefined(selectedGameboard) || alreadyAssignedGroupNames.length === selectedGroups.length || !dueDate || dueDateInvalid}
                 >
                     Assign to group{selectedGroups.length > 1 ? "s" : ""}
                 </Button>
             </Col>
-            <Col xs={12} sm={6}>
-                <Button block color="tertiary" className="w-100" onClick={toggleSetAssignmentUI}>Back to schedule</Button>
-            </Col>
         </Row>
     </>;
 };

src/app/components/pages/RegistrationAgeCheck.tsx

@@ -102,10 +102,10 @@ export const RegistrationAgeCheck = () => {
                             {isAda && <hr/>}
                             <Row className="justify-content-end">
                                 <Col sm={siteSpecific(3,4)} lg={3} className="d-flex justify-content-end mb-1 mb-sm-0">
-                                    <Button className="w-100 h-100" color={siteSpecific("solid", "keyline")} onClick={goBack}>Back</Button>
+                                    <Button className="w-100 h-100" color="keyline" onClick={goBack}>Back</Button>
                                 </Col>
                                 <Col sm={siteSpecific(4,5)} lg={3}>
-                                    <Button type="submit" className="w-100 h-100">Continue</Button>
+                                    <Button type="submit" color="solid" className="w-100 h-100">Continue</Button>
                                 </Col>
                             </Row>
                         </Form>

src/app/components/pages/RegistrationAgeCheckParentalConsent.tsx

@@ -36,10 +36,10 @@ export const RegistrationAgeCheckParentalConsent = () => {
                         {siteSpecific(<br/>, <hr/>)}
                         <Row className="justify-content-end">
                             <Col sm={3} className="d-flex justify-content-end">
-                                <Button className="mt-2 w-100" color="solid" onClick={history.goBack}>Back</Button>
+                                <Button className="mt-2 w-100" color="keyline" onClick={history.goBack}>Back</Button>
                             </Col>
                             <Col sm={4} lg={3}>
-                                <Button className={classNames("mt-2 w-100 btn-keyline")} onClick={continueToDetails} disabled={!parentalConsentCheckboxChecked}>Continue</Button>
+                                <Button className={classNames("mt-2 w-100")} color="solid" onClick={continueToDetails} disabled={!parentalConsentCheckboxChecked}>Continue</Button>
                             </Col>
                         </Row>
                     </CardBody>

src/app/components/pages/RegistrationSetDetails.tsx

@@ -219,10 +219,10 @@ export const RegistrationSetDetails = ({role}: RegistrationSetDetailsProps) => {
                                 {isAda && <hr className="text-center"/>}
                                 <Row className="justify-content-end">
                                     <Col className="d-flex justify-content-end" xs={12} sm={siteSpecific(3,4)} lg={6}>
-                                        <Button className="mt-2 w-100" color={siteSpecific("solid", "keyline")} onClick={goBack}>Back</Button>
+                                        <Button className="mt-2 w-100" color="keyline" onClick={goBack}>Back</Button>
                                     </Col>
                                     <Col xs={12} sm={siteSpecific(4,5)} lg={6}>
-                                        <Button type="submit" value="Continue" className="mt-2 w-100">Continue</Button>
+                                        <Button type="submit" value="Continue" className="mt-2 w-100" color="solid">Continue</Button>
                                     </Col>
                                 </Row>
                             </Form>}

src/app/components/pages/RegistrationSetPreferences.tsx

@@ -119,10 +119,10 @@ export const RegistrationSetPreferences = () => {
                                 {siteSpecific(<div className="section-divider"/>, <hr/>)}
                                 <Row className="justify-content-end">
                                     <Col xs={12} sm={siteSpecific(4,5)} lg={6} className={classNames("d-flex justify-content-end", {"justify-content-lg-end": isAda})}>
-                                        <Button className={`my-2 px-2 w-100 ${siteSpecific("px-lg-0", "px-lg-3")}`}  color={siteSpecific("solid", "keyline")} onClick={() => {continueToAfterAuthPath(user);}}>I&apos;ll do this later</Button>
+                                        <Button className={`my-2 px-2 w-100 ${siteSpecific("px-lg-0", "px-lg-3")}`}  color="keyline" onClick={() => {continueToAfterAuthPath(user);}}>I&apos;ll do this later</Button>
                                     </Col>
                                     <Col xs={12} sm={5} lg={6} className="d-flex">
-                                        <Button type="submit" className={`btn my-2 px-2 w-100 ${siteSpecific("px-lg-0 btn-keyline", "px-lg-3 btn-solid")}`} disabled={!canSavePreferences}>Save preferences</Button>
+                                        <Button type="submit" className={`btn my-2 px-2 w-100 ${siteSpecific("px-lg-0", "px-lg-3")}`} color="solid" disabled={!canSavePreferences}>Save preferences</Button>
                                     </Col>
                                 </Row>
                             </Form>}