Merge pull request #4202 from jedwardmook/WV-862

WV-659 PoliticianDetailsPage: VoterPositionEntryAndDisplay on a Ballot Item & WV-485 PoliticianDetailsPage animate fixed header when in mobile mode & WV-862 Democracy Challenges Cards: Adjust to be 250px wide[Team Review/ Merge Ready]
wevote · Dec 13, 2024 · 0400a3f · 0400a3f
2 parents fffe8b4 + d3053fa
commit 0400a3f
Show file tree

Hide file tree

Showing 8 changed files with 347 additions and 63 deletions.
diff --git a/src/js/common/components/Challenge/ChallengeAbout.jsx b/src/js/common/components/Challenge/ChallengeAbout.jsx
@@ -10,7 +10,6 @@ import ChallengeParticipantStore from '../../stores/ChallengeParticipantStore';
 import ChallengeStore from '../../stores/ChallengeStore';
 import AppObservableStore, { messageService } from '../../stores/AppObservableStore';
 import normalizedImagePath from '../../utils/normalizedImagePath';
-
 import rocketShipNoThrust from '../../../../img/global/svg-icons/rocket-ship-no-thrust.svg';
 
 function ChallengeAbout ({ challengeWeVoteId, showDaysLeft }) {
@@ -178,15 +177,15 @@ const styles = () => ({
 });
 
 export const CampaignOutlinedStyled = styled(CampaignOutlined)`
-  font-size: 30px;
+  font-size: 25px;
 `;
 
 export const EmojiEventsOutlinedStyled = styled(EmojiEventsOutlined)`
   margin-top: 2px;
 `;
 
 export const EventOutlinedStyled = styled(EventOutlined)`
-  font-size: 25px;
+  font-size: 28px;
 `;
 
 export const CardForListRow = styled('div')`
@@ -197,11 +196,25 @@ export const CardForListRow = styled('div')`
 `;
 
 export const CardRowsWrapper = styled('div')`
-  margin-top: 2px;
+  margin: 2px 0 0 2px;
+  padding-bottom: 20px;
+  overflow-y: auto;
+  height: 170px;
 `;
 
 const ChallengeAboutWrapper = styled('div')`
   white-space: normal;
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 15px;
+    background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
+    pointer-events: none;
 `;
 
 const ChallengeOwnersDiv = styled('div')`
@@ -222,14 +235,15 @@ export const FlexDivLeft = styled('div')`
 `;
 
 export const SvgImageWrapper = styled('div')`
-  align-items: center;
-  display: flex;
-  justify-content: center;
+  // align-items: center;
+  // display: flex;
+  // justify-content: center;
   max-width: 35px;
-  min-width: 35px;
+  // min-width: 35px;
   width: 35px;
   margin-right: 5px;
   margin-top: -4px;
+  margin-left: -3px
 `;
 
 export const ChallengeDatesDiv = styled('div')`

diff --git a/src/js/common/components/Challenge/JoinChallengeAndLearnMoreButtons.jsx b/src/js/common/components/Challenge/JoinChallengeAndLearnMoreButtons.jsx
@@ -32,23 +32,25 @@ const styles = () => ({
   joinChallengeButton: {
     borderRadius: 45,
     maxWidth: 300,
-//     background: 'var(--Primary-600, #0858A1)',
-//     border: '1px solid var(--Primary-400, #4187C6)',
-//     color: 'var(--WhiteUI, #FFFFFF)',
-    marginRight: '10px',
+    //    background: 'var(--Primary-600, #0858A1)',
+    //     border: '1px solid var(--Primary-400, #4187C6)',
+    //     color: 'var(--WhiteUI, #FFFFFF)',
+    marginRight: '5px',
     marginTop: '10px',
+    fontSize: '14px',
   },
-  learnMoreButton:{
+  learnMoreButton: {
     borderRadius: 45,
     maxWidth: 300,
-//     background: 'white',
-//     border: '1px solid var(--Primary-400, #4187C6)',
-//     color: 'var(--Neutral-900, #2A2A2C)',
+    //     background: 'white',
+    //     border: '1px solid var(--Primary-400, #4187C6)',
+    //     color: 'var(--Neutral-900, #2A2A2C)',
     marginTop: '10px',
-//     '&:hover': {
-//       backgroundColor: 'white',
-//       color: 'var(--Neutral-900, #2A2A2C)',
-//     },
+    fontSize: '14px',
+    //     '&:hover': {
+    //       backgroundColor: 'white',
+    //       color: 'var(--Neutral-900, #2A2A2C)',
+    //     },
   },
 });
 

diff --git a/src/js/common/components/ChallengeListRoot/ChallengeCardForListBody.jsx b/src/js/common/components/ChallengeListRoot/ChallengeCardForListBody.jsx
@@ -177,8 +177,9 @@ function ChallengeCardForListBody (props) {
                         style={useVerticalCard ? {
                           borderBottom: `1px solid ${DesignTokenColors.neutralUI100}`,
                           borderTop: `1px solid ${DesignTokenColors.neutralUI100}`,
+                          borderRadius: '12px',
                         } : {}}
-                        width={limitCardWidth ? '257px' : '320px'}
+                        width={limitCardWidth ? '250px' : '320px'}
                         height={limitCardWidth ? '157px' : '168px'}
                       />
                     </ChallengeImageDesktopPlaceholder>

diff --git a/src/js/common/components/ChallengeListRoot/ChallengeCardList.jsx b/src/js/common/components/ChallengeListRoot/ChallengeCardList.jsx
@@ -168,7 +168,7 @@ class ChallengeCardList extends Component {
       return null;
     }
     let numberDisplayed = 0;
-    const pigsCanFly = false;
+    const pigsCanFly = true;
     return (
       <Wrapper>
         <ListWrapper useVerticalCard={useVerticalCard}>
@@ -302,21 +302,20 @@ const ChallengeCardForListVerticalWrapper = styled('div')`
   display: flex;
   flex-direction: column;
   // height: ${isWebApp() ? '100%' : 'unset'};
-  height: 440px;
+  height: 450px;
   position: relative;
   width: 80%;
-  max-width: 300px;
+  max-width: 250px;
+  margin-right: 5px;
 `;
 
-const JoinedButtonsInnerWrapper = styled('div')`
-  width: 95%;
-`;
+const JoinedButtonsInnerWrapper = styled('div')``;
 
 const JoinedButtonsOuterWrapper = styled('div')`
   bottom: 0;
   display: flex;
-  justify-content: center;
   position: absolute;
+  width: 250px;
 `;
 
 const JoinedAndDaysForChallengePage = styled('div')`