diff --git a/src/js/common/components/Challenge/ChallengeAbout.jsx b/src/js/common/components/Challenge/ChallengeAbout.jsx
index 57caf0d12..e66ff122a 100644
--- a/src/js/common/components/Challenge/ChallengeAbout.jsx
+++ b/src/js/common/components/Challenge/ChallengeAbout.jsx
@@ -199,7 +199,7 @@ export const CardRowsWrapper = styled('div')`
margin: 2px 0 0 2px;
padding-bottom: 20px;
overflow-y: auto;
- height: 165px;
+ height: 250px;
@media screen and (min-width: 786px) {
height: auto;
diff --git a/src/js/common/components/Challenge/JoinChallengeAndLearnMoreButtons.jsx b/src/js/common/components/Challenge/JoinChallengeAndLearnMoreButtons.jsx
index 27282bac0..b34cdefaa 100644
--- a/src/js/common/components/Challenge/JoinChallengeAndLearnMoreButtons.jsx
+++ b/src/js/common/components/Challenge/JoinChallengeAndLearnMoreButtons.jsx
@@ -37,9 +37,6 @@ const styles = () => ({
// background: 'var(--Primary-600, #0858A1)',
// border: '1px solid var(--Primary-400, #4187C6)',
// color: 'var(--WhiteUI, #FFFFFF)',
- marginRight: '5px',
- marginTop: '10px',
- fontSize: '14px',
},
learnMoreButton: {
borderRadius: 45,
@@ -48,7 +45,7 @@ const styles = () => ({
// background: 'white',
// border: '1px solid var(--Primary-400, #4187C6)',
// color: 'var(--Neutral-900, #2A2A2C)',
- marginTop: '10px',
+ // marginTop: '10px',
fontSize: '14px',
// '&:hover': {
// backgroundColor: 'white',
diff --git a/src/js/common/components/Challenge/JoinChallengeButton.jsx b/src/js/common/components/Challenge/JoinChallengeButton.jsx
index 3bcf26bcd..f8cad855a 100644
--- a/src/js/common/components/Challenge/JoinChallengeButton.jsx
+++ b/src/js/common/components/Challenge/JoinChallengeButton.jsx
@@ -243,22 +243,19 @@ JoinChallengeButton.propTypes = {
const styles = () => ({
buttonDesktop: {
- // borderRadius: 45,
- // minWidth: '110px',
width: '100%',
borderRadius: 45,
minWidth: 110,
// background: 'var(--Primary-600, #0858A1)',
- // border: '1px solid var(--Primary-400, #4187C6)',
- // color: 'var(--WhiteUI, #FFFFFF)',
- marginRight: '5px',
- marginTop: '10px',
- fontSize: '14px',
+ // border: '1px solid var(--Primary-400, #4187C6)',
+ // color: 'var(--WhiteUI, #FFFFFF)',
+ marginRight: 5,
+ marginTop: 0,
+ fontSize: 14,
},
});
const JoinChallengeButtonWrapper = styled('div')`
- align-items: center;
`;
export default withStyles(styles)(JoinChallengeButton);
diff --git a/src/js/common/components/ChallengeListRoot/ChallengeCardForList.jsx b/src/js/common/components/ChallengeListRoot/ChallengeCardForList.jsx
index 4fe9a4c24..ae5d55508 100644
--- a/src/js/common/components/ChallengeListRoot/ChallengeCardForList.jsx
+++ b/src/js/common/components/ChallengeListRoot/ChallengeCardForList.jsx
@@ -239,7 +239,7 @@ class ChallengeCardForList extends Component {
render () {
renderLog('ChallengeCardForList'); // Set LOG_RENDER_EVENTS to log all renders
- const { challengeWeVoteId, joinedAndDaysLeftOff, limitCardWidth, titleLengthRestricted, titleLinkOff, useVerticalCard } = this.props;
+ const { challengeWeVoteId, joinedAndDaysLeftOff, limitCardWidth, titleLengthRestricted, titleLinkOff, useVerticalCard, inChallengeList } = this.props;
const { challenge, challengeSupported, voterCanEditThisChallenge } = this.state; // , inPrivateLabelMode
// const challenge = ChallengeStore.getChallengeByWeVoteId(challengeWeVoteId);
if (!challenge) {
@@ -275,6 +275,7 @@ class ChallengeCardForList extends Component {
challengeTitle={challengeTitle}
challengeWeVoteId={challengeWeVoteId}
hideCardMargins
+ inChallengeList={inChallengeList}
inDraftMode={inDraftMode}
joinedAndDaysLeftOff={joinedAndDaysLeftOff}
functionToUseToKeepHelping={this.functionToUseToKeepHelping}
@@ -304,6 +305,7 @@ ChallengeCardForList.propTypes = {
titleLengthRestricted: PropTypes.bool,
titleLinkOff: PropTypes.bool,
useVerticalCard: PropTypes.bool,
+ inChallengeList: PropTypes.bool,
};
const styles = (theme) => ({
diff --git a/src/js/common/components/ChallengeListRoot/ChallengeCardForListBody.jsx b/src/js/common/components/ChallengeListRoot/ChallengeCardForListBody.jsx
index 4dee87002..92ac6089c 100644
--- a/src/js/common/components/ChallengeListRoot/ChallengeCardForListBody.jsx
+++ b/src/js/common/components/ChallengeListRoot/ChallengeCardForListBody.jsx
@@ -34,7 +34,7 @@ function ChallengeCardForListBody (props) {
hideCardMargins, inDraftMode, joinedAndDaysLeftOff,
limitCardWidth, onChallengeClick, onChallengeClickLink,
photoLargeUrl, profileImageBackgroundColor,
- tagIdBaseName, titleLengthRestricted, titleLinkOff, useVerticalCard,
+ tagIdBaseName, titleLengthRestricted, titleLinkOff, useVerticalCard, inChallengeList,
} = props;
const politicalPartySvgNameWithPath = '../../img/global/svg-icons/political-party-unspecified.svg';
// console.log('ChallengeCardForListBody functional component photoLargeUrl:', photoLargeUrl);
@@ -114,13 +114,15 @@ function ChallengeCardForListBody (props) {
id="cimp4"
profileImageBackgroundColor={profileImageBackgroundColor}
useVerticalCard={useVerticalCard}
+ inChallengeList={inChallengeList}
>
@@ -135,6 +137,7 @@ function ChallengeCardForListBody (props) {
id="cimp2"
profileImageBackgroundColor={profileImageBackgroundColor}
useVerticalCard={useVerticalCard}
+ inChallengeList={inChallengeList}
>
) : (
@@ -223,6 +227,7 @@ function ChallengeCardForListBody (props) {
ChallengeCardForListBody.propTypes = {
challengeTitle: PropTypes.string,
challengeWeVoteId: PropTypes.string,
+ inChallengeList: PropTypes.bool,
inDraftMode: PropTypes.bool,
hideCardMargins: PropTypes.bool,
joinedAndDaysLeftOff: PropTypes.bool,
@@ -260,11 +265,12 @@ const JoinedDaysLeftOverlayMobile = styled('div')`
const JoinedDaysLeftOverlayDesktop = styled('div')`
position: absolute;
- top: 135px;
+ top: 160px;
left: 10px;
`;
export const SvgWatermarkWrapper = styled('div')`
+ margin-top: 15px;
`;
export default withStyles(styles)(ChallengeCardForListBody);
diff --git a/src/js/common/components/ChallengeListRoot/ChallengeCardList.jsx b/src/js/common/components/ChallengeListRoot/ChallengeCardList.jsx
index af6efeee5..c0663ae2e 100644
--- a/src/js/common/components/ChallengeListRoot/ChallengeCardList.jsx
+++ b/src/js/common/components/ChallengeListRoot/ChallengeCardList.jsx
@@ -168,8 +168,7 @@ class ChallengeCardList extends Component {
return null;
}
let numberDisplayed = 0;
- const pigsCanFly = true;
- const inChallengeList = true;
+ const inChallengeList = true; // checks if item is in the challenge list
return (
@@ -187,6 +186,7 @@ class ChallengeCardList extends Component {
limitCardWidth={useVerticalCard}
titleLengthRestricted
useVerticalCard={useVerticalCard}
+ inChallengeList={inChallengeList}
/>
{/* JoinedAndDaysLeft component positioned absolutely */}
@@ -199,15 +199,13 @@ class ChallengeCardList extends Component {
>
- {pigsCanFly && (
-
-
-
-
-
- )}
+
+
+
+
+
);
})}
diff --git a/src/js/common/components/Style/CampaignDetailsStyles.jsx b/src/js/common/components/Style/CampaignDetailsStyles.jsx
index 925c17e29..e28dddbd6 100644
--- a/src/js/common/components/Style/CampaignDetailsStyles.jsx
+++ b/src/js/common/components/Style/CampaignDetailsStyles.jsx
@@ -22,7 +22,7 @@ export const CampaignDescriptionDesktop = styled('div')`
export const CampaignDescriptionWrapper = styled('div', {
shouldForwardProp: (prop) => !['hideCardMargins'].includes(prop),
})(({ hideCardMargins }) => (`
- ${hideCardMargins ? 'padding: 10px 0 10px 0;' : 'margin: 10px;'}
+ ${hideCardMargins ? 'padding: 0;' : 'margin: 10px;'}
`));
export const CampaignDescriptionDesktopWrapper = styled('div')(({ theme }) => (`
diff --git a/src/js/common/components/Style/ChallengeCardStyles.jsx b/src/js/common/components/Style/ChallengeCardStyles.jsx
index 2a097c160..4f6cc4239 100644
--- a/src/js/common/components/Style/ChallengeCardStyles.jsx
+++ b/src/js/common/components/Style/ChallengeCardStyles.jsx
@@ -42,7 +42,8 @@ export const ChallengeImageDesktopPlaceholder = styled('div', {
${useVerticalCard ? 'border-radius: 12px;' : ''}
display: flex;
justify-content: flex-start;
- ${limitCardWidth ? 'height: 157px;' : `${useVerticalCard ? 'height: 157px;' : 'height: 117px;'}`}
+ align-items: center;
+ ${limitCardWidth ? 'height: 157px;' : `${useVerticalCard ? 'height: 187px;' : 'height: 117px;'}`}
${limitCardWidth ? 'min-height: 157px;' : `${useVerticalCard ? 'min-height: 157px;' : 'min-height: 117px;'}`}
justify-content: center;
${limitCardWidth ? 'width: 250px;' : `${useVerticalCard ? 'width: 320px;' : 'width: 250px;'}`}
@@ -65,19 +66,19 @@ export const ChallengeImageMobileSharedStyles = css`
`;
export const ChallengeImageMobilePlaceholder = styled('div', {
- shouldForwardProp: (prop) => !['profileImageBackgroundColor', 'useVerticalCard'].includes(prop),
-})(({ profileImageBackgroundColor, useVerticalCard }) => (`
+ shouldForwardProp: (prop) => !['profileImageBackgroundColor', 'useVerticalCard', 'inChallengeList'].includes(prop),
+})(({ profileImageBackgroundColor, useVerticalCard, inChallengeList }) => (`
// align-items: center;
background-color: ${profileImageBackgroundColor || DesignTokenColors.neutralUI50};
${useVerticalCard ? `border: 1px solid ${DesignTokenColors.neutralUI100};` : ''}
${useVerticalCard ? 'border-radius: 12px;' : ''}
display: flex;
- height: 157px;
+ // height: 157px;
justify-content: center;
max-height: 157px;
min-height: 157px;
${ChallengeImageMobileSharedStyles}
- width: 90%;
+ width: ${inChallengeList ? '90%' : '100%'};
overflow: hidden;
`));
@@ -150,9 +151,9 @@ export const OneChallengePhotoWrapperMobile = styled('div')(({ theme }) => (`
cursor: pointer;
margin-bottom: 8px;
margin-top: 8px;
- height: 157px;
- min-height: 157px;
- max-height: 157px;
+ // height: 157px;
+ // min-height: 157px;
+ // max-height: 157px;
${theme.breakpoints.down('xs')} {
margin-top: 0;
min-height: auto;
diff --git a/src/js/common/pages/Challenge/ChallengeHomePage.jsx b/src/js/common/pages/Challenge/ChallengeHomePage.jsx
index 33e6b0b30..d06c8a58b 100644
--- a/src/js/common/pages/Challenge/ChallengeHomePage.jsx
+++ b/src/js/common/pages/Challenge/ChallengeHomePage.jsx
@@ -853,14 +853,16 @@ const MobileHeaderContentContainer = styled('div')(({ theme }) => (`
const MobileHeaderOuterContainer = styled('div', {
shouldForwardProp: (prop) => !['scrolledDown'].includes(prop),
})(({ scrolledDown }) => (`
- animation: ${slideDown} 300ms ease-in; // Not currently working -- needs debugging
+ // animation: ${slideDown} 300ms ease-in; // Not currently working -- needs debugging
// transition: visibility 1s linear; // Not currently working -- needs debugging
margin-top: ${marginTopOffset(scrolledDown)};
width: 100%;
background-color: #fff;
${scrolledDown ? 'border-bottom: 1px solid #aaa' : ''};
${scrolledDown ? `box_shadow: ${standardBoxShadow('wide')}` : ''};
- ${scrolledDown ? 'display: block' : 'display: none'};
+ // ${scrolledDown ? 'display: block' : 'display: none'};
+ transform: translateY(${scrolledDown ? 0 : '-150%'});
+ transition: transform .3s ease-in-out;
overflow: hidden;
position: fixed;
z-index: 1;
diff --git a/src/js/components/Navigation/SettingsPersonalSideBar.jsx b/src/js/components/Navigation/SettingsPersonalSideBar.jsx
index 9932a6962..4c3ccf07d 100644
--- a/src/js/components/Navigation/SettingsPersonalSideBar.jsx
+++ b/src/js/components/Navigation/SettingsPersonalSideBar.jsx
@@ -149,7 +149,7 @@ export default class SettingsPersonalSideBar extends Component {
- Your Privacy & Data
+ Privacy & Data
diff --git a/src/js/components/Settings/SettingsYourData.jsx b/src/js/components/Settings/SettingsYourData.jsx
index 30bcbd0e2..9bbf86fc2 100644
--- a/src/js/components/Settings/SettingsYourData.jsx
+++ b/src/js/components/Settings/SettingsYourData.jsx
@@ -48,7 +48,7 @@ export default class SettingsYourData extends Component {
- Your Privacy & Data
+ Privacy & Data