diff --git a/src/js/common/components/Challenge/ChallengeAbout.jsx b/src/js/common/components/Challenge/ChallengeAbout.jsx index e0320ffbd..57caf0d12 100644 --- a/src/js/common/components/Challenge/ChallengeAbout.jsx +++ b/src/js/common/components/Challenge/ChallengeAbout.jsx @@ -199,12 +199,23 @@ export const CardRowsWrapper = styled('div')` margin: 2px 0 0 2px; padding-bottom: 20px; overflow-y: auto; - height: 170px; + height: 165px; + + @media screen and (min-width: 786px) { + height: auto; + overflow-y: visible; + } `; const ChallengeAboutWrapper = styled('div')` white-space: normal; position: relative; + height: auto; + margin-bottom: 40px; + + @media screen and (min-width: 786px) { + margin-bottom: 20px; + } &::after { content: ''; @@ -212,7 +223,7 @@ const ChallengeAboutWrapper = styled('div')` bottom: 0; left: 0; width: 100%; - height: 15px; + height: 20px; background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); pointer-events: none; `; diff --git a/src/js/common/components/Challenge/JoinChallengeAndLearnMoreButtons.jsx b/src/js/common/components/Challenge/JoinChallengeAndLearnMoreButtons.jsx index 4ceebf6d0..3d828aca2 100644 --- a/src/js/common/components/Challenge/JoinChallengeAndLearnMoreButtons.jsx +++ b/src/js/common/components/Challenge/JoinChallengeAndLearnMoreButtons.jsx @@ -32,6 +32,7 @@ const styles = () => ({ joinChallengeButton: { borderRadius: 45, maxWidth: 300, + minWidth: 110, // background: 'var(--Primary-600, #0858A1)', // border: '1px solid var(--Primary-400, #4187C6)', // color: 'var(--WhiteUI, #FFFFFF)', @@ -42,6 +43,7 @@ const styles = () => ({ learnMoreButton: { borderRadius: 45, maxWidth: 300, + minWidth: 110, // background: 'white', // border: '1px solid var(--Primary-400, #4187C6)', // color: 'var(--Neutral-900, #2A2A2C)', diff --git a/src/js/common/components/ChallengeListRoot/ChallengeCardList.jsx b/src/js/common/components/ChallengeListRoot/ChallengeCardList.jsx index 14a14c9a6..9b38f478d 100644 --- a/src/js/common/components/ChallengeListRoot/ChallengeCardList.jsx +++ b/src/js/common/components/ChallengeListRoot/ChallengeCardList.jsx @@ -105,23 +105,6 @@ class ChallengeCardList extends Component { }); } - increaseNumberToDisplay = () => { - let { numberToDisplay } = this.state; - numberToDisplay += NUMBER_TO_ADD_WHEN_MORE_CLICKED; - this.setState({ - numberToDisplay, - }); - } - - loadMoreHasBeenClicked = () => { - this.increaseNumberToDisplay(); - // console.log('load more has been clicked'); - if (this.props.loadMoreScroll) { - // console.log('loadMoreScroll exists'); - this.props.loadMoreScroll(); - } - } - onChallengeClickLink (challengeWeVoteId) { const challenge = ChallengeStore.getChallengeByWeVoteId(challengeWeVoteId); if (!challenge) { @@ -158,6 +141,23 @@ class ChallengeCardList extends Component { return challengeBasePath; } + loadMoreHasBeenClicked = () => { + this.increaseNumberToDisplay(); + // console.log('load more has been clicked'); + if (this.props.loadMoreScroll) { + // console.log('loadMoreScroll exists'); + this.props.loadMoreScroll(); + } + } + + increaseNumberToDisplay = () => { + let { numberToDisplay } = this.state; + numberToDisplay += NUMBER_TO_ADD_WHEN_MORE_CLICKED; + this.setState({ + numberToDisplay, + }); + } + render () { renderLog('ChallengeCardList'); // Set LOG_RENDER_EVENTS to log all renders // console.log('ChallengeCardList render'); @@ -302,14 +302,16 @@ const ChallengeCardForListVerticalWrapper = styled('div')` display: flex; flex-direction: column; // height: ${isWebApp() ? '100%' : 'unset'}; - height: 450px; + height: auto; position: relative; width: 80%; max-width: 250px; margin-right: 5px; + margin-bottom: 20px; `; -const JoinedButtonsInnerWrapper = styled('div')``; +const JoinedButtonsInnerWrapper = styled('div')` +`; const JoinedButtonsOuterWrapper = styled('div')` bottom: 0; diff --git a/src/js/common/components/ChallengeListRoot/ChallengeListRoot.jsx b/src/js/common/components/ChallengeListRoot/ChallengeListRoot.jsx index b1dc0c800..dc6feadd1 100644 --- a/src/js/common/components/ChallengeListRoot/ChallengeListRoot.jsx +++ b/src/js/common/components/ChallengeListRoot/ChallengeListRoot.jsx @@ -23,8 +23,8 @@ import ChallengeParticipantStore from '../../stores/ChallengeParticipantStore'; import isMobileScreenSize from '../../utils/isMobileScreenSize'; const ChallengeCardList = React.lazy(() => import(/* webpackChunkName: 'ChallengeCardList' */ './ChallengeCardList')); -const HORIZONTAL_SCROLL_DISTANCE_ON_LEFT_ARROW_CLICK = -630; -const HORIZONTAL_SCROLL_DISTANCE_ON_RIGHT_ARROW_CLICK = 630; +const HORIZONTAL_SCROLL_DISTANCE_ON_LEFT_ARROW_CLICK = -530; +const HORIZONTAL_SCROLL_DISTANCE_ON_RIGHT_ARROW_CLICK = 530; const HORIZONTAL_SCROLL_DISTANCE_MOBILE_LEFT_ARROW_CLICK = -315; const HORIZONTAL_SCROLL_DISTANCE_MOBILE_RIGHT_ARROW_CLICK = 315; const HORIZONTAL_SCROLL_DISTANCE_ON_SHOW_MORE = 315; @@ -79,6 +79,17 @@ class ChallengeListRoot extends Component { this.challengeStoreListener.remove(); } + handleNumberOfResults (numberOfFilteredResults, numberOfSearchResults) { + // console.log('RepresentativeListRoot handleNumberOfResults numberOfFilteredResults:', numberOfFilteredResults, ', numberOfSearchResults:', numberOfSearchResults); + if (this.props.handleNumberOfResults) { + // Delay telling the parent component that the number of results has changed + // if (this.timer) clearTimeout(this.timer); + // this.timer = setTimeout(() => { + this.props.handleNumberOfResults(numberOfFilteredResults, numberOfSearchResults); + // }, 500); + } + } + onChallengeParticipantStoreChange () { // We need to instantiate ChallengeParticipantStore before we call challengeListRetrieve so that store gets filled with data } @@ -254,17 +265,6 @@ class ChallengeListRoot extends Component { }, () => { this.handleNumberOfResults(filteredList.length, challengeSearchResults.length); }); } - handleNumberOfResults (numberOfFilteredResults, numberOfSearchResults) { - // console.log('RepresentativeListRoot handleNumberOfResults numberOfFilteredResults:', numberOfFilteredResults, ', numberOfSearchResults:', numberOfSearchResults); - if (this.props.handleNumberOfResults) { - // Delay telling the parent component that the number of results has changed - // if (this.timer) clearTimeout(this.timer); - // this.timer = setTimeout(() => { - this.props.handleNumberOfResults(numberOfFilteredResults, numberOfSearchResults); - // }, 500); - } - } - leftAndRightArrowSetState = (el) => { // set state here const leftRightStateDict = leftAndRightArrowStateCalculation(el); diff --git a/src/js/common/components/Style/ScrollingStyles.jsx b/src/js/common/components/Style/ScrollingStyles.jsx index 4e750fcdb..ab4e775e0 100644 --- a/src/js/common/components/Style/ScrollingStyles.jsx +++ b/src/js/common/components/Style/ScrollingStyles.jsx @@ -99,7 +99,7 @@ export const CampaignsScrollingOuterWrapper = styled('div')` export const ChallengesScrollingOuterWrapper = styled('div')` display: flex; justify-content: space-between; - height: 450px; + height: auto; min-height: 450px; min-width: 0; width: 100%; diff --git a/src/js/common/utils/leftRightArrowCalculation.js b/src/js/common/utils/leftRightArrowCalculation.js index 3f619bd8b..c74c66c09 100644 --- a/src/js/common/utils/leftRightArrowCalculation.js +++ b/src/js/common/utils/leftRightArrowCalculation.js @@ -1,6 +1,6 @@ export function handleHorizontalScroll (el, distance, func, rightMarginSize) { const element = el; - // console.log(element.scrollLeft); + console.log(element.scrollLeft); // 24 is the size of the right margin of each card const offset = (element.scrollLeft % distance); let scrollDistance = distance; diff --git a/src/js/components/Navigation/SettingsPersonalSideBar.jsx b/src/js/components/Navigation/SettingsPersonalSideBar.jsx index 6589eb5aa..9932a6962 100644 --- a/src/js/components/Navigation/SettingsPersonalSideBar.jsx +++ b/src/js/components/Navigation/SettingsPersonalSideBar.jsx @@ -5,6 +5,10 @@ import AppObservableStore, { messageService } from '../../common/stores/AppObser import VoterSessionActions from '../../actions/VoterSessionActions'; import VoterStore from '../../stores/VoterStore'; import { renderLog } from '../../common/utils/logging'; +import styled from 'styled-components'; +import DesignTokenColors from '../../common/components/Style/DesignTokenColors'; +import { ImportContactsOutlined, AccountBoxRounded, Lock, SecurityRounded, CampaignRounded, PeopleAltRounded, TextsmsRounded, ExitToAppRounded } from '@mui/icons-material'; + const SettingsAccountLevelChip = React.lazy(() => import(/* webpackChunkName: 'SettingsAccountLeveLChip' */ '../Settings/SettingsAccountLevelChip')); @@ -94,127 +98,99 @@ export default class SettingsPersonalSideBar extends Component {
Your Settings
{isSignedIn && ( -
-
+ - - Name & Photo - + + + Import Contacts + -
+
)} - {(isSignedIn && pigsCanFly) && ( // Turning this off until we can work on it more -
+ {isSignedIn && ( + //
+
- - - Ballot Address - + + + + Name & Photo +
-
+ )} -
+
- + + {isSignedIn ? Security & Sign In : Sign In } - +
-
+ {(isSignedIn) && ( -
+
- - Your Privacy & Data - + + + Your Privacy & Data +
-
+ )} -
+
- + + Notifications - +
-
+ {alwaysTrue && (/* {!isOnPartnerUrl && ( */ -
+
- + + Friends - +
-
+ )} {(isSignedIn && alwaysTrue/* && !isOnPartnerUrl */) && ( -
+
- + + Discuss - +
-
+ )} {(isSignedIn && showPremiumFeatures && !isOnPartnerUrlAndNotAdmin) && ( @@ -224,12 +200,9 @@ export default class SettingsPersonalSideBar extends Component { >
- + Domain - + }> @@ -383,27 +356,89 @@ export default class SettingsPersonalSideBar extends Component { )} {isSignedIn && ( -
-
+ + - + Sign Out - + -
-
+ + )}
); } } + +const BorderBottomContainer = styled('div')` + border-bottom: 1px solid ${DesignTokenColors.neutralUI200}; + padding-bottom: 1rem; +`; + +const ImportContactsIcon = styled(ImportContactsOutlined)` + color: ${(props) => (props.isActive ? DesignTokenColors.primary600 : DesignTokenColors.neutralUI600)}; + margin: -3px 10px 0 8px; +`; + +const ProfileIcon = styled(AccountBoxRounded)` + color: ${(props) => (props.isActive ? DesignTokenColors.primary600 : DesignTokenColors.neutralUI600)}; + margin: -3px 10px 0 6px; +`; + +const SecurityIcon = styled(Lock)` + color: ${(props) => (props.isActive ? DesignTokenColors.primary600 : DesignTokenColors.neutralUI600)}; + margin: -3px 10px 0 6px; +`; + +const PrivacyIcon = styled(SecurityRounded)` + color: ${(props) => (props.isActive ? DesignTokenColors.primary600 : DesignTokenColors.neutralUI600)}; + margin: -3px 10px 0 6px; +`; + +const NotificationsIcon = styled(CampaignRounded)` + color: ${(props) => (props.isActive ? DesignTokenColors.primary600 : DesignTokenColors.neutralUI600)}; + margin: -3px 7px 0 9px; +`; + +const FriendsIcon = styled(PeopleAltRounded)` + color: ${(props) => (props.isActive ? DesignTokenColors.primary600 : DesignTokenColors.neutralUI600)}; + margin: -3px 10px 0 8px; +`; + +const DiscussIcon = styled(TextsmsRounded)` + color: ${(props) => (props.isActive ? DesignTokenColors.primary600 : DesignTokenColors.neutralUI600)}; + margin: -3px 10px 0 8px; +`; + +const SignOutIcon = styled(ExitToAppRounded)` + color: ${DesignTokenColors.neutralUI600}; + margin: -3px 10px 0 8px; +`; + +const BorderTopContainer = styled('div')` + border-top: 1px solid ${DesignTokenColors.neutralUI200}; + margin-top: 1rem; + padding-top: 1rem; +`; + +const LinkContainer = styled('div')` + border-left: ${(props) => (props.isActive ? `3px solid ${DesignTokenColors.primary600}` : 'none')}; + margin: 0 0 .25rem ${(props) => (props.isActive ? '-.2rem' : 0)}; + padding-bottom: .25rem; +`; + +const LinkSpan = styled('span')` + color: ${(props) => (props.isActive ? `${DesignTokenColors.primary600}` : `${DesignTokenColors.neutral600}`)}; + fontSize: '1rem', + textDecoration: 'none', +`; + SettingsPersonalSideBar.propTypes = { editMode: PropTypes.string, isSignedIn: PropTypes.bool, diff --git a/src/js/components/Settings/SettingsNotifications.jsx b/src/js/components/Settings/SettingsNotifications.jsx index 1ea28e5a1..72b900068 100755 --- a/src/js/components/Settings/SettingsNotifications.jsx +++ b/src/js/components/Settings/SettingsNotifications.jsx @@ -1,4 +1,4 @@ -import { MailOutline, Notifications, Settings } from '@mui/icons-material'; +import { MailOutline, Notifications, Settings, CampaignRounded } from '@mui/icons-material'; import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material'; import styled from 'styled-components'; import withStyles from '@mui/styles/withStyles'; @@ -172,7 +172,8 @@ class SettingsNotifications extends Component {
-
Notification Settings
+ +

Notification Settings

{notificationsSavedStatus}
 @@ -363,7 +364,7 @@ class SettingsNotifications extends Component { classes={{ root: classes.tableCellDescription }} component="th" scope="row" - id = "friendsOpinion_allRegions_notification" + id="friendsOpinion_allRegions_notification" > Friends' opinions {' '} @@ -415,7 +416,7 @@ class SettingsNotifications extends Component { classes={{ root: classes.tableCellDescription }} component="th" scope="row" - id = "friendsActivity_notification" + id="friendsActivity_notification" > Friends' activity, {' '} @@ -554,7 +555,6 @@ const ColumnLabel = styled('div')` const HeaderWrapper = styled('div')` display: flex; align-items: center; - justify-content: space-between; width: 100%; `; @@ -567,4 +567,11 @@ const SettingsIconWrapper = styled('div')` margin-right: 15px; `; +const NotificationsIcon = styled(CampaignRounded)` + color: black; + height: 25px; + width: 25px; + margin: 6px 8px 0 0; +`; + export default withStyles(styles)(SettingsNotifications); diff --git a/src/js/components/Settings/SettingsProfile.jsx b/src/js/components/Settings/SettingsProfile.jsx index 462a3beba..1da2b48aa 100755 --- a/src/js/components/Settings/SettingsProfile.jsx +++ b/src/js/components/Settings/SettingsProfile.jsx @@ -16,7 +16,7 @@ import SettingsWidgetAccountType from './SettingsWidgetAccountType'; import SettingsWidgetFirstLastName from './SettingsWidgetFirstLastName'; import SettingsWidgetOrganizationDescription from './SettingsWidgetOrganizationDescription'; import SettingsWidgetOrganizationWebsite from './SettingsWidgetOrganizationWebsite'; - +import AccountBoxIcon from '@mui/icons-material/AccountBox'; class SettingsProfile extends Component { constructor (props) { @@ -56,7 +56,10 @@ class SettingsProfile extends Component {
-

Name & Photo Settings

+ + +

Name & Photo Settings

+ We are serious about protecting your information. We are a nonprofit, and will never sell your information. @@ -101,4 +104,16 @@ const IntroductionWrapper = styled('div')` margin-bottom: 12px; `; +const HeaderContainer = styled('div')` + display: flex; + align-items: center; +`; + +const IdIcon = styled(AccountBoxIcon)` + color: black; + height: 23px; + width: 23px; + margin: 8px 8px 0px -2px; +`; + export default withStyles(styles)(SettingsProfile); diff --git a/src/js/components/Settings/SettingsYourData.jsx b/src/js/components/Settings/SettingsYourData.jsx index ce89196c8..30bcbd0e2 100644 --- a/src/js/components/Settings/SettingsYourData.jsx +++ b/src/js/components/Settings/SettingsYourData.jsx @@ -2,6 +2,7 @@ import React, { Component } from 'react'; import { Helmet } from 'react-helmet-async'; import { Link } from 'react-router-dom'; import styled from 'styled-components'; +import { SecurityRounded } from '@mui/icons-material'; import VoterActions from '../../actions/VoterActions'; import { renderLog } from '../../common/utils/logging'; import DeleteYourAccountButton from './DeleteYourAccountButton'; @@ -44,9 +45,12 @@ export default class SettingsYourData extends Component {
-

- Your Privacy & Data -

+ + +

+ Your Privacy & Data +

+

Your Address Book Contact Data @@ -65,7 +69,7 @@ export default class SettingsYourData extends Component { )} -

+

Delete Your Account

@@ -92,3 +96,15 @@ const DeleteAllContactsWrapper = styled('div')` margin-top: 8px; width: 100%; `; + +const HeaderContainer = styled('div')` + display: flex; + align-items: center; +`; + +const ShieldIcon = styled(SecurityRounded)` + color: black; + height: 23px; + width: 23px; + margin: 5px 8px 0 -3px; +`;