Style signup flow buttons conistently

isaacphysics · Feb 12, 2025 · f438c78 · f438c78 · axlewin · Feb 12, 2025
1 parent 97f91af
commit f438c78
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 12 deletions.
diff --git a/src/app/components/pages/LogIn.tsx b/src/app/components/pages/LogIn.tsx
@@ -265,7 +265,8 @@ export const LogIn = () => {
                                             <Button
                                                 id="log-in"
                                                 tag="input" value="Log in"
-                                                color={siteSpecific("primary", "secondary")} type="submit" className="mb-2" block
+                                                color={siteSpecific("solid", "secondary")}
+                                                type="submit" className="mb-2" block
                                                 onClick={attemptLogIn}
                                                 disabled={!!user?.requesting}
                                             />

diff --git a/src/app/components/pages/RegistrationAgeCheck.tsx b/src/app/components/pages/RegistrationAgeCheck.tsx
@@ -97,7 +97,7 @@ 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" outline color="secondary" onClick={history.goBack}>Back</Button>
+                                    <Button className="w-100 h-100" color={siteSpecific("solid", "secondary")} outline={siteSpecific(false, true)} onClick={history.goBack}>Back</Button>
                                 </Col>
                                 <Col sm={siteSpecific(4,5)} lg={3}>
                                     <Button type="submit" className="w-100 h-100">Continue</Button>

diff --git a/src/app/components/pages/RegistrationAgeCheckParentalConsent.tsx b/src/app/components/pages/RegistrationAgeCheckParentalConsent.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import {Button, Card, CardBody, Col, Container, Input, Label, Row} from "reactstrap";
-import {history, isPhy, siteSpecific} from "../../services";
+import {history, siteSpecific} from "../../services";
 import {TitleAndBreadcrumb} from "../elements/TitleAndBreadcrumb";
 import { Link } from "react-router-dom";
 import { SidebarLayout, SignupSidebar, MainContent } from "../elements/layout/SidebarLayout";
@@ -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" outline color="secondary" onClick={history.goBack}>Back</Button>
+                                <Button className="mt-2 w-100" color="solid" onClick={history.goBack}>Back</Button>
                             </Col>
                             <Col sm={4} lg={3}>
-                                <Button className={classNames("mt-2 w-100", {"btn-keyline": isPhy})} onClick={continueToDetails} disabled={!parentalConsentCheckboxChecked}>Continue</Button>
+                                <Button className={classNames("mt-2 w-100 btn-keyline")} onClick={continueToDetails} disabled={!parentalConsentCheckboxChecked}>Continue</Button>
                             </Col>
                         </Row>
                     </CardBody>

diff --git a/src/app/components/pages/RegistrationSetDetails.tsx b/src/app/components/pages/RegistrationSetDetails.tsx
@@ -200,7 +200,7 @@ 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" outline color="secondary" onClick={history.goBack}>Back</Button>
+                                        <Button className="mt-2 w-100"  color={siteSpecific("solid", "secondary")} outline={siteSpecific(false, true)} onClick={history.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>

diff --git a/src/app/components/pages/RegistrationSetPreferences.tsx b/src/app/components/pages/RegistrationSetPreferences.tsx
@@ -79,10 +79,10 @@ export const RegistrationSetPreferences = () => {
                 <Card className="my-5">
                     <CardBody>
                         {errorMessage &&
-                    <ExigentAlert color="warning">
-                        <p className="alert-heading fw-bold">Unable to update your account</p>
-                        <p>{errorMessage}</p>
-                    </ExigentAlert>
+                            <ExigentAlert color="warning">
+                                <p className="alert-heading fw-bold">Unable to update your account</p>
+                                <p>{errorMessage}</p>
+                            </ExigentAlert>
                         }
                         <SignupTab
                             leftColumn = {<>
@@ -116,7 +116,7 @@ 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")}`} outline color="secondary" onClick={continueToAfterAuthPath}>I&apos;ll do this later</Button>
+                                        <Button className={`my-2 px-2 w-100 ${siteSpecific("px-lg-0", "px-lg-3")}`}  color={siteSpecific("solid", "secondary")} outline={siteSpecific(false, true)} onClick={continueToAfterAuthPath}>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-secondary", "px-lg-3 btn-primary")}`} disabled={!canSavePreferences}>Save preferences</Button>

diff --git a/src/app/components/pages/RegistrationStart.tsx b/src/app/components/pages/RegistrationStart.tsx
@@ -46,7 +46,7 @@ export const RegistrationStart = () => {
                                 {siteSpecific(<div className="section-divider"/>, <hr/>)}
                                 <div className="mt-5">
                                     <div className={siteSpecific("h4 mb-3", "h3")}>Already have an account?</div>
-                                    <Button color="secondary" outline block onClick={login}>Log in</Button>
+                                    <Button color={siteSpecific("solid", "secondary")} outline={siteSpecific(false, true)} block onClick={login}>Log in</Button>
                                 </div>
                             </Col>
                             <Col xs={12} lg={6}>