WV-755 Add icons to Voter Account navigation and headers of each... [Team Review]

src/js/common/components/Challenge/ChallengeAbout.jsx

@@ -199,20 +199,31 @@ export const CardRowsWrapper = styled('div')`
   margin: 2px 0 0 2px;
   padding-bottom: 20px;
   overflow-y: auto;
-  height: 170px;
+  height: 165px;
+
+  @media screen and (min-width: 786px) {
+    height: auto;
+    overflow-y: visible;
+  }
 `;
 
 const ChallengeAboutWrapper = styled('div')`
   white-space: normal;
   position: relative;
+  height: auto;
+  margin-bottom: 40px;
+
+  @media screen and (min-width: 786px) {
+    margin-bottom: 20px;
+  }
 
   &::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
-    height: 15px;
+    height: 20px;
     background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
     pointer-events: none;
 `;

src/js/common/components/Challenge/JoinChallengeAndLearnMoreButtons.jsx

@@ -32,6 +32,7 @@ const styles = () => ({
   joinChallengeButton: {
     borderRadius: 45,
     maxWidth: 300,
+    minWidth: 110,
     //    background: 'var(--Primary-600, #0858A1)',
     //     border: '1px solid var(--Primary-400, #4187C6)',
     //     color: 'var(--WhiteUI, #FFFFFF)',
@@ -42,6 +43,7 @@ const styles = () => ({
   learnMoreButton: {
     borderRadius: 45,
     maxWidth: 300,
+    minWidth: 110,
     //     background: 'white',
     //     border: '1px solid var(--Primary-400, #4187C6)',
     //     color: 'var(--Neutral-900, #2A2A2C)',

src/js/common/components/ChallengeListRoot/ChallengeCardList.jsx

@@ -105,23 +105,6 @@ class ChallengeCardList extends Component {
     });
   }
 
-  increaseNumberToDisplay = () => {
-    let { numberToDisplay } = this.state;
-    numberToDisplay += NUMBER_TO_ADD_WHEN_MORE_CLICKED;
-    this.setState({
-      numberToDisplay,
-    });
-  }
-
-  loadMoreHasBeenClicked = () => {
-    this.increaseNumberToDisplay();
-    // console.log('load more has been clicked');
-    if (this.props.loadMoreScroll) {
-      // console.log('loadMoreScroll exists');
-      this.props.loadMoreScroll();
-    }
-  }
-
   onChallengeClickLink (challengeWeVoteId) {
     const challenge = ChallengeStore.getChallengeByWeVoteId(challengeWeVoteId);
     if (!challenge) {
@@ -158,6 +141,23 @@ class ChallengeCardList extends Component {
     return challengeBasePath;
   }
 
+  loadMoreHasBeenClicked = () => {
+    this.increaseNumberToDisplay();
+    // console.log('load more has been clicked');
+    if (this.props.loadMoreScroll) {
+      // console.log('loadMoreScroll exists');
+      this.props.loadMoreScroll();
+    }
+  }
+
+  increaseNumberToDisplay = () => {
+    let { numberToDisplay } = this.state;
+    numberToDisplay += NUMBER_TO_ADD_WHEN_MORE_CLICKED;
+    this.setState({
+      numberToDisplay,
+    });
+  }
+
   render () {
     renderLog('ChallengeCardList');  // Set LOG_RENDER_EVENTS to log all renders
     // console.log('ChallengeCardList render');
@@ -302,14 +302,16 @@ const ChallengeCardForListVerticalWrapper = styled('div')`
   display: flex;
   flex-direction: column;
   // height: ${isWebApp() ? '100%' : 'unset'};
-  height: 450px;
+  height: auto;
   position: relative;
   width: 80%;
   max-width: 250px;
   margin-right: 5px;
+  margin-bottom: 20px;
 `;
 
-const JoinedButtonsInnerWrapper = styled('div')``;
+const JoinedButtonsInnerWrapper = styled('div')`
+`;
 
 const JoinedButtonsOuterWrapper = styled('div')`
   bottom: 0;

src/js/common/components/ChallengeListRoot/ChallengeListRoot.jsx

@@ -23,8 +23,8 @@ import ChallengeParticipantStore from '../../stores/ChallengeParticipantStore';
 import isMobileScreenSize from '../../utils/isMobileScreenSize';
 
 const ChallengeCardList = React.lazy(() => import(/* webpackChunkName: 'ChallengeCardList' */ './ChallengeCardList'));
-const HORIZONTAL_SCROLL_DISTANCE_ON_LEFT_ARROW_CLICK = -630;
-const HORIZONTAL_SCROLL_DISTANCE_ON_RIGHT_ARROW_CLICK = 630;
+const HORIZONTAL_SCROLL_DISTANCE_ON_LEFT_ARROW_CLICK = -530;
+const HORIZONTAL_SCROLL_DISTANCE_ON_RIGHT_ARROW_CLICK = 530;
 const HORIZONTAL_SCROLL_DISTANCE_MOBILE_LEFT_ARROW_CLICK = -315;
 const HORIZONTAL_SCROLL_DISTANCE_MOBILE_RIGHT_ARROW_CLICK = 315;
 const HORIZONTAL_SCROLL_DISTANCE_ON_SHOW_MORE = 315;
@@ -79,6 +79,17 @@ class ChallengeListRoot extends Component {
     this.challengeStoreListener.remove();
   }
 
+  handleNumberOfResults (numberOfFilteredResults, numberOfSearchResults) {
+    // console.log('RepresentativeListRoot handleNumberOfResults numberOfFilteredResults:', numberOfFilteredResults, ', numberOfSearchResults:', numberOfSearchResults);
+    if (this.props.handleNumberOfResults) {
+      // Delay telling the parent component that the number of results has changed
+      // if (this.timer) clearTimeout(this.timer);
+      // this.timer = setTimeout(() => {
+      this.props.handleNumberOfResults(numberOfFilteredResults, numberOfSearchResults);
+      // }, 500);
+    }
+  }
+
   onChallengeParticipantStoreChange () {
     // We need to instantiate ChallengeParticipantStore before we call challengeListRetrieve so that store gets filled with data
   }
@@ -254,17 +265,6 @@ class ChallengeListRoot extends Component {
     }, () => { this.handleNumberOfResults(filteredList.length, challengeSearchResults.length); });
   }
 
-  handleNumberOfResults (numberOfFilteredResults, numberOfSearchResults) {
-    // console.log('RepresentativeListRoot handleNumberOfResults numberOfFilteredResults:', numberOfFilteredResults, ', numberOfSearchResults:', numberOfSearchResults);
-    if (this.props.handleNumberOfResults) {
-      // Delay telling the parent component that the number of results has changed
-      // if (this.timer) clearTimeout(this.timer);
-      // this.timer = setTimeout(() => {
-      this.props.handleNumberOfResults(numberOfFilteredResults, numberOfSearchResults);
-      // }, 500);
-    }
-  }
-
   leftAndRightArrowSetState = (el) => {
     // set state here
     const leftRightStateDict = leftAndRightArrowStateCalculation(el);

src/js/common/components/Style/ScrollingStyles.jsx

@@ -99,7 +99,7 @@ export const CampaignsScrollingOuterWrapper = styled('div')`
 export const ChallengesScrollingOuterWrapper = styled('div')`
   display: flex;
   justify-content: space-between;
-  height: 450px;
+  height: auto;
   min-height: 450px;
   min-width: 0;
   width: 100%;

src/js/common/utils/leftRightArrowCalculation.js

@@ -1,6 +1,6 @@
 export function handleHorizontalScroll (el, distance, func, rightMarginSize) {
   const element = el;
-  // console.log(element.scrollLeft);
+  console.log(element.scrollLeft);
   // 24 is the size of the right margin of each card
   const offset = (element.scrollLeft % distance);
   let scrollDistance = distance;