Correct inconsistent button styles

Author: axlewin

src/app/components/elements/GoogleSignInButton.tsx

@@ -11,7 +11,8 @@ export const GoogleSignInButton = () => {
         dispatch(handleProviderLoginRedirect("GOOGLE"));
     };
 
-    return <Button className={"position-relative"} block color="keyline" 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/modals/GroupsModalCreators.tsx

@@ -37,14 +37,14 @@ export const additionalManagerSelfRemovalModal = (group: AppGroup, user: Registe
     buttons: [
         <Row key={0}>
             <Col>
-                <Button block color="keyline" 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}));
                     }

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

@@ -94,7 +94,7 @@ const LoginOrSignUpBody = () => {
                             disabled={!!user?.requesting}
                         />
 
-                        <Button id="sign-up" color="secondary" onClick={(e) => {
+                        <Button id="sign-up" color="keyline" onClick={(e) => {
                             closeModal(); signUp(e);
                         }} block>
                             Sign up

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

@@ -49,7 +49,7 @@ export const tokenVerificationModal = (userId: number, authToken: string, usersT
             <Button key={1} color={siteSpecific("solid", "keyline")} onClick={() => {store.dispatch(closeActiveModal());}}>
                 Cancel
             </Button>,
-            <Button key={0} color="secondary" onClick={() => {
+            <Button key={0} color={siteSpecific("keyline", "solid")} onClick={() => {
                 store.dispatch(authorisationsApi.endpoints.authenticateWithToken.initiate(authToken))
                     .then(() => store.dispatch(closeActiveModal()));
             }}>
@@ -76,7 +76,7 @@ export const revocationConfirmationModal = (userId: number, userToRevoke: UserSu
             <Button key={1} color={siteSpecific("solid", "keyline")} onClick={() => {store.dispatch(closeActiveModal());}}>
                 Cancel
             </Button>,
-            <Button key={0} color="secondary" onClick={() => {
+            <Button key={0} color={siteSpecific("keyline", "solid")} onClick={() => {
                 store.dispatch(authorisationsApi.endpoints.revokeAuthorisation.initiate(userToRevoke.id as number))
                     .then(() => store.dispatch(closeActiveModal()));
             }}>
@@ -102,7 +102,7 @@ export const releaseConfirmationModal = (userId: number, otherUser: UserSummaryD
             <Button key={1} color={siteSpecific("solid", "keyline")} onClick={() => {store.dispatch(closeActiveModal());}}>
                 Cancel
             </Button>,
-            <Button key={0} color="secondary" onClick={() => {
+            <Button key={0} color={siteSpecific("keyline", "solid")} onClick={() => {
                 store.dispatch(authorisationsApi.endpoints.releaseAuthorisation.initiate(otherUser.id as number))
                     .then(() => store.dispatch(closeActiveModal()));
             }}>
@@ -127,7 +127,7 @@ export const releaseAllConfirmationModal = () => {
             <Button key={1} color={siteSpecific("solid", "keyline")} onClick={() => {store.dispatch(closeActiveModal());}}>
                 Cancel
             </Button>,
-            <Button key={0} color="secondary" onClick={() => {
+            <Button key={0} color={siteSpecific("keyline", "solid")} onClick={() => {
                 store.dispatch(authorisationsApi.endpoints.releaseAllAuthorisations.initiate())
                     .then(() => store.dispatch(closeActiveModal()));
             }}>
@@ -156,7 +156,7 @@ export const confirmSelfRemovalModal = (userId: number, groupId: number) => {
             <Button key={1} color={siteSpecific("solid", "keyline")} onClick={() => store.dispatch(closeActiveModal())}>
                 Cancel
             </Button>,
-            <Button key={0} color="secondary" onClick={() => {
+            <Button key={0} color={siteSpecific("keyline", "solid")} onClick={() => {
                 store.dispatch(authorisationsApi.endpoints.deleteGroupMember.initiate({groupId, userId})).then(() => {
                     store.dispatch(closeActiveModal());
                 });

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

@@ -18,8 +18,7 @@ import {
     isEventLeader,
     sortOnPredicateAndReverse,
     stageLabelMap,
-    zeroOrLess, confirmThen, isDefined,
-    siteSpecific
+    zeroOrLess, confirmThen, isDefined
 } from "../../../services";
 import {PotentialUser, UserSchoolLookup} from "../../../../IsaacAppTypes";
 import {BookingStatus, EventBookingDTO, UserSummaryWithEmailAddressDTO} from "../../../../IsaacApiTypes";