Moved VideoStyles into their own file. Updated id for <CandidateCardForListWrapper to be able to be candidate or politician-based.

src/js/common/components/CardForListBody.jsx

@@ -63,7 +63,7 @@ function CardForListBody (props) {
 
   // /////////////////////// START OF DISPLAY
   return (
-    <CandidateCardForListWrapper id={`cardForListBodyWrapper-${candidateWeVoteId}`} limitCardWidth={limitCardWidth}>
+    <CandidateCardForListWrapper id={`cardForListBodyWrapper-${candidateWeVoteId || politicianWeVoteId}`} limitCardWidth={limitCardWidth}>
       <OneCampaignOuterWrapper limitCardWidth={limitCardWidth}>
         <OneCampaignInnerWrapper
           hideCardMargins={hideCardMargins}

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

@@ -1,21 +1,21 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import { Button } from '@mui/material';
 import withStyles from '@mui/styles/withStyles';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import JoinChallengeButton from './JoinChallengeButton'
+// import JoinChallengeButton from './JoinChallengeButton';
+
+const JoinChallengeButton = React.lazy(() => import(/* webpackChunkName: 'JoinChallengeButton' */ '../../components/Challenge/JoinChallengeButton'));
 
 const JoinChallengeAndLearnMoreButtons = ({ challengeWeVoteId, classes }) => {
   return (
     <JoinChallengeButtonWrapper>
-      <Button
-        classes={{ root: classes.joinChallengeButton }}
-        color="primary"
-        id={`challengeLearnMore-${challengeWeVoteId}`}
-        variant="contained"
-      >
-       Join Challenge
-      </Button>
+      <Suspense fallback={<></>}>
+        <JoinChallengeButton
+          // challengeSEOFriendlyPath={challengeSEOFriendlyPathForDisplay}
+          challengeWeVoteId={challengeWeVoteId}
+        />
+      </Suspense>
       <Button
         classes={{ root: classes.learnMoreButton }}
         color="secondary"

src/js/common/components/FAQBody.jsx

@@ -5,7 +5,7 @@ import { isCordova, isWebApp } from '../utils/isCordovaOrWebApp';
 import { renderLog } from '../utils/logging';
 import ToolBar from './Widgets/ToolBar';
 import webAppConfig from '../../config';
-import { Video, PlayerContainer } from '../../components/Welcome/headerWelcomeStyles';
+import { Video, PlayerContainer } from './Style/VideoStyles';
 
 
 const OpenExternalWebSite = React.lazy(() => import(/* webpackChunkName: 'OpenExternalWebSite' */ './Widgets/OpenExternalWebSite'));

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

@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+
+export const Video = styled('iframe')`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+`;
+
+export const PlayerContainer = styled('div')(({ theme }) => (`
+  width: 640px;
+  height: 360px;
+  max-width: 90%;
+  max-height: calc(80vw * 0.5625);
+  position: relative;
+  background-color: black;
+  margin: 1em auto;
+  -webkit-box-shadow: 0px 3px 15px 2px rgba(0,0,0,.3);
+  -moz-box-shadow: 0px 3px 15px 2px rgba(0,0,0,.3);
+  box-shadow: 0px 3px 15px 2px rgba(0,0,0,.3);
+  ${theme.breakpoints.down('md')} {
+    max-width: 75%;
+    max-height: calc(60vw * 0.5625);
+  }
+  ${theme.breakpoints.down('sm')} {
+    max-width: 90%;
+    max-height: calc(80vw * 0.5625);
+  }
+`));

src/js/components/Welcome/headerWelcomeStyles.jsx

@@ -53,32 +53,3 @@ export const SubTitle = styled('h3', {
     font-size: 20px;
   }
 `));
-
-export const Video = styled('iframe')`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-`;
-
-export const PlayerContainer = styled('div')(({ theme }) => (`
-  width: 640px;
-  height: 360px;
-  max-width: 90%;
-  max-height: calc(80vw * 0.5625);
-  position: relative;
-  background-color: black;
-  margin: 1em auto;
-  -webkit-box-shadow: 0px 3px 15px 2px rgba(0,0,0,.3);
-  -moz-box-shadow: 0px 3px 15px 2px rgba(0,0,0,.3);
-  box-shadow: 0px 3px 15px 2px rgba(0,0,0,.3);
-  ${theme.breakpoints.down('md')} {
-    max-width: 75%;
-    max-height: calc(60vw * 0.5625);
-  }
-  ${theme.breakpoints.down('sm')} {
-    max-width: 90%;
-    max-height: calc(80vw * 0.5625);
-  }
-`));

src/js/pages/WelcomeForOrganizations.jsx

@@ -5,10 +5,11 @@ import React, { Component, Suspense } from 'react';
 import { Helmet } from 'react-helmet-async';
 import styled from 'styled-components';
 import AnalyticsActions from '../actions/AnalyticsActions';
+import { PlayerContainer, Video } from '../common/components/Style/VideoStyles';
 import historyPush from '../common/utils/historyPush';
 import { renderLog } from '../common/utils/logging';
 import normalizedImagePath from '../common/utils/normalizedImagePath';
-import { BlueTitle, PlayerContainer, SubTitle, Title, Video } from '../components/Welcome/headerWelcomeStyles';
+import { BlueTitle, SubTitle, Title } from '../components/Welcome/headerWelcomeStyles';
 import { Bold, Description, DescriptionContainer, DescriptionImageColumn, DescriptionLeftColumn, Image, NetworkContainer, NetworkImage, Section, SectionTitle, SectionTitleBold } from '../components/Welcome/sectionStyles';
 import Testimonial from '../components/Widgets/Testimonial';
 import AppObservableStore from '../common/stores/AppObservableStore';

src/js/pages/WelcomeForVoters.jsx

@@ -7,12 +7,13 @@ import { Helmet } from 'react-helmet-async';
 import styled from 'styled-components';
 import AnalyticsActions from '../actions/AnalyticsActions';
 import VoterActions from '../actions/VoterActions';
+import { PlayerContainer, Video } from '../common/components/Style/VideoStyles';
 import historyPush from '../common/utils/historyPush';
 import { renderLog } from '../common/utils/logging';
 import normalizedImagePath from '../common/utils/normalizedImagePath';
 import SettingsVerifySecretCode from '../common/components/Settings/SettingsVerifySecretCode';
 import AddressBoxWelcome from '../components/Welcome/AddressBoxWelcome';
-import { BlueTitle, PlayerContainer, SubTitle, Title, Video } from '../components/Welcome/headerWelcomeStyles';
+import { BlueTitle, SubTitle, Title } from '../components/Welcome/headerWelcomeStyles';
 import { Bold, Description, DescriptionContainer, DescriptionImageColumn, DescriptionLeftColumn, GetStarted2019, Image, NetworkContainer, NetworkImage, Section, SectionTitle, SectionTitleBold, SignUpContainer, SignUpMessage, Step, StepLabel, StepNumber } from '../components/Welcome/sectionStyles';
 import TextBox from '../components/Welcome/TextBox';
 import Testimonial from '../components/Widgets/Testimonial';