Skip to content

Commit

Permalink
Merge pull request #3992 from StevenSmith-code/WV-312-replace-placeho…
Browse files Browse the repository at this point in the history 
…lder-avatar-with-candidate-initials

[WV-312] replace placeholder avatar with candidate initials [TEAM REVIEW]
  • Loading branch information
@DaleMcGrew
DaleMcGrew committed Aug 21, 2024
2 parents 9717b9e + 4ce4856 commit 9b2e2cf
Show file tree
Hide file tree
Showing 11 changed files with 97 additions and 43 deletions.
7 changes: 4 additions & 3 deletions src/js/common/components/Campaign/CampaignCommentForList.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { AccountCircle } from '@mui/icons-material';
import { Avatar } from '@mui/material';
import withStyles from '@mui/styles/withStyles';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
Expand All @@ -20,6 +20,7 @@ import stringContains from '../../utils/stringContains';
import CampaignStore from '../../stores/CampaignStore';
import CampaignSupporterStore from '../../stores/CampaignSupporterStore';
import VoterStore from '../../../stores/VoterStore';
import speakerDisplayNameToInitials from '../../utils/speakerDisplayNameToInitials';

class CampaignCommentForList extends Component {
constructor (props) {
Expand Down Expand Up @@ -94,7 +95,6 @@ class CampaignCommentForList extends Component {
if (isCordova()) {
console.log(`CampaignCommentForList window.location.href: ${window.location.href}`);
}
const { classes } = this.props;
const { campaignXSupporter, pathToUseToEditSupporterEndorsement, showFullSupporterEndorsement, voterWeVoteId } = this.state;
if (!campaignXSupporter || !('id' in campaignXSupporter)) {
return null;
Expand All @@ -107,6 +107,7 @@ class CampaignCommentForList extends Component {
voter_we_vote_id: supporterVoterWeVoteId,
we_vote_hosted_profile_image_url_tiny: voterPhotoUrlTiny,
} = campaignXSupporter;
const { sx, children } = speakerDisplayNameToInitials(supporterName);
// console.log('supporterVoterWeVoteId:', supporterVoterWeVoteId);
return (
<Wrapper>
Expand All @@ -124,7 +125,7 @@ class CampaignCommentForList extends Component {
alt="Your Settings"
/>
) : (
<AccountCircle classes={{ root: classes.accountCircleRoot }} />
<Avatar sx={sx}>{children}</Avatar>
)}
</CommentVoterPhotoWrapper>
<CommentTextWrapper>
Expand Down
8 changes: 5 additions & 3 deletions src/js/common/components/Campaign/CampaignNewsItemForList.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { AccountCircle } from '@mui/icons-material';
import styled from 'styled-components';
import withStyles from '@mui/styles/withStyles';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import TruncateMarkup from 'react-truncate-markup';
import { Avatar } from '@mui/material';
import { avatarGeneric } from '../../../utils/applicationUtils';
import LazyImage from '../LazyImage';
import { timeFromDate } from '../../utils/dateFormat';
Expand All @@ -13,6 +13,7 @@ import stringContains from '../../utils/stringContains';
import CampaignStore from '../../stores/CampaignStore';
import { ReadMoreSpan, SpeakerAndPhotoOuterWrapper, SpeakerName, SpeakerVoterPhotoWrapper } from '../Style/CampaignDetailsStyles';
import { BlockedIndicator, DraftModeIndicator, EditIndicator, IndicatorButtonWrapper, IndicatorDefaultButtonWrapper, IndicatorRow } from '../Style/CampaignIndicatorStyles';
import speakerDisplayNameToInitials from '../../utils/speakerDisplayNameToInitials';

class CampaignNewsItemForList extends Component {
constructor (props) {
Expand Down Expand Up @@ -124,7 +125,7 @@ class CampaignNewsItemForList extends Component {

render () {
renderLog('CampaignNewsItemForList'); // Set LOG_RENDER_EVENTS to log all renders
const { campaignXNewsItemWeVoteId, classes } = this.props;
const { campaignXNewsItemWeVoteId } = this.props;
const {
campaignNewsSubject,
campaignNewsText,
Expand All @@ -135,6 +136,7 @@ class CampaignNewsItemForList extends Component {
speakerProfileImageUrlTiny,
voterCanEditThisCampaign,
} = this.state;
const { sx, children } = speakerDisplayNameToInitials(speakerName);
if (!campaignNewsSubject && !campaignNewsText) {
return null;
}
Expand Down Expand Up @@ -182,7 +184,7 @@ class CampaignNewsItemForList extends Component {
alt="Your Settings"
/>
) : (
<AccountCircle classes={{ root: classes.accountCircleRoot }} />
<Avatar sx={sx}>{children}</Avatar>
)}
</SpeakerVoterPhotoWrapper>
<SpeakerAndTimeWrapper>
Expand Down
11 changes: 7 additions & 4 deletions src/js/common/components/CampaignSupport/MostRecentCampaignSupport.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { AccountCircle } from '@mui/icons-material';
import withStyles from '@mui/styles/withStyles';
import PropTypes from 'prop-types';
import React, { createRef } from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
import { Avatar } from '@mui/material';
import { avatarGeneric } from '../../../utils/applicationUtils';
import LazyImage from '../LazyImage';
import {
Expand All @@ -18,6 +18,8 @@ import stringContains from '../../utils/stringContains';
import CampaignStore from '../../stores/CampaignStore';
import CampaignSupporterStore from '../../stores/CampaignSupporterStore';
import VoterStore from '../../../stores/VoterStore';
import speakerDisplayNameToInitials from '../../utils/speakerDisplayNameToInitials';
import speakerDisplayNameToAvatarColor from '../../utils/speakerDisplayNameToAvatarColor';

class MostRecentCampaignSupport extends React.Component {
constructor (props) {
Expand Down Expand Up @@ -255,7 +257,6 @@ class MostRecentCampaignSupport extends React.Component {

render () {
renderLog('MostRecentCampaignSupport'); // Set LOG_RENDER_EVENTS to log all renders
const { classes } = this.props;
const { supportersOnStageNow, voterWeVoteId } = this.state;
// console.log('MostRecentCampaignSupport render voterWeVoteId: ', voterWeVoteId, ', supportersOnStageNow:', supportersOnStageNow);

Expand All @@ -267,7 +268,7 @@ class MostRecentCampaignSupport extends React.Component {
ref={this.commentsWrapperDiv}
onScroll={() => this.handleScroll()}
>
{supportersOnStageNow.map((comment) => (
{supportersOnStageNow.map((comment) => (
<CommentWrapper className="comment" key={comment.id}>
<CommentVoterPhotoWrapper>
{comment.we_vote_hosted_profile_image_url_medium ? (
Expand All @@ -280,7 +281,9 @@ class MostRecentCampaignSupport extends React.Component {
alt="Your Settings"
/>
) : (
<AccountCircle classes={{ root: classes.accountCircleRoot }} />
<Avatar sx={speakerDisplayNameToAvatarColor(comment.supporter_name)}>
{speakerDisplayNameToInitials(comment.supporter_name)}
</Avatar>
)}
</CommentVoterPhotoWrapper>
<CommentTextWrapper>
Expand Down
9 changes: 6 additions & 3 deletions src/js/common/components/Politician/PoliticianEndorsementForList.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { AccountCircle } from '@mui/icons-material';
import withStyles from '@mui/styles/withStyles';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import TruncateMarkup from 'react-truncate-markup';
import styled from 'styled-components';
import { Avatar } from '@mui/material';
import { avatarGeneric } from '../../../utils/applicationUtils';
import LazyImage from '../LazyImage';
import {
Expand All @@ -20,6 +20,8 @@ import { renderLog } from '../../utils/logging';
import stringContains from '../../utils/stringContains';
import PoliticianStore from '../../stores/PoliticianStore';
import VoterStore from '../../../stores/VoterStore';
import speakerDisplayNameToInitials from '../../utils/speakerDisplayNameToInitials';


class PoliticianEndorsementForList extends Component {
constructor (props) {
Expand Down Expand Up @@ -78,7 +80,7 @@ class PoliticianEndorsementForList extends Component {
if (isCordova()) {
console.log(`PoliticianEndorsementForList window.location.href: ${window.location.href}`);
}
const { classes, position } = this.props;
const { position } = this.props;
const { pathToUseToEditSupporterEndorsement, showFullSupporterEndorsement, todayAsInteger, voterWeVoteId } = this.state;
if (!position || !('position_we_vote_id' in position)) {
return null;
Expand All @@ -95,6 +97,7 @@ class PoliticianEndorsementForList extends Component {
speaker_image_url_https_medium: speakerImageMedium,
twitter_followers_count: twitterFollowersCount,
} = position;
const { sx, children } = speakerDisplayNameToInitials(speakerDisplayName);
let howLongAgoOrThisYear = '';
const currentYear = new Date().getFullYear();
// console.log('currentYear', currentYear, ', positionYear', positionYear);
Expand Down Expand Up @@ -124,7 +127,7 @@ class PoliticianEndorsementForList extends Component {
alt=""
/>
) : (
<AccountCircle classes={{ root: classes.accountCircleRoot }} />
<Avatar sx={sx}>{children}</Avatar>
)}
</CommentVoterPhotoWrapper>
<CommentTextWrapper>
Expand Down
31 changes: 13 additions & 18 deletions src/js/common/components/Style/DesignTokenColors.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ const primitiveColorNames = {
blueUI700: '#1073D4',
blueUI800: '#0E62C2',
blueUI900: '#0943A3',

gray50: '#F2F2F0',
gray100: '#D2D2D2',
gray200: '#B7B7B7',
Expand All @@ -40,7 +39,6 @@ const primitiveColorNames = {
grayUI700: '#575757',
grayUI800: '#4A4A4A',
grayUI900: '#3D3D3D',

greenUI50: '#E5F4E3',
greenUI100: '#C1E4BB',
greenUI200: '#9CD299',
Expand All @@ -51,7 +49,6 @@ const primitiveColorNames = {
greenUI700: '#008900',
greenUI800: '#007800',
greenUI900: '#005A00',

orange50: '#FCEFE4',
orange100: '#FBC89C',
orange200: '#FBA255',
Expand All @@ -72,7 +69,6 @@ const primitiveColorNames = {
orangeUI700: '#E4531B',
orangeUI800: '#D74C19',
orangeUI900: '#BE3E14',

redUI50: '#FFE8EB',
redUI100: '#FEC8CC',
redUI200: '#F4908E',
Expand All @@ -93,7 +89,6 @@ const primitiveColorNames = {
red700: '#8B1A32',
red800: '#74162A',
red900: '#53101E',

steel50: '#ECF2F7',
steel100: '#C8D4DF',
steel200: '#A7BACD',
Expand All @@ -104,9 +99,7 @@ const primitiveColorNames = {
steel700: '#2C4A66',
steel800: '#1F3A53',
steel900: '#142B41',

white: '#FFFFFF',

yellowUI50: '#FBF6DF',
yellowUI100: '#FAE8AE',
yellowUI200: '#F6DA79',
Expand All @@ -119,6 +112,8 @@ const primitiveColorNames = {
yellowUI900: '#9E7100',
};



// These are semanticColorNames
const DesignTokenColors = {
accent50: primitiveColorNames.orange50,
Expand All @@ -131,18 +126,27 @@ const DesignTokenColors = {
accent700: primitiveColorNames.orange700,
accent800: primitiveColorNames.orange800,
accent900: primitiveColorNames.orange900,

alert50: primitiveColorNames.redUI50,
alert100: primitiveColorNames.redUI100,
alert200: primitiveColorNames.redUI200,
alert300: primitiveColorNames.redUI300,
alert400: primitiveColorNames.redUI400,
alert500: primitiveColorNames.redUI500,
avatarBlue700: primitiveColorNames.blueUI700,
avatarBlue900: primitiveColorNames.blueUI900,
avatarBlue200: primitiveColorNames.blueUI200,
avatarGreen400: primitiveColorNames.greenUI400,
avatarGreen900: primitiveColorNames.greenUI900,
avatarOrange400: primitiveColorNames.orangeUI400,
avatarRed400: primitiveColorNames.redUI400,
avatarRed800: primitiveColorNames.redUI800,
avatarYellow700: primitiveColorNames.yellowUI700,
avatarYellow900: primitiveColorNames.yellowUI900,
avatargray600: primitiveColorNames.grayUI600,
alert600: primitiveColorNames.redUI600,
alert700: primitiveColorNames.redUI700,
alert800: primitiveColorNames.redUI800,
alert900: primitiveColorNames.redUI900,

caution50: primitiveColorNames.yellowUI50,
caution100: primitiveColorNames.yellowUI100,
caution200: primitiveColorNames.yellowUI200,
Expand All @@ -153,7 +157,6 @@ const DesignTokenColors = {
caution700: primitiveColorNames.yellowUI700,
caution800: primitiveColorNames.yellowUI800,
caution900: primitiveColorNames.yellowUI900,

confirmation50: primitiveColorNames.greenUI50,
confirmation100: primitiveColorNames.greenUI100,
confirmation200: primitiveColorNames.greenUI200,
Expand All @@ -164,7 +167,6 @@ const DesignTokenColors = {
confirmation700: primitiveColorNames.greenUI700,
confirmation800: primitiveColorNames.greenUI800,
confirmation900: primitiveColorNames.greenUI900,

info50: primitiveColorNames.blueUI50,
info100: primitiveColorNames.blueUI100,
info200: primitiveColorNames.blueUI200,
Expand All @@ -175,7 +177,6 @@ const DesignTokenColors = {
info700: primitiveColorNames.blueUI700,
info800: primitiveColorNames.blueUI800,
info900: primitiveColorNames.blueUI900,

neutral50: primitiveColorNames.gray50,
neutral100: primitiveColorNames.gray100,
neutral200: primitiveColorNames.gray200,
Expand All @@ -186,7 +187,6 @@ const DesignTokenColors = {
neutral700: primitiveColorNames.gray700,
neutral800: primitiveColorNames.gray800,
neutral900: primitiveColorNames.gray900,

neutralUI50: primitiveColorNames.grayUI50,
neutralUI100: primitiveColorNames.grayUI100,
neutralUI200: primitiveColorNames.grayUI200,
Expand All @@ -197,7 +197,6 @@ const DesignTokenColors = {
neutralUI700: primitiveColorNames.grayUI700,
neutralUI800: primitiveColorNames.grayUI800,
neutralUI900: primitiveColorNames.grayUI900,

primary50: primitiveColorNames.blue50,
primary100: primitiveColorNames.blue100,
primary200: primitiveColorNames.blue200,
Expand All @@ -208,7 +207,6 @@ const DesignTokenColors = {
primary700: primitiveColorNames.blue700,
primary800: primitiveColorNames.blue800,
primary900: primitiveColorNames.blue900,

secondary50: primitiveColorNames.steel50,
secondary100: primitiveColorNames.steel100,
secondary200: primitiveColorNames.steel200,
Expand All @@ -219,7 +217,6 @@ const DesignTokenColors = {
secondary700: primitiveColorNames.steel700,
secondary800: primitiveColorNames.steel800,
secondary900: primitiveColorNames.steel900,

tertiary50: primitiveColorNames.red50,
tertiary100: primitiveColorNames.red100,
tertiary200: primitiveColorNames.red200,
Expand All @@ -230,7 +227,6 @@ const DesignTokenColors = {
tertiary700: primitiveColorNames.red700,
tertiary800: primitiveColorNames.red800,
tertiary900: primitiveColorNames.red900,

warning50: primitiveColorNames.orangeUI50,
warning100: primitiveColorNames.orangeUI100,
warning200: primitiveColorNames.orangeUI200,
Expand All @@ -241,7 +237,6 @@ const DesignTokenColors = {
warning700: primitiveColorNames.orangeUI700,
warning800: primitiveColorNames.orangeUI800,
warning900: primitiveColorNames.orangeUI900,

whiteUI: primitiveColorNames.white,
};

Expand Down
8 changes: 5 additions & 3 deletions src/js/common/pages/Campaign/CampaignNewsItemDetailsPage.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { AccountCircle, ArrowBack } from '@mui/icons-material';
import { Button } from '@mui/material';
import { ArrowBack } from '@mui/icons-material';
import { Avatar, Button } from '@mui/material';
import withStyles from '@mui/styles/withStyles';
import PropTypes from 'prop-types';
import React, { Component, Suspense } from 'react';
Expand Down Expand Up @@ -29,6 +29,7 @@ import keepHelpingDestination from '../../utils/keepHelpingDestination';
import { renderLog } from '../../utils/logging';
import returnFirstXWords from '../../utils/returnFirstXWords';
import stringContains from '../../utils/stringContains';
import speakerDisplayNameToInitials from '../../utils/speakerDisplayNameToInitials';

const CampaignCommentsList = React.lazy(() => import(/* webpackChunkName: 'CampaignCommentsList' */ '../../components/Campaign/CampaignCommentsList'));
const CampaignDetailsActionSideBox = React.lazy(() => import(/* webpackChunkName: 'CampaignDetailsActionSideBox' */ '../../components/CampaignSupport/CampaignDetailsActionSideBox'));
Expand Down Expand Up @@ -318,6 +319,7 @@ class CampaignNewsItemDetailsPage extends Component {
speakerName, speakerProfileImageUrlTiny,
voterCanEditThisCampaign, weVoteHostedProfileImageUrlLarge,
} = this.state;
const { sx, children } = speakerDisplayNameToInitials(speakerName);
const htmlTitle = `${campaignTitle} - ${chosenWebsiteName}`;
if (isBlockedByWeVote && !voterCanEditThisCampaign) {
return (
Expand Down Expand Up @@ -372,7 +374,7 @@ class CampaignNewsItemDetailsPage extends Component {
alt={speakerName}
/>
) : (
<AccountCircle classes={{ root: classes.accountCircleRoot }} />
<Avatar sx={sx}>{children}</Avatar>
)}
</SpeakerVoterPhotoWrapper>
<SpeakerName>
Expand Down
22 changes: 22 additions & 0 deletions src/js/common/utils/speakerDisplayNameToAvatarColor.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import DesignTokenColors from '../components/Style/DesignTokenColors';

function speakerDisplayNameToAvatarColor (speakerDisplayName) {
let hashForRandomIndexValue = 0;
/* eslint-disable no-bitwise */
for (let i = 0; i < speakerDisplayName.length; i += 1) {
hashForRandomIndexValue =
speakerDisplayName.charCodeAt(i) +
((hashForRandomIndexValue << 5) - hashForRandomIndexValue);
}
const avatarColorKeys = Object.keys(DesignTokenColors).filter((key) => key.startsWith('avatar'));
/* eslint-enable no-bitwise */
if (avatarColorKeys.length === 0) {
console.error('No avatar colors found in DesignTokenColors.');
return DesignTokenColors.avatarBlue700;
}
const colorIndex = Math.abs(hashForRandomIndexValue) % avatarColorKeys.length;
const colorKey = avatarColorKeys[colorIndex];
return DesignTokenColors[colorKey];
}

export default speakerDisplayNameToAvatarColor;
Loading

0 comments on commit 9b2e2cf

Please sign in to comment.