Changes for Cordova

Un-copied styles from SquadsPageCommonStyles.jsx.  In Cordova the developer has to go backwards from the styles in the DOM to the code, so it is very important that every styled component has a unique name.  And the fewer components the better, so reuse instead of copy.
Fixes https://wevoteusa.atlassian.net/browse/WV-77
Fixes https://wevoteusa.atlassian.net/jira/software/projects/WV/issues/WV-47

src/js/components/Search/SearchBar.jsx

@@ -1,10 +1,11 @@
 import { CancelOutlined, Search } from '@mui/icons-material';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { blurTextFieldAndroid, focusTextFieldAndroid } from '../../common/utils/cordovaUtils';
+import styled from 'styled-components';
+import { blurTextFieldAndroid, focusTextFieldAndroid, isIPhoneMiniOrSmaller } from '../../common/utils/cordovaUtils';
 import { renderLog } from '../../common/utils/logging';
-// Dec 2019 TODO: This is the last icon from the svg-icons package used in the Web App, all the other have been removed from git
-// const removeCircleIcon = '../../../img/global/svg-icons/glyphicons-pro-halflings/glyphicons-halflings-88-remove-circle.svg';
+
+/* eslint-disable jsx-a11y/control-has-associated-label  */
 
 export default class SearchBar extends Component {
   constructor (props) {
@@ -82,7 +83,7 @@ export default class SearchBar extends Component {
     const { searchString } = this.state;
     return (
       <div className="search-bar clearfix">
-        <input
+        <SearchInput
           id="search_input"
           type="text"
           className="form-control"
@@ -128,3 +129,7 @@ SearchBar.propTypes = {
   searchFunction: PropTypes.func.isRequired,
   searchUpdateDelayTime: PropTypes.number.isRequired,
 };
+
+const SearchInput = styled('input')`
+  ${isIPhoneMiniOrSmaller() ? 'font-size: 0.8rem' : ''};
+`;

src/js/components/Style/ReadyPageCommonStyles.jsx

@@ -37,7 +37,7 @@ export const ReadyIntroductionMobileWrapper = styled('div')(({ theme }) => (`
 `));
 
 export const ElectionCountdownOuterWrapper = styled('div')`
-  height: 250px;
+  height: ${isWebApp() ? '250px' : '280px'};
   position: relative;
   z-index: 1;
 `;

src/js/components/Style/SquadsPageCommonStyles.jsx

@@ -1,5 +1,4 @@
 import styled from 'styled-components';
-import { isWebApp } from '../../common/utils/isCordovaOrWebApp';
 
 export const ComingSoon = styled('div')`
   font-size: 50px;
@@ -8,68 +7,5 @@ export const ComingSoon = styled('div')`
   width: 100%;
 `;
 
-export const ReadyCard = styled('div')`
-  padding-bottom: 4px;
-`;
-
-export const ElectionCountdownInnerWrapper = styled('div')`
-  ${isWebApp() ? 'margin-top: -37px' : ''}
-`;
-
-export const IntroAndFindTabletWrapper = styled('div')`
-  display: flex;
-  justify-content: center;
-`;
-
-export const IntroAndFindTabletSpacer = styled('div')`
-  width: 20px;
-`;
-
-export const ReadyParagraph = styled('div')`
-`;
-
-export const PrepareForElectionOuterWrapper = styled('div')`
-  min-height: 150px;
-  margin-bottom: 48px;
-`;
-
-export const ReadyIntroductionMobileWrapper = styled('div')(({ theme }) => (`
-  display: flex;
-  justify-content: flex-start;
-  margin-bottom: 48px;
-  margin-top: 31px;
-  ${theme.breakpoints.up('sm')} {
-    justify-content: center;
-  }
-`));
-
-export const ElectionCountdownOuterWrapper = styled('div')`
-  height: 280px;
-  position: relative;
-  z-index: 1;
-`;
-
-export const ReadyIntroductionDesktopWrapper = styled('div')`
-  margin-bottom: 48px;
-  margin-top: 31px;
-`;
-
 export const SquadsPageContainer = styled('div')`
 `;
-
-export const ViewBallotButtonWrapper = styled('div')`
-  display: flex;
-  height: 40px;
-  justify-content: center;
-  margin-bottom: 32px;
-`;
-
-export const ReadyTitle = styled('h2')(({ theme }) => (`
-  font-size: 26px;
-  font-weight: 800;
-  margin: 0 0 12px;
-  ${theme.breakpoints.down('sm')} {
-    font-size: 14px;
-    margin: 0 0 4px;
-  }
-`));

src/js/pages/Ballot/Ballot.jsx

@@ -1855,6 +1855,7 @@ const EmptyBallotNotice = styled('div')`
   margin-top: 24px;
   padding: 12px 15px;
   width: 100%;
+  ${isCordova() ? 'margin-top: 50px !important; width: 90%; margin-left: 20px !important' : ''}
 `;
 
 const FindYourFriendsWrapper = styled('div')`

src/js/pages/Squads.jsx

@@ -1,4 +1,3 @@
-// import { Card } from '@mui/material';
 import withStyles from '@mui/styles/withStyles';
 import withTheme from '@mui/styles/withTheme';
 import PropTypes from 'prop-types';
@@ -9,26 +8,18 @@ import AnalyticsActions from '../actions/AnalyticsActions';
 import BallotActions from '../actions/BallotActions';
 import FriendActions from '../actions/FriendActions';
 import ReadyActions from '../actions/ReadyActions';
+import SnackNotifier, { openSnackbar } from '../common/components/Widgets/SnackNotifier';
+import AppObservableStore, { messageService } from '../common/stores/AppObservableStore';
 import apiCalming from '../common/utils/apiCalming';
 import { isAndroid } from '../common/utils/cordovaUtils';
 import historyPush from '../common/utils/historyPush';
 import { isWebApp } from '../common/utils/isCordovaOrWebApp';
 import { renderLog } from '../common/utils/logging';
 import ReadyFinePrint from '../components/Ready/ReadyFinePrint';
-// import ReadyIntroduction from '../components/Ready/ReadyIntroduction';
-// import { ReadyCard } from '../components/Ready/ReadyTaskStyles';
 import { PageContentContainer } from '../components/Style/pageLayoutStyles';
-import {
-  ComingSoon, ElectionCountdownInnerWrapper, ElectionCountdownOuterWrapper, PrepareForElectionOuterWrapper,
-  // ReadyIntroductionDesktopWrapper,
-  ReadyIntroductionMobileWrapper, SquadsPageContainer,
-  // ReadyParagraph, ReadyTitle,
-  ViewBallotButtonWrapper,
-} from '../components/Style/SquadsPageCommonStyles';
+import { ElectionCountdownInnerWrapper, ElectionCountdownOuterWrapper, PrepareForElectionOuterWrapper, ReadyIntroductionMobileWrapper, ViewBallotButtonWrapper } from '../components/Style/ReadyPageCommonStyles';
+import { ComingSoon, SquadsPageContainer } from '../components/Style/SquadsPageCommonStyles';
 import BrowserPushMessage from '../components/Widgets/BrowserPushMessage';
-import SnackNotifier, { openSnackbar } from '../common/components/Widgets/SnackNotifier';
-// import webAppConfig from '../config';
-import AppObservableStore, { messageService } from '../common/stores/AppObservableStore';
 import BallotStore from '../stores/BallotStore';
 import VoterStore from '../stores/VoterStore';
 import { cordovaSimplePageContainerTopOffset } from '../utils/cordovaCalculatedOffsets';