diff --git a/src/js/common/components/Style/DesignTokenColors.js b/src/js/common/components/Style/DesignTokenColors.js index 47b8753c8..14a2cdaf3 100644 --- a/src/js/common/components/Style/DesignTokenColors.js +++ b/src/js/common/components/Style/DesignTokenColors.js @@ -16,6 +16,7 @@ const primitiveColorNames = { grayUI600: '#6E6E6E', grayUI700: '#575757', grayUI800: '#4A4A4A', + greenUI50: '#E5F4E3', greenUI100: '#C1E4BB', greenUI200: '#9CD299', greenUI300: '#5DB664', @@ -43,6 +44,7 @@ const DesignTokenColors = { alert300: primitiveColorNames.redUI300, alert400: primitiveColorNames.redUI400, alert500: primitiveColorNames.redUI500, + confirmation50: primitiveColorNames.greenUI50, confirmation100: primitiveColorNames.greenUI100, confirmation200: primitiveColorNames.greenUI200, confirmation300: primitiveColorNames.greenUI300, diff --git a/src/js/common/components/Style/ScrollingStyles.jsx b/src/js/common/components/Style/ScrollingStyles.jsx index 0277a1aa5..c71ccce0a 100644 --- a/src/js/common/components/Style/ScrollingStyles.jsx +++ b/src/js/common/components/Style/ScrollingStyles.jsx @@ -1,20 +1,26 @@ import styled from 'styled-components'; +import DesignTokenColors from './DesignTokenColors'; -export const BallotHorizontallyScrollingContainer = styled('div')` - /* Fade out, right side */ +export const BallotHorizontallyScrollingContainer = styled('div', { + shouldForwardProp: (prop) => !['isChosen'].includes(prop), +})(({ isChosen }) => (` -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 95%, rgba(0, 0, 0, 0)); mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 95%, rgba(0, 0, 0, 0)); overflow-x: auto; white-space: nowrap; + border: 1px solid #fff; /* Default border color so that the hover doesn't create jump */ + &:hover { border: 1px solid ${DesignTokenColors.neutralUI100}; } + ${isChosen ? `background-color: ${DesignTokenColors.confirmation50};` : ''} + /* Make the scrollbar not be visible */ -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ ::-webkit-scrollbar { /* Chrome, Safari and Opera */ display: none; } -`; +`)); export const BallotScrollingInnerWrapper = styled('div')` overflow-x: hidden; diff --git a/src/js/common/components/Style/muiTheme.js b/src/js/common/components/Style/muiTheme.js index 685b300de..2c8695dc3 100644 --- a/src/js/common/components/Style/muiTheme.js +++ b/src/js/common/components/Style/muiTheme.js @@ -9,7 +9,7 @@ import muiStyleOverrides from '../../../components/Style/muiStyleOverrides'; const muiTheme = createTheme({ palette: { primary: { - main: '#0834CD', // brandBlue #2E3C5D + main: `${DesignTokenColors.primary600}`, // Former brandBlue #2E3C5D }, secondary: { main: `${DesignTokenColors.primary700}`, @@ -17,9 +17,8 @@ const muiTheme = createTheme({ contrastText: '#fff', }, chosen: { - main: `${DesignTokenColors.confirmation100}`, - dark: `${DesignTokenColors.confirmation200}`, - contrastText: '#fff', + main: '#fff', + dark: `${DesignTokenColors.neutralUI50}`, }, opposed: { main: `${DesignTokenColors.alert200}`, diff --git a/src/js/common/components/Widgets/HeartFavoriteToggle/HeartFavoriteToggleBase.jsx b/src/js/common/components/Widgets/HeartFavoriteToggle/HeartFavoriteToggleBase.jsx index d0427048f..fb01a5885 100644 --- a/src/js/common/components/Widgets/HeartFavoriteToggle/HeartFavoriteToggleBase.jsx +++ b/src/js/common/components/Widgets/HeartFavoriteToggle/HeartFavoriteToggleBase.jsx @@ -299,6 +299,7 @@ class HeartFavoriteToggleBase extends Component { )} +   { if (voterOpposesLocal) { return this.handleStopOpposingClick(event); @@ -384,10 +385,14 @@ const HeartFavoriteToggleContainer = styled('div')` const LikeContainer = styled('div')` display: flex; padding-right: 8px; - border-right: 1px solid ${DesignTokenColors.neutralUI100}; cursor: pointer; `; +const LikeDislikeSeperator = styled('div')` + max-width: 1px; + border-right: 1px solid ${DesignTokenColors.neutralUI100}; +`; + const DislikeContainer = styled('div')` display: flex; padding-left: 8px; diff --git a/src/js/common/components/Widgets/HeartFavoriteToggle/HeartFavoriteToggleLive.jsx b/src/js/common/components/Widgets/HeartFavoriteToggle/HeartFavoriteToggleLive.jsx index b33d941ed..5909fc1d5 100644 --- a/src/js/common/components/Widgets/HeartFavoriteToggle/HeartFavoriteToggleLive.jsx +++ b/src/js/common/components/Widgets/HeartFavoriteToggle/HeartFavoriteToggleLive.jsx @@ -1,16 +1,17 @@ import React, { Suspense } from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; -// import CampaignActions from '../../../actions/CampaignActions'; +import CampaignActions from '../../../actions/CampaignActions'; import CampaignStore from '../../../stores/CampaignStore'; import OrganizationStore from '../../../../stores/OrganizationStore'; import VoterStore from '../../../../stores/VoterStore'; import AppObservableStore from '../../../stores/AppObservableStore'; import CampaignSupporterStore from '../../../stores/CampaignSupporterStore'; -// import apiCalming from '../../../utils/apiCalming'; +import apiCalming from '../../../utils/apiCalming'; import initializejQuery from '../../../utils/initializejQuery'; import CampaignSupporterActions from '../../../actions/CampaignSupporterActions'; import OrganizationActions from '../../../../actions/OrganizationActions'; +import PoliticianActions from '../../../actions/PoliticianActions'; import { renderLog } from '../../../utils/logging'; const HeartFavoriteToggleBase = React.lazy(() => import(/* webpackChunkName: 'HeartFavoriteToggleBase' */ './HeartFavoriteToggleBase')); @@ -44,6 +45,13 @@ class HeartFavoriteToggleLive extends React.Component { this.organizationStoreListener = OrganizationStore.addListener(this.onOrganizationStoreChange.bind(this)); this.onVoterStoreChange(); this.voterStoreListener = VoterStore.addListener(this.onVoterStoreChange.bind(this)); + // Not the most efficient, but allows us to put this component anywhere + const { campaignXWeVoteId } = this.props; + if (campaignXWeVoteId) { + if (apiCalming(`campaignRetrieve-${campaignXWeVoteId}`, 30000)) { + CampaignActions.campaignRetrieve(campaignXWeVoteId); + } + } } componentDidUpdate (prevProps) { @@ -119,6 +127,11 @@ class HeartFavoriteToggleLive extends React.Component { voterCanVoteForPoliticianInCampaign, }); } + if (politicianWeVoteId) { + if (apiCalming(`politicianRetrieve-${politicianWeVoteId}`, 30000)) { + PoliticianActions.politicianRetrieve(politicianWeVoteId); + } + } } } diff --git a/src/js/components/Ballot/OfficeItemCompressed.jsx b/src/js/components/Ballot/OfficeItemCompressed.jsx index 2459f2533..2396e83f2 100644 --- a/src/js/components/Ballot/OfficeItemCompressed.jsx +++ b/src/js/components/Ballot/OfficeItemCompressed.jsx @@ -7,6 +7,7 @@ import Tooltip from 'react-bootstrap/Tooltip'; import styled from 'styled-components'; import OfficeActions from '../../actions/OfficeActions'; import { BallotHorizontallyScrollingContainer, BallotScrollingInnerWrapper, BallotScrollingOuterWrapper } from '../../common/components/Style/ScrollingStyles'; +import HeartFavoriteToggleLoader from '../../common/components/Widgets/HeartFavoriteToggle/HeartFavoriteToggleLoader'; import signInModalGlobalState from '../../common/components/Widgets/signInModalGlobalState'; import AppObservableStore from '../../common/stores/AppObservableStore'; import historyPush from '../../common/utils/historyPush'; @@ -318,7 +319,8 @@ class OfficeItemCompressed extends Component { if (!oneCandidate || !oneCandidate.we_vote_id || dedupedCandidates.includes(oneCandidate.we_vote_id)) return null; dedupedCandidates.push(oneCandidate.we_vote_id); candidateCount += 1; - // console.log('OfficeItemCompressd candiateCount ', candidateCount); + // console.log('OfficeItemCompressed candidateCount ', candidateCount); + // console.log('OfficeItemCompressed generateCandidates oneCandidate: ', oneCandidate); const candidatePartyText = oneCandidate.party && oneCandidate.party.length ? `${oneCandidate.party}` : ''; const avatarCompressed = 'card-main__avatar-compressed'; const avatarBackgroundImage = normalizedImagePath('../img/global/svg-icons/avatar-generic.svg'); @@ -369,7 +371,7 @@ class OfficeItemCompressed extends Component { ); return ( - + @@ -432,6 +434,11 @@ class OfficeItemCompressed extends Component { + {!!(oneCandidate.linked_campaignx_we_vote_id) && ( + + + + )}
{/* className="u-show-mobile" */} @@ -626,6 +633,12 @@ const styles = (theme) => ({ }, }); +const HeartFavoriteToggleLocalWrapper = styled('div')` + margin-bottom: 6px; + max-width: 200px; + width: 125px; +`; + const HrSeparator = styled('hr')` width: 95%; `; diff --git a/src/js/components/Style/BallotStyles.jsx b/src/js/components/Style/BallotStyles.jsx index 0a313a86a..ac5418119 100644 --- a/src/js/components/Style/BallotStyles.jsx +++ b/src/js/components/Style/BallotStyles.jsx @@ -60,7 +60,6 @@ export const CandidateBottomRow = styled('div')` export const CandidateContainer = styled('div')` display: flex; justify-content: flex-start; - // padding: 10px 5px; `; export const CandidateInfo = styled('div')(({ theme }) => (` @@ -100,7 +99,7 @@ export const CandidateNameH4 = styled('button')` min-width: 124px; white-space: normal; border: none; - background-color: #FFF; + background-color: transparent; padding: 0; &:hover { text-decoration: underline;