Added chosen color and hover border for whole horizontal candidate area. Retrieving Politician data needed for drawer and HeartFavoriteToggle.

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,

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;

src/js/common/components/Style/muiTheme.js

@@ -9,17 +9,16 @@ 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}`,
       dark: `${DesignTokenColors.primary900}`,
       contrastText: '#fff',
     },
     chosen: {
-      main: `${DesignTokenColors.confirmation100}`,
-      dark: `${DesignTokenColors.confirmation200}`,
-      contrastText: '#fff',
+      main: '#fff',
+      dark: `${DesignTokenColors.neutralUI50}`,
     },
     opposed: {
       main: `${DesignTokenColors.alert200}`,

src/js/common/components/Widgets/HeartFavoriteToggle/HeartFavoriteToggleBase.jsx

@@ -299,6 +299,7 @@ class HeartFavoriteToggleBase extends Component {
             </span>
           )}
         </LikeContainer>
+        <LikeDislikeSeperator>&nbsp;</LikeDislikeSeperator>
         <DislikeContainer onClick={(event) => {
           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;

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);
+        }
+      }
     }
   }
 

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 (
               <BallotScrollingInnerWrapper key={uniqueKey}>
-                <BallotHorizontallyScrollingContainer>
+                <BallotHorizontallyScrollingContainer isChosen={SupportStore.getVoterSupportsByBallotItemWeVoteId(oneCandidate.we_vote_id)}>
                   <CandidateContainer>
                     <CandidateWrapper>
                       <CandidateInfo>
@@ -432,6 +434,11 @@ class OfficeItemCompressed extends Component {
                       </CandidateInfo>
                     </CandidateWrapper>
                     <PositionRowListOuterWrapper>
+                      {!!(oneCandidate.linked_campaignx_we_vote_id) && (
+                        <HeartFavoriteToggleLocalWrapper>
+                          <HeartFavoriteToggleLoader campaignXWeVoteId={oneCandidate.linked_campaignx_we_vote_id} />
+                        </HeartFavoriteToggleLocalWrapper>
+                      )}
                       <PositionRowListInnerWrapper>
                         <div>
                           {/* 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%;
 `;

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;