Skip to content

Commit 488bc6b

Browse files
sjd210sjd210
authored
Merge pull request #1470 from isaacphysics/redesign/button-styling
Use new button styles sitewide
2 parents 4e241bc + a9d34a4 commit 488bc6b

File tree

73 files changed

+151
-160
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

73 files changed

+151
-160
lines changed

‎src/app/components/elements/ConceptGameboardButton.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export interface ConceptGameboardButtonProps {
1010

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

‎src/app/components/elements/GoogleSignInButton.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ export const GoogleSignInButton = () => {
1111
dispatch(handleProviderLoginRedirect("GOOGLE"));
1212
};
1313

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

‎src/app/components/elements/LLMFreeTextQuestionFeedbackView.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ export default function LLMFreeTextQuestionFeedbackView({validationResponse, has
8484
</li>
8585
</ul>
8686
<Button
87-
color="primary" outline disabled={Object.values(feedback).every(a => !a)}
87+
color="keyline" disabled={Object.values(feedback).every(a => !a)}
8888
onClick={() => {
8989
dispatch(logAction({type: "LLM_FREE_TEXT_QUESTION_FEEDBACK", events: {...validationResponse, pageId, userFeedback: feedback}}));
9090
setSentFeedback(true);

‎src/app/components/elements/RaspberryPiSignInButton.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export const RaspberryPiSignInButton = ({isSignup, concise}: {isSignup?: boolean
99
dispatch(handleProviderLoginRedirect("RASPBERRYPI", isSignup));
1010
};
1111

12-
return <Button className={"position-relative"} block outline color="primary" onClick={logInWithRaspberryPi}>
12+
return <Button className={"position-relative"} block color="keyline" onClick={logInWithRaspberryPi}>
1313
<img className="rpf-button-logo" src={"/assets/common/logos/raspberry-pi.png"} alt={"Raspberry Pi logo"}/>
1414
{
1515
concise ?

‎src/app/components/elements/ShareLink.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, {useEffect, useRef, useState} from "react";
2-
import {isAda, isMobile, isPhy, isTutorOrAbove, PATHS, siteSpecific, useOutsideCallback} from "../../services";
2+
import {isMobile, isPhy, isTutorOrAbove, PATHS, siteSpecific, useOutsideCallback} from "../../services";
33
import {selectors, useAppSelector} from "../../state";
44
import classNames from "classnames";
55
import { IconButton } from "./AffixButton";
@@ -62,7 +62,7 @@ export const ShareLink = ({linkUrl, reducedWidthLink, gameboardId, clickAwayClos
6262
data-bs-theme="neutral"
6363
onClick={(e) => { e.preventDefault(); toggleShareLink(); }}
6464
/>,
65-
<button className={siteSpecific("btn-action", classNames("btn btn-primary", {"outline": outline}))} onClick={(e) => {e.preventDefault(); toggleShareLink();}} aria-label={buttonAriaLabel} />
65+
<button className={siteSpecific("btn-action", classNames("btn btn-solid", {"outline": outline}))} onClick={(e) => {e.preventDefault(); toggleShareLink();}} aria-label={buttonAriaLabel} />
6666
)}
6767
</div>;
6868
};

‎src/app/components/elements/StudentDashboard.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ const GroupJoinPanel = () => {
3636
e.preventDefault();
3737
}}}
3838
/>
39-
<Button onClick={processToken} outline color="secondary">
39+
<Button onClick={processToken} color="solid">
4040
Connect
4141
</Button>
4242
</InputGroup>

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -224,7 +224,7 @@ export const BoardCard = ({user, board, boardView, assignees, toggleAssignModal,
224224
{isAda && <td className={basicCellClasses} data-testid={"owner"}>{formatBoardOwner(user, board)}</td>}
225225
<td className={basicCellClasses} data-testid={"last-visited"}>{formatDate(board.lastVisited)}</td>
226226
<td className={"align-middle text-center"}>
227-
<Button className="set-assignments-button" color={siteSpecific("tertiary", "secondary")} size="sm" onClick={toggleAssignModal}>
227+
<Button className="set-assignments-button" color={siteSpecific("tertiary", "solid")} size="sm" onClick={toggleAssignModal}>
228228
Assign{hasAssignedGroups && "\u00a0/ Unassign"}
229229
</Button>
230230
</td>
@@ -234,7 +234,7 @@ export const BoardCard = ({user, board, boardView, assignees, toggleAssignModal,
234234
</div>
235235
</td>}
236236
{isAda && <td className={basicCellClasses}>
237-
<Button outline color={"secondary"} className={"bin-icon d-inline-block outline"} onClick={confirmDeleteBoard} aria-label="Delete quiz"/>
237+
<Button color="keyline" className={"bin-icon d-inline-block outline"} onClick={confirmDeleteBoard} aria-label="Delete quiz"/>
238238
</td>}
239239
</>
240240
:
@@ -265,7 +265,7 @@ export const BoardCard = ({user, board, boardView, assignees, toggleAssignModal,
265265
</td>}
266266
{siteSpecific(
267267
<td className={"text-center align-middle"}>
268-
<Button outline color="primary" className={"bin-icon d-inline-block outline"} style={{
268+
<Button outline color="solid" className={"bin-icon d-inline-block outline"} style={{
269269
width: "20px",
270270
minWidth: "20px",
271271
}} onClick={confirmDeleteBoard} aria-label="Delete quiz"/>
@@ -348,8 +348,8 @@ export const BoardCard = ({user, board, boardView, assignees, toggleAssignModal,
348348
</Row>
349349
<CardFooter className={"text-end p-3 mt-3"}>
350350
<ShareLink outline linkUrl={boardLink} gameboardId={board.id} reducedWidthLink clickAwayClose className={"d-inline-block"} />
351-
<Button outline color={"secondary"} className={"me-0 bin-icon d-inline-block outline"} onClick={confirmDeleteBoard} aria-label="Delete quiz"/>
352-
{isSetAssignments && <Button className={"d-block w-100 assign-button"} color="secondary" onClick={toggleAssignModal}>
351+
<Button color="keyline" className={"me-0 bin-icon d-inline-block outline"} onClick={confirmDeleteBoard} aria-label="Delete quiz"/>
352+
{isSetAssignments && <Button className={"d-block w-100 assign-button"} color="solid" onClick={toggleAssignModal}>
353353
Assign{hasAssignedGroups && " / Unassign"}
354354
</Button>}
355355
</CardFooter>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@ export const ConfidenceQuestions = ({state, setState, validationPending, setVali
159159
{state === "initial" && <div className={"d-flex"}>
160160
<h4 className={classNames({"text-muted": disabled && isAda})}>{confidenceVariables?.title}</h4>
161161
<div className="ms-2 mt-n1 not-mobile">
162-
<Button outline={isPhy} color="primary" className={"confidence-help"} size="sm"
162+
<Button outline={isPhy} color="solid" className={"confidence-help"} size="sm"
163163
onClick={() => dispatch(confidenceInformationModal())}
164164
>
165165
{
@@ -175,7 +175,7 @@ export const ConfidenceQuestions = ({state, setState, validationPending, setVali
175175
</Row>
176176
<Row className={"justify-content-center"}>
177177
{confidenceStateVariables.options.map(option => <Col key={option.label} xl={4} size={12} className={classNames("mb-2")}>
178-
<Button outline={isAda} color={isAda ? "secondary" : option.color} disabled={disabled} block
178+
<Button color={isAda ? "keyline" : option.color} disabled={disabled} block
179179
className={classNames({"active": isPhy && state === "followUp"})} type="submit"
180180
onClick={() => toggle(option.label, state)}
181181
>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@ export const SchoolInput = ({userToUpdate, setUserToUpdate, submissionAttempted,
133133
<StyledCheckbox
134134
type="checkbox" id={`${idPrefix}-not-associated-with-school`}
135135
checked={userToUpdate.schoolOther === NOT_APPLICABLE}
136-
color={siteSpecific("primary", "")}
136+
color="solid"
137137
invalid={isInvalid}
138138
disabled={disableInput || !setUserToUpdate}
139139
onChange={(e => {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -196,7 +196,7 @@ export function UserContextAccountInput({
196196
{isAda && <>
197197
{tutorOrAbove &&
198198
<Col lg={6} className="p-0 pe-4 pe-lg-0">
199-
<Button color="primary" outline className="mb-3 px-2 w-100"
199+
<Button color="keyline" className="mb-3 px-2 w-100"
200200
onClick={() => setUserContexts([...userContexts, {}])}
201201
disabled={!validateUserContexts(userContexts)}>
202202
Add more content

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ const LinkTags = ({linkTags, disabled}: LinkTagProps) => {
6363
const QuizLinks = (props: React.HTMLAttributes<HTMLSpanElement> & {previewQuizUrl?: string, quizButton?: ReactNode}) => {
6464
const { previewQuizUrl, quizButton, ...rest } = props;
6565
return <span {...rest} className={classNames(rest.className, "d-flex justify-content-end gap-3")}>
66-
{previewQuizUrl && <Button to={previewQuizUrl} color={siteSpecific("keyline", "secondary")} tag={Link} className="set-quiz-button-md">
66+
{previewQuizUrl && <Button to={previewQuizUrl} color={siteSpecific("keyline", "solid")} tag={Link} className="set-quiz-button-md">
6767
{previewQuizUrl.includes("/preview/") ? "Preview" : "View test"}
6868
</Button>}
6969
{quizButton}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -107,10 +107,10 @@ export const QuizListViewItem = ({item, isQuizSetter, useViewQuizLink, ...rest}:
107107
const dispatch = useAppDispatch();
108108
const itemSubject = tags.getSpecifiedTag(TAG_LEVEL.subject, item.tags as TAG_ID[])?.id as Subject;
109109
const quizButton = isQuizSetter ?
110-
<AffixButton size="md" color={siteSpecific("solid", "primary")} onClick={() => (dispatch(showQuizSettingModal(item)))} affix={{ affix: "icon-right", position: "suffix", type: "icon" }}>
110+
<AffixButton size="md" color="solid" onClick={() => (dispatch(showQuizSettingModal(item)))} affix={{ affix: "icon-right", position: "suffix", type: "icon" }}>
111111
Set test
112112
</AffixButton> :
113-
<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" }}>
113+
<AffixButton size="md" color="solid" to={`/${documentTypePathPrefix[DOCUMENT_TYPE.QUIZ]}/attempt/${item.id}`} tag={Link} affix={{ affix: "icon-right", position: "suffix", type: "icon" }}>
114114
Take the test
115115
</AffixButton>;
116116

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export const ConfirmAccountDeletionRequestModal = (confirmAccountDeletionRequest
99
title: siteSpecific("Delete Account", "Delete account"),
1010
body: <PageFragment fragmentId="account_deletion_email_confirmation_notice" />,
1111
buttons: [
12-
<Button key={0} block color="primary" onClick={() => {confirmAccountDeletionRequest();}}>
12+
<Button key={0} block color="solid" onClick={() => {confirmAccountDeletionRequest();}}>
1313
Confirm via email
1414
</Button>,
1515
<Button key={1} block color="tertiary" onClick={() => {store.dispatch(closeActiveModal());}}>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export const downloadLinkModal = (link: string) => {
1111
title: "Privacy Notice",
1212
body: <PageFragment fragmentId="csv_download_notice" />,
1313
buttons: [
14-
<Button key={0} block color="primary" tag="a" href={link} target="_blank" onClick={() => {store.dispatch(closeActiveModal());}}>
14+
<Button key={0} block color="solid" tag="a" href={link} target="_blank" onClick={() => {store.dispatch(closeActiveModal());}}>
1515
Download CSV
1616
</Button>,
1717
]

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,15 +32,15 @@ const GameboardCreatedModalButtons = ({gameboardId, resetBuilder}: {gameboardId:
3232
</Col>
3333
<Col sm={12} lg={siteSpecific("auto", 4)} className="mb-1">
3434
<Button
35-
className="w-100" color={siteSpecific("secondary", "primary")} outline={isAda}
35+
className="w-100" color="keyline"
3636
onClick={() => {resetBuilder(); closeModal();}}
3737
>
3838
Create another {siteSpecific("question deck", "quiz")}
3939
</Button>
4040
</Col>
4141
<Col sm={12} lg={siteSpecific("auto", 4)} className="mb-1">
4242
<Button
43-
className="w-100" tag={Link} to={PATHS.SET_ASSIGNMENTS} color={siteSpecific("secondary", "primary")} outline={isAda}
43+
className="w-100" tag={Link} to={PATHS.SET_ASSIGNMENTS} color="keyline"
4444
onClick={closeModal}
4545
>
4646
View all of your {siteSpecific("question decks", "quizzes")}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,14 +37,14 @@ export const additionalManagerSelfRemovalModal = (group: AppGroup, user: Registe
3737
buttons: [
3838
<Row key={0}>
3939
<Col>
40-
<Button block outline color="primary" onClick={() => {
40+
<Button block color={siteSpecific("solid", "keyline")} onClick={() => {
4141
store.dispatch(closeActiveModal());
4242
}}>
4343
Cancel
4444
</Button>
4545
</Col>
4646
<Col>
47-
<Button block color="secondary" onClick={() => {
47+
<Button block color={siteSpecific("keyline", "solid")} onClick={() => {
4848
if (group.id && user.id) {
4949
store.dispatch(groupsApi.endpoints.deleteGroupManager.initiate({groupId: group.id, managerUserId: user.id}));
5050
}
@@ -251,7 +251,7 @@ Are you sure you want to promote this manager to group owner?\n
251251
<span className="icon-group-table-person" />{manager.givenName} {manager.familyName} {user.id === manager.id && <span className={"text-muted"}>(you)</span>} ({manager.email})
252252
</td>
253253
{userIsOwner && <td className={"text-center"}>
254-
<Button outline={isAda} className="d-none d-sm-inline" size="sm" color={siteSpecific("tertiary", "secondary")} onClick={() => promoteManager(manager)}>
254+
<Button className="d-none d-sm-inline" size="sm" color={siteSpecific("tertiary", "keyline")} onClick={() => promoteManager(manager)}>
255255
Make owner
256256
</Button>
257257
</td>}

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ const LoginOrSignUpBody = () => {
4949
<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>
5050
<br/>
5151
<p>Alternatively, you can</p>
52-
<Button size={"sm"} color={"primary"} style={{backgroundColor: siteSpecific("#ffffff66","#ffffff99")}} outline onClick={closeModal} block>
52+
<Button size={"sm"} color="keyline" onClick={closeModal} block>
5353
Continue without an account
5454
</Button>
5555
</div>
@@ -88,15 +88,15 @@ const LoginOrSignUpBody = () => {
8888
<Button
8989
id="log-in"
9090
tag="input" value="Log in"
91-
color="secondary" type="submit" block
91+
color="solid" type="submit" block
9292
className="mb-2"
9393
onClick={attemptLogIn}
9494
disabled={!!user?.requesting}
9595
/>
9696

97-
<Button id="sign-up" color="primary" onClick={(e) => {
97+
<Button id="sign-up" color="keyline" onClick={(e) => {
9898
closeModal(); signUp(e);
99-
}} outline block>
99+
}} block>
100100
Sign up
101101
</Button>
102102

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -179,7 +179,7 @@ export const QuestionSearchModal = (
179179
type="button"
180180
value={siteSpecific("Add Selections to Question Deck", "Add selections to quiz")}
181181
disabled={isEqual(new Set(modalQuestions.selectedQuestions.keys()), new Set(currentQuestions.selectedQuestions.keys()))}
182-
className={classNames("btn w-100 h-100", siteSpecific("btn-keyline", "btn-secondary border-0"))}
182+
className={classNames("btn w-100 h-100", siteSpecific("btn-keyline", "btn-solid border-0"))}
183183
onClick={() => {
184184
undoStack.push({questionOrder: currentQuestions.questionOrder, selectedQuestions: currentQuestions.selectedQuestions});
185185
currentQuestions.setSelectedQuestions(modalQuestions.selectedQuestions);

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -304,7 +304,7 @@ const ReservationsModal = ({event} :{event: AugmentedEvent}) => {
304304
</Table>
305305

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

0 commit comments

Comments
 (0)