Skip to content

Commit 5180147

Browse files
axlewinaxlewin
committed
Use new button styles sitewide
(Phy): prefer `solid` and `keyline` over `primary` and `secondary`
1 parent f9c08fa commit 5180147

26 files changed

+58
-59
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react";
22
import {Button} from "reactstrap";
33
import {handleProviderLoginRedirect, useAppDispatch} from "../../state";
4-
import {siteSpecific} from "../../services";
4+
import {isAda, siteSpecific} from "../../services";
55

66
// Button prompting the user to sign in via Google
77
export const GoogleSignInButton = () => {
@@ -11,7 +11,7 @@ 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+
return <Button className={"position-relative"} block outline={isAda} color={siteSpecific("keyline", undefined)} style={siteSpecific({borderWidth: "1px"}, {borderColor: "black", color: "black"})} onClick={logInWithGoogle}>
1515
<img className="google-button-logo" src={"/assets/common/logos/google-logo.svg"} height={siteSpecific("20px", "auto")} alt={"Google logo"}/>Google
1616
</Button>;
1717
};

‎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="primary">
4040
Connect
4141
</Button>
4242
</InputGroup>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ 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 outline={isAda} color={siteSpecific("keyline", "primary")} onClick={() => {
4141
store.dispatch(closeActiveModal());
4242
}}>
4343
Cancel

‎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={siteSpecific("keyline", "primary")} outline={isAda} 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="primary" 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="secondary" onClick={(e) => {
9898
closeModal(); signUp(e);
99-
}} outline block>
99+
}} block>
100100
Sign up
101101
</Button>
102102

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ import {
2828
import {ShowLoading} from "../../handlers/ShowLoading";
2929
import {ActiveModal, AppGroup, AugmentedEvent} from "../../../../IsaacAppTypes";
3030
import {RegisteredUserDTO, UserSummaryWithGroupMembershipDTO} from "../../../../IsaacApiTypes";
31-
import {bookingStatusMap, isDefined, isLoggedIn, schoolNameWithPostcode} from "../../../services";
31+
import {bookingStatusMap, isAda, isDefined, isLoggedIn, schoolNameWithPostcode, siteSpecific} from "../../../services";
3232
import _orderBy from "lodash/orderBy";
3333
import {Link} from "react-router-dom";
3434
import classNames from "classnames";
@@ -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={siteSpecific("keyline", "primary")} outline={isAda} disabled={!Object.values(cancelReservationCheckboxes).some(v => v)} onClick={cancelReservations}>
308308
Cancel reservations
309309
</Button>
310310
</div>

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
closeActiveModal,
66
store
77
} from "../../../state";
8-
import {extractTeacherName, siteSpecific} from "../../../services";
8+
import {extractTeacherName, isAda, siteSpecific} from "../../../services";
99
import { Table, Button } from "reactstrap";
1010

