Skip to content

Commit

Permalink
Merge pull request #3874 from smcvey7/WV-4
Browse files Browse the repository at this point in the history 
[WV-4] updates styling of voter email and phone entry lists TEAM REVIEW
  • Loading branch information
@DaleMcGrew
DaleMcGrew authored Apr 1, 2024
2 parents fdf9430 + 8ed092b commit 1c9cd22
Show file tree
Hide file tree
Showing 3 changed files with 96 additions and 84 deletions.
100 changes: 52 additions & 48 deletions src/js/components/Settings/VoterEmailAddressEntry.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { isCordova, isWebApp } from '../../common/utils/isCordovaOrWebApp';
import isMobileScreenSize from '../../common/utils/isMobileScreenSize';
import { renderLog } from '../../common/utils/logging';
import VoterStore from '../../stores/VoterStore';
import { FirstRowPhoneOrEmail, SecondRowPhoneOrEmail, TrashCan } from '../Style/pageLayoutStyles';
import { FirstRowPhoneOrEmail, SecondRowPhoneOrEmail, SecondRowPhoneOrEmailDiv, AllPhoneOrEmailTypes } from '../Style/pageLayoutStyles';
import { ButtonContainerHorizontal } from '../Welcome/sectionStyles';
import SettingsVerifySecretCode from '../../common/components/Settings/SettingsVerifySecretCode';
import { validateEmail } from '../../utils/regex-checks';
Expand Down Expand Up @@ -531,50 +531,50 @@ class VoterEmailAddressEntry extends Component {
</FirstRowPhoneOrEmail>
<SecondRowPhoneOrEmail>
{isPrimaryEmailAddress ? (
<div key={`${voterEmailAddressFromList.email_we_vote_id}-internal`}>
<SecondRowPhoneOrEmailDiv>
<span>
Primary
<span style={{ paddingRight: '112px' }}>&nbsp;</span>
</span>
<OverlayTrigger
placement="right"
overlay={(
<Tooltip id="tooltip-top">
Cannot remove primary email. Please add another primary email before removing this one.
</Tooltip>
)}
>
<TrashCan>
<span
// className="u-gray-darker"
style={{ color: '#757575' }}

>
<Delete />
</span>
</TrashCan>
</OverlayTrigger>
</div>
<span>
<OverlayTrigger
placement="right"
overlay={(
<Tooltip id="tooltip-top">
You must add a new primary email before removing this one.
</Tooltip>
)}
>
<div>
<span
className="u-gray-border"
>
<Delete />
</span>
</div>
</OverlayTrigger>
</span>
</SecondRowPhoneOrEmailDiv>
) : (
<div key={`${voterEmailAddressFromList.email_we_vote_id}-internal`}>
<SecondRowPhoneOrEmailDiv key={`${voterEmailAddressFromList.email_we_vote_id}-internal`}>
<span
className="u-link-color u-cursor--pointer u-no-break"
onClick={() => this.setAsPrimaryEmailAddress(voterEmailAddressFromList.email_we_vote_id)}
>
Make Primary
<span style={{ paddingRight: '65px' }}>&nbsp;</span>
</span>
{allowRemoveEmail && (
<TrashCan>
<span
className="u-link-color u-cursor--pointer"
onClick={() => this.removeVoterEmailAddress(voterEmailAddressFromList.email_we_vote_id)}
>
<Delete />
</span>
</TrashCan>
<span>
<div>
<span
className="u-link-color u-cursor--pointer"
onClick={() => this.removeVoterEmailAddress(voterEmailAddressFromList.email_we_vote_id)}
>
<Delete />
</span>
</div>
</span>
)}
</div>
</SecondRowPhoneOrEmailDiv>
)}
</SecondRowPhoneOrEmail>
</div>
Expand Down Expand Up @@ -602,20 +602,24 @@ class VoterEmailAddressEntry extends Component {
{voterEmailAddressFromList.email_ownership_is_verified ?
null : (
<SecondRowPhoneOrEmail>
<span
className="u-link-color u-cursor--pointer u-no-break"
onClick={() => this.reSendSignInCodeEmail(voterEmailAddressFromList.normalized_email_address)}
>
Send verification again
</span>
{allowRemoveEmail && (
<TrashCan
className="u-link-color u-cursor--pointer"
onClick={() => this.removeVoterEmailAddress(voterEmailAddressFromList.email_we_vote_id)}
<SecondRowPhoneOrEmailDiv key={`${voterEmailAddressFromList.email_we_vote_id}-internal`}>
<span
className="u-link-color u-cursor--pointer u-no-break"
onClick={() => this.reSendSignInCodeEmail(voterEmailAddressFromList.normalized_email_address)}
>
<Delete />
</TrashCan>
)}
Send verification again
</span>
{allowRemoveEmail && (
<span>
<div
className="u-link-color u-cursor--pointer"
onClick={() => this.removeVoterEmailAddress(voterEmailAddressFromList.email_we_vote_id)}
>
<Delete />
</div>
</span>
)}
</SecondRowPhoneOrEmailDiv>
</SecondRowPhoneOrEmail>
)}
</div>
Expand All @@ -633,7 +637,7 @@ class VoterEmailAddressEntry extends Component {
{emailAddressStatusHtml}
</span>
) : (
<div>
<AllPhoneOrEmailTypes>
{verifiedEmailsFound ? (
<EmailSection isWeb={isWebApp()}>
<span className="h3">
Expand All @@ -654,7 +658,7 @@ class VoterEmailAddressEntry extends Component {
{toVerifyEmailListHtml}
</EmailSection>
)}
</div>
</AllPhoneOrEmailTypes>
)}
{!hideSignInWithEmailForm && (
<EmailSection isWeb={isWebApp()}>
Expand Down
58 changes: 28 additions & 30 deletions src/js/components/Settings/VoterPhoneVerificationEntry.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import { isCordova, isWebApp } from '../../common/utils/isCordovaOrWebApp';
import isMobileScreenSize from '../../common/utils/isMobileScreenSize';
import { renderLog } from '../../common/utils/logging';
import VoterStore from '../../stores/VoterStore';
import { FirstRowPhoneOrEmail, SecondRowPhoneOrEmail, TrashCan } from '../Style/pageLayoutStyles';
import { FirstRowPhoneOrEmail, SecondRowPhoneOrEmail, SecondRowPhoneOrEmailDiv, AllPhoneOrEmailTypes } from '../Style/pageLayoutStyles';
import { ButtonContainerHorizontal } from '../Welcome/sectionStyles';
import SettingsVerifySecretCode from '../../common/components/Settings/SettingsVerifySecretCode';
// import { validatePhoneOrEmail } from '../../utils/regex-checks';
Expand Down Expand Up @@ -580,49 +580,45 @@ class VoterPhoneVerificationEntry extends Component {
</FirstRowPhoneOrEmail>
<SecondRowPhoneOrEmail>
{isPrimarySMSPhoneNumber ? (
<div key={`${voterSMSPhoneNumberFromList.sms_we_vote_id}-internal`}>
<SecondRowPhoneOrEmailDiv>
<span>
Primary
<span style={{ paddingRight: '112px' }}>&nbsp;</span>
</span>
<OverlayTrigger
placement="right"
overlay={(
<Tooltip id="tooltip-top">
Cannot remove primary phone number. Please add another primary number before removing this one.
You must add a new primary number before removing this one.
</Tooltip>
)}
>
<TrashCan>
<div>
<span
// className="u-gray-mid"
style={{ color: '#757575' }}

className="u-gray-border"
>
<Delete />
</span>
</TrashCan>
</div>
</OverlayTrigger>

</div>
</SecondRowPhoneOrEmailDiv>
) : (
<div key={`${voterSMSPhoneNumberFromList.sms_we_vote_id}-internal`}>
<SecondRowPhoneOrEmailDiv key={`${voterSMSPhoneNumberFromList.sms_we_vote_id}-internal`}>
<span
className="u-link-color u-cursor--pointer"
onClick={() => this.setAsPrimarySMSPhoneNumber.bind(this, voterSMSPhoneNumberFromList.sms_we_vote_id)}
>
Make Primary
<span style={{ paddingRight: '65px' }}>&nbsp;</span>
</span>
{allowRemoveSMSPhoneNumber && (
<TrashCan
<div
className="u-link-color u-cursor--pointer"
onClick={() => this.removeVoterSMSPhoneNumber.bind(this, voterSMSPhoneNumberFromList.sms_we_vote_id)}
>
<Delete />
</TrashCan>
</div>
)}
</div>
</SecondRowPhoneOrEmailDiv>
)}
</SecondRowPhoneOrEmail>
</div>
Expand Down Expand Up @@ -650,20 +646,22 @@ class VoterPhoneVerificationEntry extends Component {
{voterSMSPhoneNumberFromList.sms_ownership_is_verified ?
null : (
<SecondRowPhoneOrEmail>
<span
className="u-link-color u-cursor--pointer u-no-break"
onClick={() => this.reSendSignInCodeSMS(voterSMSPhoneNumberFromList.normalized_sms_phone_number)}
>
Send verification again
</span>
{allowRemoveSMSPhoneNumber && (
<TrashCan
className="u-link-color u-cursor--pointer"
onClick={() => this.removeVoterSMSPhoneNumber.bind(this, voterSMSPhoneNumberFromList.sms_we_vote_id)}
<SecondRowPhoneOrEmailDiv>
<span
className="u-link-color u-cursor--pointer u-no-break"
onClick={() => this.reSendSignInCodeSMS(voterSMSPhoneNumberFromList.normalized_sms_phone_number)}
>
<Delete />
</TrashCan>
)}
Send verification again
</span>
{allowRemoveSMSPhoneNumber && (
<div
className="u-link-color u-cursor--pointer"
onClick={() => this.removeVoterSMSPhoneNumber.bind(this, voterSMSPhoneNumberFromList.sms_we_vote_id)}
>
<Delete />
</div>
)}
</SecondRowPhoneOrEmailDiv>
</SecondRowPhoneOrEmail>
)}
</div>
Expand All @@ -681,7 +679,7 @@ class VoterPhoneVerificationEntry extends Component {
{smsPhoneNumberStatusHtml}
</span>
) : (
<div>
<AllPhoneOrEmailTypes>
{verifiedSMSFound ? (
<PhoneNumberSection isWeb={isWebApp()}>
<span className="h3">
Expand All @@ -702,7 +700,7 @@ class VoterPhoneVerificationEntry extends Component {
{toVerifySMSListHtml}
</PhoneNumberSection>
)}
</div>
</AllPhoneOrEmailTypes>
)}
{!hideSignInWithPhoneForm && (
<PhoneNumberSection isWeb={isWebApp()}>
Expand Down
22 changes: 16 additions & 6 deletions src/js/components/Style/pageLayoutStyles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -290,17 +290,27 @@ export const OfficeShareWrapper = styled('div')`
`;

export const FirstRowPhoneOrEmail = styled('div')`
margin: 5px 5px 2px 36px;
text-align: left;
margin: 5px 0px 2px 0px;
text-align: center;
`;

export const SecondRowPhoneOrEmail = styled('div')`
margin: 0 0 4px 50px;
text-align: left;
margin-bottom: 4px;
display: flex;
justify-content: center;
align-items: center;
`;

export const TrashCan = styled('span')`
margin-left: 30px;
export const SecondRowPhoneOrEmailDiv = styled('div')`
width: 250px;
display: flex;
justify-content: space-between;
`;

export const AllPhoneOrEmailTypes = styled('div')`
display: flex;
flex-direction: column;
align-items: center;
`;

export const TermsAndPrivacyText = styled('span')`
Expand Down

0 comments on commit 1c9cd22

Please sign in to comment.