WV-4815 Election Finder "Show More" Cordova fix and WV-4819

src/js/components/Drawers/DrawerTemplateHeaderProfile.jsx

@@ -6,7 +6,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import DesignTokenColors from '../../common/components/Style/DesignTokenColors';
 import AppObservableStore, { messageService } from '../../common/stores/AppObservableStore';
-import { hasCordovaNotch, heightOfCordovaSpacer, isIPadSmallerThan13 } from '../../common/utils/cordovaUtils';
+import { hasCordovaNotch, heightOfCordovaSpacer, isIPadSmallerThan13, isIPhoneMiniOrSmaller } from '../../common/utils/cordovaUtils';
 import { renderLog } from '../../common/utils/logging';
 import { CloseDrawerIconWrapper, DrawerHeaderAnimateDownInnerContainer, DrawerHeaderAnimateDownOuterContainer, DrawerHeaderWrapper, DrawerTitle } from '../Style/drawerLayoutStyles';
 
@@ -133,7 +133,7 @@ DrawerTemplateHeaderProfile.propTypes = {
 const styles = () => ({
   drawer: {
     marginTop: `${heightOfCordovaSpacer(true)} !important`,
-    width: '80%',
+    width: isIPhoneMiniOrSmaller() ? '90%' : '80%',
   },
   dialogPaper: {
     display: 'block',

src/js/components/Ready/ElectionCountdown.jsx

@@ -346,8 +346,8 @@ const CardTitleUpcoming = styled('h1')(({ theme }) => (`
   margin-bottom: 8px;
   margin-top: 12px;
   text-align: center;
-  ${theme.breakpoints.down('xs')} {
-    font-size: 60px;
+  ${theme.breakpoints.down('md')} {
+    font-size: 40px;
   }
 `));
 
@@ -358,7 +358,7 @@ const CardTitleToday = styled('h1')(({ theme }) => (`
   margin-bottom: 8px;
   margin-top: 0;
   text-align: center;
-  ${theme.breakpoints.down('xs')} {
+  ${theme.breakpoints.down('md')} {
     font-size: 40px;
   }
 `));

src/js/components/Settings/SettingsProfile.jsx

@@ -8,6 +8,8 @@ import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import AnalyticsActions from '../../actions/AnalyticsActions';
 import LoadingWheel from '../../common/components/Widgets/LoadingWheel';
+import AppObservableStore from '../../common/stores/AppObservableStore';
+import { isCordova } from '../../common/utils/isCordovaOrWebApp';
 import { renderLog } from '../../common/utils/logging';
 import VoterStore from '../../stores/VoterStore';
 import { HeaderContentContainer } from '../Style/pageLayoutStyles';
@@ -17,7 +19,6 @@ import SettingsWidgetAccountType from './SettingsWidgetAccountType';
 import SettingsWidgetFirstLastName from './SettingsWidgetFirstLastName';
 import SettingsWidgetOrganizationDescription from './SettingsWidgetOrganizationDescription';
 import SettingsWidgetOrganizationWebsite from './SettingsWidgetOrganizationWebsite';
-import AppObservableStore from '../../common/stores/AppObservableStore';
 
 class SettingsProfile extends Component {
   constructor (props) {
@@ -62,7 +63,7 @@ class SettingsProfile extends Component {
       <HeaderContentContainer>
         <Helmet title="Name & Photo - WeVote" />
         <BrowserPushMessage incomingProps={this.props} />
-        <div className="card u-padding-bottom--lg">
+        <SettingsCardContainer>
           <div className="card-main">
             <HeaderContainer>
               <IdIcon />
@@ -88,7 +89,7 @@ class SettingsProfile extends Component {
               />
             </div>
           </div>
-        </div>
+        </SettingsCardContainer>
       </HeaderContentContainer>
     );
   }
@@ -124,4 +125,9 @@ const IdIcon = styled(AccountBoxIcon)`
   margin: 8px 8px 0 -2px;
 `;
 
+const SettingsCardContainer = styled('div')`
+  padding-bottom: ${isCordova() ? '66px' : '8px'};
+`;
+
+
 export default withStyles(styles)(SettingsProfile);

src/js/components/Style/BallotTitleHeaderStyles.jsx

@@ -63,8 +63,6 @@ export const ElectionNameH1 = styled('h1', {
   padding-top: 5px;
   padding-bottom: 18px;
   ${theme.breakpoints.down('sm')} {
-    padding-top: 5px;
-    padding-bottom: 10px;
     white-space: normal;
   }
   ${() => (isIOs6p1OrSmaller() ? 'font-weight: 600;' : '')}

src/js/pages/ElectionFinder/ElectionFinderHome.jsx

@@ -148,7 +148,7 @@ function ElectionFinderHome () {
 
   const emptyListMessage = (() => {
     if (electionList.length === 0) return 'Loading...';
-    if (searchText) {
+    if (searchText.length) {
       if (candidateSearchLoading) return 'Fetching data...';
       return 'Your search did not return any results. Try another search.';
     }
@@ -256,7 +256,7 @@ function ElectionFinderHome () {
         </SectionTitleRow>
 
         <ElectionList>
-          {(searchText ? displayElections : displayElections.slice(0, visibleCount)).map((election) => {
+          {(searchText.length ? displayElections : displayElections.slice(0, visibleCount)).map((election) => {
             const googleCivicElectionId = election.google_civic_election_id;
             const sc = (election.state_code_list && election.state_code_list.length > 0) ?
               election.state_code_list[0].toLowerCase() :
@@ -313,7 +313,7 @@ function ElectionFinderHome () {
                     ]}
                   />
                 </ElectionRow>
-                {searchText && election.matchedOffices && election.matchedOffices.map((office) => (
+                {searchText.length > 0 && election.matchedOffices && election.matchedOffices.map((office) => (
                   <OfficeSection key={office.officeWeVoteId || office.officeName}>
                     <OfficeName style={{ display: 'block', padding: '7px 16px 7px 32px' }}>
                       {highlightMatch(office.officeName, searchText)}
@@ -340,7 +340,7 @@ function ElectionFinderHome () {
               </React.Fragment>
             );
           })}
-          {!searchText && displayElections.length > visibleCount && (
+          {searchText.length < 1 && displayElections.length > visibleCount && (
             <ShowMoreButton onClick={() => setVisibleCount((prev) => prev + 50)}>
               {`Show more (${displayElections.length - visibleCount} remaining)`}
             </ShowMoreButton>

src/js/pages/ElectionFinder/electionFinderStyles.js

@@ -4,6 +4,9 @@ import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import DesignTokenColors from '../../common/components/Style/DesignTokenColors';
 import { ElectionStateLabel } from '../../components/Style/BallotTitleHeaderStyles';
+import muiTheme from '../../common/components/Style/muiTheme';
+
+const theme = muiTheme;
 
 export const ActionChip = styled('button')`
   display: inline-flex;
@@ -166,6 +169,9 @@ export const ElectionLink = styled('span')`
   &:hover {
     text-decoration: underline;
   }
+  ${theme.breakpoints.down('md')} {
+    font-size: 14px;
+  }
 `;
 
 export const ElectionList = styled('div')`
@@ -388,6 +394,9 @@ export const ShowMoreButton = styled('button')`
     border-color: #2e3c5d;
     color: ${DesignTokenColors.neutral800};
   }
+  ${theme.breakpoints.down('md')} {
+    margin-bottom: 70px;
+  }
 `;
 
 export const StateSelectCaret = styled('span')`