1111
export const tokenVerificationModal = (userId: number, authToken: string, usersToGrantAccess: UserSummaryWithEmailAddressDTO[]) => {
@@ -46,7 +46,7 @@ export const tokenVerificationModal = (userId: number, authToken: string, usersT
4646
</p>
4747
</React.Fragment>,
4848
buttons: [
49-
<Button key={1} color="primary" outline onClick={() => {store.dispatch(closeActiveModal());}}>
49+
<Button key={1} color="primary" outline={isAda} onClick={() => {store.dispatch(closeActiveModal());}}>
5050
Cancel
5151
</Button>,
5252
<Button key={0} color="secondary" onClick={() => {
@@ -73,7 +73,7 @@ export const revocationConfirmationModal = (userId: number, userToRevoke: UserSu
7373
</p>
7474
</React.Fragment>,
7575
buttons: [
76-
<Button key={1} color="primary" outline onClick={() => {store.dispatch(closeActiveModal());}}>
76+
<Button key={1} color="primary" outline={isAda} onClick={() => {store.dispatch(closeActiveModal());}}>
7777
Cancel
7878
</Button>,
7979
<Button key={0} color="secondary" onClick={() => {
@@ -99,7 +99,7 @@ export const releaseConfirmationModal = (userId: number, otherUser: UserSummaryD
9999
</p>
100100
</React.Fragment>,
101101
buttons: [
102-
<Button key={1} color="primary" outline onClick={() => {store.dispatch(closeActiveModal());}}>
102+
<Button key={1} color="primary" outline={isAda} onClick={() => {store.dispatch(closeActiveModal());}}>
103103
Cancel
104104
</Button>,
105105
<Button key={0} color="secondary" onClick={() => {
@@ -124,7 +124,7 @@ export const releaseAllConfirmationModal = () => {
124124
</p>
125125
</React.Fragment>,
126126
buttons: [
127-
<Button key={1} color="primary" outline onClick={() => {store.dispatch(closeActiveModal());}}>
127+
<Button key={1} color="primary" outline={isAda} onClick={() => {store.dispatch(closeActiveModal());}}>
128128
Cancel
129129
</Button>,
130130
<Button key={0} color="secondary" onClick={() => {
@@ -153,7 +153,7 @@ export const confirmSelfRemovalModal = (userId: number, groupId: number) => {
153153
</p>
154154
</>,
155155
buttons: [
156-
<Button key={1} color="primary" outline onClick={() => store.dispatch(closeActiveModal())}>
156+
<Button key={1} color="primary" outline={isAda} onClick={() => store.dispatch(closeActiveModal())}>
157157
Cancel
158158
</Button>,
159159
<Button key={0} color="secondary" onClick={() => {

‎src/app/components/elements/panels/AddUsersToBooking.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
useAdminSearchUsersMutation,
88
selectors
99
} from "../../../state";
10-
import {atLeastOne, formatManageBookingActionButtonMessage, zeroOrLess} from "../../../services";
10+
import {atLeastOne, formatManageBookingActionButtonMessage, isAda, siteSpecific, zeroOrLess} from "../../../services";
1111
import {DateString} from "../DateString";
1212
import {userBookingModal} from "../modals/UserBookingModal";
1313
import {AdminSearchEndpointParams} from "../../../../IsaacApiTypes";
@@ -107,7 +107,7 @@ export const AddUsersToBooking = ({event, eventBookingUserIds}: AddUsersToBookin
107107
{event && userSearchResults.map(result => <tr key={result.id}>
108108
<td className="align-middle">
109109
{!eventBookingUserIds.includes(result.id as number) &&
110-
<Button color="primary" outline className="btn-sm" onClick={() => dispatch(openActiveModal(userBookingModal(result, event, eventBookingUserIds)))}>
110+
<Button color={siteSpecific("keyline", "primary")} outline={isAda} className="btn-sm" onClick={() => dispatch(openActiveModal(userBookingModal(result, event, eventBookingUserIds)))}>
111111
{formatManageBookingActionButtonMessage(event)}
112112
</Button>
113113
}

‎src/app/components/elements/panels/EventAttendance.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {Accordion} from "../Accordion";
33
import {
44
useRecordUserEventAttendanceMutation
55
} from "../../../state";
6-
import {atLeastOne, isEventLeader, sortOnPredicateAndReverse} from "../../../services";
6+
import {atLeastOne, isAda, isEventLeader, siteSpecific, sortOnPredicateAndReverse} from "../../../services";
77
import {EventBookingDTO, UserSummaryWithEmailAddressDTO} from "../../../../IsaacApiTypes";
88
import {DateString} from "../DateString";
99
import {AugmentedEvent, PotentialUser, UserSchoolLookup} from "../../../../IsaacAppTypes";
@@ -107,12 +107,12 @@ export const EventAttendance = ({user, eventId, event, eventBookings, userIdToSc
107107

108108
return <tr key={booking.bookingId}>
109109
<td className="align-middle">
110-
{booking.bookingStatus != 'ATTENDED' && <Button color="primary" outline className="btn-sm mb-2"
110+
{booking.bookingStatus != 'ATTENDED' && <Button color={siteSpecific("keyline", "primary")} outline={isAda} className="btn-sm mb-2"
111111
onClick={() => recordEventAttendance({eventId, userId: userBooked.id as number, attended: true})}
112112
>
113113
Mark&nbsp;as Attended
114114
</Button>}
115-
{booking.bookingStatus != 'ABSENT' && <Button color="primary" outline className="btn-sm mb-2"
115+
{booking.bookingStatus != 'ABSENT' && <Button color={siteSpecific("keyline", "primary")} outline={isAda} className="btn-sm mb-2"
116116
onClick={() => recordEventAttendance({eventId, userId: userBooked.id as number, attended: false})}
117117
>
118118
Mark&nbsp;as Absent

‎src/app/components/elements/panels/EventOverviews.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import React, {useEffect, useState} from "react";
55
import {Accordion} from "../Accordion";
66
import {Link} from "react-router-dom";
77
import {DateString} from "../DateString";
8-
import {atLeastOne, isAda, isEventLeader, zeroOrLess} from "../../../services";
8+
import {atLeastOne, isAda, isEventLeader, siteSpecific, zeroOrLess} from "../../../services";
99
import {PotentialUser} from "../../../../IsaacAppTypes";
1010
import {ShowLoadingQuery} from "../../handlers/ShowLoadingQuery";
1111
import orderBy from "lodash/orderBy";
@@ -116,7 +116,7 @@ export const EventOverviews = ({setSelectedEventId, user}: {user: PotentialUser;
116116
<tbody>
117117
{orderBy(eventOverviews, [sortPredicate], [reverse ? "desc" : "asc"])
118118
.map((event) => <tr key={event.id} data-testid="event-manager-row">
119-
<td className="align-middle"><Button color="primary" outline className="btn-sm" onClick={() => setSelectedEventId(event.id as string)}>
119+
<td className="align-middle"><Button color={siteSpecific("keyline", "primary")} outline={isAda} className="btn-sm" onClick={() => setSelectedEventId(event.id as string)}>
120120
Manage
121121
</Button></td>
122122
<td className="align-middle"><Link to={`/events/${event.id}`} target="_blank">{event.title} - {event.subtitle}</Link></td>

‎src/app/components/elements/panels/ManageExistingBookings.tsx

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@ import {
1818
isEventLeader,
1919
sortOnPredicateAndReverse,
2020
stageLabelMap,
21-
zeroOrLess, confirmThen, isDefined
21+
zeroOrLess, confirmThen, isDefined,
22+
siteSpecific
2223
} from "../../../services";
2324
import {PotentialUser, UserSchoolLookup} from "../../../../IsaacAppTypes";
2425
import {BookingStatus, EventBookingDTO, UserSummaryWithEmailAddressDTO} from "../../../../IsaacApiTypes";
@@ -156,7 +157,7 @@ export const ManageExistingBookings = ({user, eventId, eventBookings, userIdToSc
156157
return !isDefined(userId) ? RenderNothing : <tr key={booking.bookingId}>
157158
<td className="align-middle">
158159
{(['WAITING_LIST', 'CANCELLED'].includes(booking.bookingStatus as string)) &&
159-
<Button color="primary" outline block className="btn-sm mb-1" onClick={() =>
160+
<Button color={siteSpecific("keyline", "primary")} outline={isAda} block className="btn-sm mb-1" onClick={() =>
160161
confirmThen(
161162
"Are you sure you want to convert this to a confirmed booking?",
162163
() => promoteUserBooking({eventId, userId})
@@ -166,7 +167,7 @@ export const ManageExistingBookings = ({user, eventId, eventBookings, userIdToSc
166167
</Button>
167168
}
168169
{(['WAITING_LIST', 'CONFIRMED'].includes(booking.bookingStatus as string)) &&
169-
<Button color="primary" outline block className="btn-sm mb-1" onClick={() =>
170+
<Button color={siteSpecific("keyline", "primary")} outline={isAda} block className="btn-sm mb-1" onClick={() =>
170171
confirmThen(
171172
"Are you sure you want to cancel this booking?",
172173
() => cancelUserBooking({eventId, userId})
@@ -176,7 +177,7 @@ export const ManageExistingBookings = ({user, eventId, eventBookings, userIdToSc
176177
</Button>
177178
}
178179
{isAdmin(user) &&
179-
<Button color="primary" outline block className="btn-sm mb-1" onClick={() =>
180+
<Button color={siteSpecific("keyline", "primary")} outline={isAda} block className="btn-sm mb-1" onClick={() =>
180181
confirmThen(
181182
"Are you sure you want to delete this booking permanently?",
182183
() => deleteUserBooking({eventId, userId})
@@ -185,7 +186,7 @@ export const ManageExistingBookings = ({user, eventId, eventBookings, userIdToSc
185186
Delete
186187
</Button>
187188
}
188-
<Button color="primary" outline block className="btn-sm mb-1" onClick={() =>
189+
<Button color={siteSpecific("keyline", "primary")} outline={isAda} block className="btn-sm mb-1" onClick={() =>
189190
confirmThen(
190191
"Are you sure you want to resend the confirmation email for this booking?",
191192
() => resendUserConfirmationEmail({eventId, userId})
@@ -243,7 +244,7 @@ export const ManageExistingBookings = ({user, eventId, eventBookings, userIdToSc
243244
</DropdownMenu>
244245
</ButtonDropdown>
245246
<Button
246-
color="primary" outline className="btn-md mt-1"
247+
color={siteSpecific("keyline", "primary")} outline={isAda} className="btn-md mt-1"
247248
href={`${API_PATH}/events/${eventId}/bookings/download`}
248249
>
249250
Export as CSV

‎src/app/components/elements/panels/UserPassword.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -196,7 +196,7 @@ export const UserPassword = (
196196
"You might want to do this if you forgot to log out on a shared device like a school computer."}
197197
</p>
198198
<Col className="text-center mt-2 px-0">
199-
<Button className={classNames("w-100 py-2 mt-3 mb-2", isAda)} color="primary" outline onClick={() => dispatch(logOutUserEverywhere())}>
199+
<Button className={classNames({"w-100 py-2 mt-3 mb-2": isAda})} color={siteSpecific("keyline", "primary")} outline={isAda} onClick={() => dispatch(logOutUserEverywhere())}>
200200
Log {above['sm'](deviceSize) ? "me " : ""}out everywhere
201201
</Button>
202202
</Col>

‎src/app/components/elements/quiz/QuizProgressCommon.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, {useContext, useLayoutEffect, useMemo, useRef, useState} from "react";
22
import {Button} from "reactstrap";
33
import {AssignmentProgressPageSettingsContext, ProgressSortOrder} from "../../../../IsaacAppTypes";
4-
import {isAuthorisedFullAccess, siteSpecific, TODAY} from "../../../services";
4+
import {isAda, isAuthorisedFullAccess, siteSpecific, TODAY} from "../../../services";
55
import {Link} from "react-router-dom";
66
import orderBy from "lodash/orderBy";
77
import { IsaacSpinner } from "../../handlers/IsaacSpinner";
@@ -89,7 +89,7 @@ export function ResultsTable<Q extends QuestionType>({
8989
title: "Allow another attempt?",
9090
body: "This will allow the student to attempt the test again.",
9191
buttons: [
92-
<Button key={1} color="primary" outline target="_blank" onClick={() => dispatch(closeActiveModal())}>
92+
<Button key={1} color={siteSpecific("keyline", "primary")} outline={isAda} target="_blank" onClick={() => dispatch(closeActiveModal())}>
9393
Cancel
9494
</Button>,
9595
<Button key={0} color="primary" target="_blank" onClick={confirm}>

‎src/app/components/navigation/DowntimeWarningBanner.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, {useState} from 'react';
22
import {Alert, Button, Col, Container, Row} from 'reactstrap';
33
import Cookies from 'js-cookie';
4-
import {SITE_TITLE, siteSpecific} from "../../services";
4+
import {isAda, SITE_TITLE, siteSpecific} from "../../services";
55

66
const DOWNTIME_COOKIE = "downtimeBannerDismissed";
77

@@ -27,7 +27,7 @@ export const DowntimeWarningBanner = () => {
2727
{SITE_TITLE} will be unavailable on Saturday 10 August from 8pm BST until early Sunday morning for essential server maintenance.
2828
</Col>
2929
<Col xs={12} md={3} className="text-center">
30-
<Button color="primary" outline className="my-2 my-md-0 d-block d-md-inline-block banner-button" onClick={clickDismiss}>
30+
<Button color={siteSpecific("keyline", "primary")} outline={isAda} className="my-2 my-md-0 d-block d-md-inline-block banner-button" onClick={clickDismiss}>
3131
Dismiss<span className="visually-hidden"> downtime notification</span>
3232
</Button>
3333
</Col>

0 commit comments

Comments
 (0)