Merge pull request #3815 from SailingSteve/steveWebAppDec12-345pm

Changes for Cordova issue fixes
wevote · Jan 20, 2024 · afaabf4 · afaabf4
2 parents 087b7ac + 560ed19
commit afaabf4
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 133 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/js/components/Search/SearchBar.jsx b/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' : ''};
+`;
diff --git a/src/js/components/Style/ReadyPageCommonStyles.jsx b/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;
 `;

diff --git a/src/js/components/Style/SquadsPageCommonStyles.jsx b/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;
-  }
-`));
diff --git a/src/js/pages/Ballot/Ballot.jsx b/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')`

diff --git a/src/js/pages/Squads.jsx b/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';