Adding profileImageBackgroundColor to the display of candidate cards.…

… Still needs more work. (#3808)
wevote · Dec 21, 2023 · f9802fa · f9802fa
1 parent bd97087
commit f9802fa
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 24 deletions.
diff --git a/src/js/common/components/Campaign/CampaignCardForList.jsx b/src/js/common/components/Campaign/CampaignCardForList.jsx
@@ -248,6 +248,7 @@ class CampaignCardForList extends Component {
       // is_blocked_by_we_vote: isBlockedByWeVote,
       // is_in_team_review_mode: isInTeamReviewMode,
       // is_supporters_count_minimum_exceeded: isSupportersCountMinimumExceeded,
+      profile_image_background_color: profileImageBackgroundColor,
       supporters_count: supportersCount,
       supporters_count_next_goal: supportersCountNextGoal,
       // visible_on_this_site: visibleOnThisSite,
@@ -450,7 +451,11 @@ class CampaignCardForList extends Component {
                   )}
                 </>
               ) : (
-                <CampaignImageDesktopPlaceholder limitCardWidth={limitCardWidth} id="cidp3">
+                <CampaignImageDesktopPlaceholder
+                  id="cidp3"
+                  limitCardWidth={limitCardWidth}
+                  profileImageBackgroundColor={profileImageBackgroundColor}
+                >
                   <CampaignImagePlaceholderText>
                     No image provided
                   </CampaignImagePlaceholderText>

diff --git a/src/js/common/components/Style/CampaignCardStyles.jsx b/src/js/common/components/Style/CampaignCardStyles.jsx
@@ -45,10 +45,10 @@ export const CampaignImageDesktopSharedStyles = css`
 `;
 
 export const CampaignImageDesktopPlaceholder = styled('div', {
-  shouldForwardProp: (prop) => !['limitCardWidth'].includes(prop),
-})(({ limitCardWidth }) => (`
+  shouldForwardProp: (prop) => !['limitCardWidth', 'profileImageBackgroundColor'].includes(prop),
+})(({ limitCardWidth, profileImageBackgroundColor }) => (`
   align-items: center;
-  background-color: #eee;
+  background-color: ${profileImageBackgroundColor || '#eee'};
   display: flex;
   ${limitCardWidth ? 'height: 157px;' : 'height: 117px;'}
   ${limitCardWidth ? 'min-height: 157px;' : 'min-height: 117px;'}
@@ -73,16 +73,18 @@ export const CampaignImageMobileSharedStyles = css`
   max-width: 100%;
 `;
 
-export const CampaignImageMobilePlaceholder = styled('div')`
-  background-color: #eee;
-  display: flex;
-  justify-content: center;
+export const CampaignImageMobilePlaceholder = styled('div', {
+  shouldForwardProp: (prop) => !['profileImageBackgroundColor'].includes(prop),
+})(({ profileImageBackgroundColor }) => (`
   align-items: center;
+  background-color: ${profileImageBackgroundColor || '#eee'};
+  display: flex;
   height: 157px;
+  justify-content: center;
   max-height: 157px;
   min-height: 157px;
   ${CampaignImageMobileSharedStyles}
-`;
+`));
 
 export const CampaignImagePlaceholderText = styled('div')`
   color: #ccc;

diff --git a/src/js/common/components/Style/PoliticianDetailsStyles.jsx b/src/js/common/components/Style/PoliticianDetailsStyles.jsx
@@ -55,23 +55,23 @@ export const PoliticianImageSharedStyles = css`
 `;
 
 export const PoliticianImageDesktopPlaceholder = styled('div', {
-  shouldForwardProp: (prop) => !['limitCardWidth'].includes(prop),
-})(({ limitCardWidth }) => (`
+  shouldForwardProp: (prop) => !['limitCardWidth', 'profileImageBackgroundColor'].includes(prop),
+})(({ limitCardWidth, profileImageBackgroundColor }) => (`
   ${limitCardWidth ? 'height: 315px;' : 'height: 117px;'}
   align-items: center;
-  background-color: #eee;
+  background-color: ${profileImageBackgroundColor || '#eee'};
   display: flex;
   justify-content: center;
   ${limitCardWidth ? 'width: 561px;' : 'width: 224px;'}
   ${PoliticianImageSharedStyles}
 `));
 
 export const PoliticianImageMobilePlaceholder = styled('div', {
-  shouldForwardProp: (prop) => !['limitCardWidth'].includes(prop),
-})(({ limitCardWidth }) => (`
+  shouldForwardProp: (prop) => !['limitCardWidth', 'profileImageBackgroundColor'].includes(prop),
+})(({ limitCardWidth, profileImageBackgroundColor }) => (`
   ${limitCardWidth ? 'height: 200px;' : 'height: 117px;'}
   align-items: center;
-  background-color: #eee;
+  background-color: ${profileImageBackgroundColor || '#eee'};
   display: flex;
   justify-content: center;
   // ${limitCardWidth ? 'width: 561px;' : 'width: 224px;'}

diff --git a/src/js/common/pages/Politician/PoliticianDetailsPage.jsx b/src/js/common/pages/Politician/PoliticianDetailsPage.jsx
@@ -288,6 +288,7 @@ class PoliticianDetailsPage extends Component {
       politicianName,
       politicianUrl,
       politicianWeVoteId,
+      profileImageBackgroundColor,
       stateCode,
       twitterFollowersCount,
       twitterHandle,
@@ -331,6 +332,7 @@ class PoliticianDetailsPage extends Component {
       politicianImageUrlLarge,
       politicianName,
       politicianUrl,
+      profileImageBackgroundColor,
       stateText,
       twitterFollowersCount,
       twitterHandle,
@@ -370,6 +372,7 @@ class PoliticianDetailsPage extends Component {
       politicianUrl: '',
       politicianWeVoteIdForDisplay: '', // We don't clear politicianWeVoteId because we may need it to load next politician
       politicianSEOFriendlyPathForDisplay: '', // We don't clear politicianSEOFriendlyPath because we may need it to load next politician
+      profileImageBackgroundColor: '',
       stateText: '',
       twitterFollowersCount: 0,
       twitterHandle: '',
@@ -449,7 +452,7 @@ class PoliticianDetailsPage extends Component {
       politicianDescription, politicianDescriptionLimited, politicianImageUrlLarge,
       politicianSEOFriendlyPath, politicianSEOFriendlyPathForDisplay,
       politicianName, politicianUrl,
-      politicianWeVoteId, politicianWeVoteIdForDisplay,
+      politicianWeVoteId, politicianWeVoteIdForDisplay, profileImageBackgroundColor,
       stateText, twitterHandle, twitterHandle2, twitterFollowersCount,
       voterCanEditThisPolitician, voterSupportsThisPolitician,
       wikipediaUrl, // youtubeUrl,
@@ -728,7 +731,7 @@ class PoliticianDetailsPage extends Component {
           <DetailsSectionMobile className="u-show-mobile">
             <CampaignImageMobileWrapper id="cimw3">
               {politicianImageUrlLarge ? (
-                <PoliticianImageMobilePlaceholder limitCardWidth>
+                <PoliticianImageMobilePlaceholder limitCardWidth profileImageBackgroundColor={profileImageBackgroundColor}>
                   <PoliticianImageMobile src={politicianImageUrlLarge} alt="Politician" />
                 </PoliticianImageMobilePlaceholder>
               ) : (
@@ -904,7 +907,7 @@ class PoliticianDetailsPage extends Component {
               <ColumnTwoThirds>
                 <CampaignImageDesktopWrapper>
                   {politicianImageUrlLarge ? (
-                    <PoliticianImageDesktopPlaceholder limitCardWidth>
+                    <PoliticianImageDesktopPlaceholder limitCardWidth profileImageBackgroundColor={profileImageBackgroundColor}>
                       <PoliticianImageDesktop src={politicianImageUrlLarge} alt="Politician" />
                     </PoliticianImageDesktopPlaceholder>
                   ) : (

diff --git a/src/js/common/utils/politicianUtils.js b/src/js/common/utils/politicianUtils.js
@@ -25,6 +25,7 @@ export function getPoliticianValuesFromIdentifiers (politicianSEOFriendlyPath, p
   let politicianSEOFriendlyPathFromObject = '';
   let politicianUrl = '';
   let politicianWeVoteIdFromObject = '';
+  let profileImageBackgroundColor = '';
   let stateCode = '';
   let twitterFollowersCount = 0;
   let twitterHandle = '';
@@ -54,6 +55,7 @@ export function getPoliticianValuesFromIdentifiers (politicianSEOFriendlyPath, p
       politician_twitter_handle2: twitterHandle2,
       politician_url: politicianUrl,
       politician_we_vote_id: politicianWeVoteIdFromObject,
+      profile_image_background_color: profileImageBackgroundColor,
       state_code: stateCode,
       twitter_followers_count: twitterFollowersCount,
       voter_is_politician_owner: voterIsPoliticianOwner,
@@ -98,6 +100,7 @@ export function getPoliticianValuesFromIdentifiers (politicianSEOFriendlyPath, p
     politicianName,
     politicianUrl,
     politicianWeVoteId: politicianWeVoteIdFromObject,
+    profileImageBackgroundColor,
     stateCode,
     twitterFollowersCount,
     twitterHandle,

diff --git a/src/js/components/CandidateListRoot/CandidateCardForList.jsx b/src/js/components/CandidateListRoot/CandidateCardForList.jsx
@@ -255,6 +255,7 @@ class CandidateCardForList extends Component {
       // is_supporters_count_minimum_exceeded: isSupportersCountMinimumExceeded,
       party: politicalParty,
       politician_we_vote_id: politicianWeVoteId,
+      profile_image_background_color: profileImageBackgroundColor,
       state_code: stateCode,
       supporters_count: supportersCount,
       supporters_count_next_goal: supportersCountNextGoalRaw,
@@ -445,7 +446,7 @@ class CandidateCardForList extends Component {
             </OneCampaignTextColumn>
             <OneCampaignPhotoWrapperMobile id="candidatePhotoMobile" className="u-cursor--pointer u-show-mobile" onClick={this.onCandidateClick}>
               {candidatePhotoLargeUrl ? (
-                <CampaignImageMobilePlaceholder id="cimp4">
+                <CampaignImageMobilePlaceholder id="cimp4" profileImageBackgroundColor={profileImageBackgroundColor}>
                   <CampaignImageMobile src={candidatePhotoLargeUrl} alt="" />
                 </CampaignImageMobilePlaceholder>
               ) : (
@@ -460,15 +461,23 @@ class CandidateCardForList extends Component {
               {candidatePhotoLargeUrl ? (
                 <>
                   {limitCardWidth ? (
-                    <CampaignImageDesktopPlaceholder limitCardWidth={limitCardWidth} id="cidp4">
+                    <CampaignImageDesktopPlaceholder
+                      id="cidp4"
+                      limitCardWidth={limitCardWidth}
+                      profileImageBackgroundColor={profileImageBackgroundColor}
+                    >
                       <CampaignImageDesktop src={candidatePhotoLargeUrl} alt="" width="157px" height="157px" />
                     </CampaignImageDesktopPlaceholder>
                   ) : (
                     <CampaignImageDesktop src={candidatePhotoLargeUrl} alt="" width="117px" height="117px" />
                   )}
                 </>
               ) : (
-                <CampaignImageDesktopPlaceholder limitCardWidth={limitCardWidth} id="cidp5">
+                <CampaignImageDesktopPlaceholder
+                  id="cidp5"
+                  limitCardWidth={limitCardWidth}
+                  profileImageBackgroundColor={profileImageBackgroundColor}
+                >
                   <CampaignImagePlaceholderText>
                     No image provided
                   </CampaignImagePlaceholderText>

diff --git a/src/js/components/RepresentativeListRoot/RepresentativeCardForList.jsx b/src/js/components/RepresentativeListRoot/RepresentativeCardForList.jsx
@@ -254,6 +254,7 @@ class RepresentativeCardForList extends Component {
       // is_supporters_count_minimum_exceeded: isSupportersCountMinimumExceeded,
       political_party: politicalParty,
       politician_we_vote_id: politicianWeVoteId,
+      profile_image_background_color: profileImageBackgroundColor,
       representative_photo_url_large: representativePhotoLargeUrl,
       representative_ultimate_election_date: representativeUltimateElectionDate,
       // seo_friendly_path: politicianSEOFriendlyPath,
@@ -422,7 +423,7 @@ class RepresentativeCardForList extends Component {
             </OneCampaignTextColumn>
             <OneCampaignPhotoWrapperMobile className="u-cursor--pointer u-show-mobile" onClick={this.onRepresentativeClick}>
               {representativePhotoLargeUrl ? (
-                <CampaignImageMobilePlaceholder id="cimp5">
+                <CampaignImageMobilePlaceholder id="cimp5" profileImageBackgroundColor={profileImageBackgroundColor}>
                   <CampaignImageMobile src={representativePhotoLargeUrl} alt="" />
                 </CampaignImageMobilePlaceholder>
               ) : (
@@ -437,15 +438,23 @@ class RepresentativeCardForList extends Component {
               {representativePhotoLargeUrl ? (
                 <>
                   {limitCardWidth ? (
-                    <CampaignImageDesktopPlaceholder limitCardWidth={limitCardWidth} id="cidp1">
+                    <CampaignImageDesktopPlaceholder
+                      id="cidp1"
+                      limitCardWidth={limitCardWidth}
+                      profileImageBackgroundColor={profileImageBackgroundColor}
+                    >
                       <CampaignImageDesktop src={representativePhotoLargeUrl} alt="" width="157px" height="157px" />
                     </CampaignImageDesktopPlaceholder>
                   ) : (
                     <CampaignImageDesktop src={representativePhotoLargeUrl} alt="" width="117px" height="117px" />
                   )}
                 </>
               ) : (
-                <CampaignImageDesktopPlaceholder limitCardWidth={limitCardWidth} id="cidp2">
+                <CampaignImageDesktopPlaceholder
+                  id="cidp2"
+                  limitCardWidth={limitCardWidth}
+                  profileImageBackgroundColor={profileImageBackgroundColor}
+                >
                   <CampaignImagePlaceholderText>
                     No image provided
                   </CampaignImagePlaceholderText>