Skip to content

Commit 4208ba3

Browse files
ACoullardACoullard
committed
update ui
1 parent 481675c commit 4208ba3

4 files changed

Lines changed: 61 additions & 59 deletions

File tree

‎components/auth/LegislatorSignUpModal.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,7 @@ export default function LegislatorSignUpModal({
158158

159159
<Form.Group controlId="legislatorSearch">
160160
<Form.Label>
161-
{t("selectLegislator") ?? "Select your legislator profile"}
161+
{t("selectLegislatorHeader")}
162162
</Form.Label>
163163
<Search
164164
index={memberIndex}
@@ -168,7 +168,7 @@ export default function LegislatorSignUpModal({
168168
}}
169169
memberId={selectedMember?.id}
170170
placeholder={
171-
t("searchLegislators") ?? "Search by name or district..."
171+
t("searchLegislatorsPlaceholder")
172172
}
173173
menuPortalTarget={document.body}
174174
styles={{

‎components/auth/ProfileTypeModal.tsx‎

Lines changed: 40 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,29 @@
11
import type { ModalProps } from "react-bootstrap"
2-
import { Button, Col, Modal, Row, Stack, Image } from "../bootstrap"
2+
import { Button, Col, Row, Modal, Stack, Image } from "../bootstrap"
33
import styled from "styled-components"
44
import { useTranslation } from "next-i18next"
55
import { useFlags } from "../featureFlags"
66

77
export const StyledButton = styled(Button)`
8-
width: 100%;
9-
height: 15rem;
8+
flex: 1;
9+
min-height: 8rem;
1010
margin: 0;
11-
margin-bottom: 1rem;
1211
text-align: left;
12+
display: flex;
13+
flex-direction: column;
14+
padding: 2rem;
15+
gap: 2rem;
1316
1417
p {
1518
font-size: 16px;
1619
margin: 0;
20+
text-align: left;
1721
}
1822
19-
Image {
20-
margin: 0;
23+
img {
24+
width: 48px;
25+
height: 48px;
26+
flex-shrink: 0;
2127
}
2228
`
2329

@@ -42,52 +48,42 @@ export default function ProfileTypeModal({
4248
onHide={onHide}
4349
aria-labelledby="sign-up-modal"
4450
centered
45-
size="lg"
51+
size="xl"
4652
>
4753
<Modal.Header closeButton>
4854
<Modal.Title id="sign-up-modal">{t("signUp")}</Modal.Title>
4955
</Modal.Header>
5056
<Modal.Body>
5157
<Col md={12} className="mx-auto">
52-
<Stack gap={2} direction="vertical">
58+
<Stack gap={4} direction="vertical">
5359
<h2>{t("registerAs")}</h2>
54-
<Stack gap={4} direction="horizontal">
60+
<Stack gap={4} direction="horizontal" className="align-items-stretch">
5561
<StyledButton
5662
type="button"
5763
variant="secondary"
5864
onClick={onIndividualUserClick}
5965
>
60-
<Row>
61-
<Col xs="auto" className="d-flex align-items-center">
62-
<Image alt="" src="/profile-individual-white.svg" />
63-
</Col>
64-
65-
<Col>
66-
<p>
67-
<b>{t("individualUser")}</b>
68-
</p>
69-
<p>{t("individualDescription")}</p>
70-
</Col>
71-
</Row>
66+
<div className="d-flex align-items-center gap-4 flex-nowrap">
67+
<Image alt="" src="/profile-individual-white.svg" />
68+
<p>
69+
<b>{t("individualUser")}</b>
70+
</p>
71+
</div>
72+
<p>{t("individualDescription")}</p>
7273
</StyledButton>
7374

7475
<StyledButton
7576
type="button"
7677
variant="secondary"
7778
onClick={onOrgUserClick}
7879
>
79-
<Row>
80-
<Col xs="auto" className="d-flex align-items-center">
81-
<Image alt="" src="/profile-org-white.svg" />
82-
</Col>
83-
84-
<Col>
85-
<p>
86-
<b>{t("org")}</b>
87-
</p>
88-
<p>{t("orgDescription")}</p>
89-
</Col>
90-
</Row>
80+
<div className="d-flex align-items-center gap-4 flex-nowrap">
81+
<Image alt="" src="/profile-org-white.svg" />
82+
<p>
83+
<b>{t("org")}</b>
84+
</p>
85+
</div>
86+
<p>{t("orgDescription")}</p>
9187
</StyledButton>
9288

9389
{legislators && (
@@ -96,30 +92,22 @@ export default function ProfileTypeModal({
9692
variant="secondary"
9793
onClick={onLegislatorUserClick}
9894
>
99-
<Row>
100-
<Col xs="auto" className="d-flex align-items-center">
101-
<Image alt="" src="/profile-individual-white.svg" />
102-
</Col>
103-
104-
<Col>
105-
<p>
106-
<b>{t("legislator") ?? "Legislator"}</b>
107-
</p>
108-
<p>
109-
{t("legislatorDescription") ??
110-
"I am an elected MA legislator"}
111-
</p>
112-
</Col>
113-
</Row>
95+
<div className="d-flex align-items-center gap-4 flex-nowrap">
96+
<Image alt="" src="/profile-legislator-white.svg" />
97+
<p>
98+
<b>{t("legislator")}</b>
99+
</p>
100+
</div>
101+
<p>{t("legislatorDescription")}</p>
114102
</StyledButton>
115103
)}
116104
</Stack>
117105
<p>{t("orgVetting")}</p>
118-
<hr />
119-
<Button type="button" onClick={onHide}>
120-
{t("cancel")}
121-
</Button>
122106
</Stack>
107+
<hr/>
108+
<Button type="button" className="w-100" onClick={onHide}>
109+
{t("cancel")}
110+
</Button>
123111
</Col>
124112
</Modal.Body>
125113
</Modal>

‎public/locales/en/auth.json‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,11 @@
3131
"mustConfirmPassword": "You must confirm your password.",
3232
"mustMatch": "Confirmed password must match password.",
3333
"registerAs": "Register as",
34-
"individualUser": "Individual User",
35-
"individualDescription": "An individual user, which also includes any non-incorporated Massachusetts based organizations",
34+
"individualUser": "Individual",
35+
"individualDescription": "Available for individual citizens and any non-incorporated Massachusetts-based orgs",
3636
"org": "Organization",
37-
"orgDescription": "Only available for incorporated Massachusetts Organizations",
38-
"orgVetting": "All Organization types have to go through a request and approval process ran by MAPLE admins. Once your request has been approved you will recieve an email and be granted access into MAPLE",
37+
"orgDescription": "Available for organizations that are incorporated in the state of Massachusetts",
38+
"orgVetting": "All Organizations and Legislators have to go through a request and approval process ran by MAPLE admins. Once your request has been approved you will recieve an email and be granted access into MAPLE",
3939
"profileIcon": "Profile Icon",
4040
"or": "or",
4141
"continueGoogle": "Continue with Google",
@@ -92,5 +92,10 @@
9292
"signedInRequired": "You must be signed in to verify your phone.",
9393
"enterVerificationCode": "Please enter the verification code.",
9494
"successMessage": "Success! Your phone number has been verified."
95-
}
95+
},
96+
"legislator": "Legislator",
97+
"legislatorDescription": "Available for Massachusetts-elected congressional representatives.",
98+
"searchLegislatorsPlaceholder": "Search by name or district...",
99+
"selectLegislatorHeader": "Select legislator",
100+
"signUpAsLegislator": "Sign Up as a Legislator"
96101
}

‎public/profile-legislator-white.svg‎

Lines changed: 9 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)