From 560ed193bb0e81c4fcdafbf32e4b4f72f9df4c90 Mon Sep 17 00:00:00 2001 From: stevepodell Date: Fri, 12 Jan 2024 16:52:14 -0800 Subject: [PATCH] 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 --- package-lock.json | 102 +++++++++--------- src/js/components/Search/SearchBar.jsx | 13 ++- .../Style/ReadyPageCommonStyles.jsx | 2 +- .../Style/SquadsPageCommonStyles.jsx | 64 ----------- src/js/pages/Ballot/Ballot.jsx | 1 + src/js/pages/Squads.jsx | 17 +-- 6 files changed, 66 insertions(+), 133 deletions(-) diff --git a/package-lock.json b/package-lock.json index d622b01f3..42e9cacf0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9660,9 +9660,9 @@ } }, "node_modules/axios": { - "version": "1.6.4", - "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.4.tgz", - "integrity": "sha512-heJnIs6N4aa1eSthhN9M5ioILu8Wi8vmQW9iHQ9NUvfkJb0lEEDUiIdQNAuBtfUt3FxReaKdpQA5DbmMOqzF/A==", + "version": "1.6.5", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.5.tgz", + "integrity": "sha512-Ii012v05KEVuUoFWmMW/UQv9aRIc3ZwkWDcM+h5Il8izZCtRVpDUfwpoFf7eOtajT3QiGR4yDUx7lPqHJULgbg==", "dev": true, "dependencies": { "follow-redirects": "^1.15.4", @@ -10444,9 +10444,9 @@ } }, "node_modules/chai": { - "version": "4.3.10", - "resolved": "https://registry.npmjs.org/chai/-/chai-4.3.10.tgz", - "integrity": "sha512-0UXG04VuVbruMUYbJ6JctvH0YnC/4q3/AkT18q4NaITo91CUm0liMS9VqzT9vZhVQ/1eqPanMWjBM+Juhfb/9g==", + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/chai/-/chai-4.4.0.tgz", + "integrity": "sha512-x9cHNq1uvkCdU+5xTkNh5WtgD4e4yDFCsp9jVc7N7qVeKeftv3gO/ZrviX5d+3ZfxdYnZXZYujjRInu1RogU6A==", "dev": true, "dependencies": { "assertion-error": "^1.1.0", @@ -11661,15 +11661,15 @@ "dev": true }, "node_modules/cssstyle": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-3.0.0.tgz", - "integrity": "sha512-N4u2ABATi3Qplzf0hWbVCdjenim8F3ojEXpBDF5hBpjzW182MjNGLqfmQ0SkSPeQ+V86ZXgeH8aXj6kayd4jgg==", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.0.1.tgz", + "integrity": "sha512-8ZYiJ3A/3OkDd093CBT/0UKDWry7ak4BdPTFP2+QEP7cmhouyq/Up709ASSj2cK02BbZiMgk7kYjZNS4QP5qrQ==", "dev": true, "dependencies": { "rrweb-cssom": "^0.6.0" }, "engines": { - "node": ">=14" + "node": ">=18" } }, "node_modules/csstype": { @@ -12173,9 +12173,9 @@ } }, "node_modules/defu": { - "version": "6.1.3", - "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.3.tgz", - "integrity": "sha512-Vy2wmG3NTkmHNg/kzpuvHhkqeIx3ODWqasgCRbKtbXEN0G+HpEEv9BtJLp7ZG1CZloFaC41Ah3ZFbq7aqCqMeQ==", + "version": "6.1.4", + "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.4.tgz", + "integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==", "dev": true }, "node_modules/degenerator": { @@ -12904,9 +12904,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.4.622", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.622.tgz", - "integrity": "sha512-GZ47DEy0Gm2Z8RVG092CkFvX7SdotG57c4YZOe8W8qD4rOmk3plgeNmiLVRHP/Liqj1wRiY3uUUod9vb9hnxZA==" + "version": "1.4.623", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.623.tgz", + "integrity": "sha512-lKoz10iCYlP1WtRYdh5MvocQPWVRoI7ysp6qf18bmeBgR8abE6+I2CsfyNKztRDZvhdWc+krKT6wS7Neg8sw3A==" }, "node_modules/emoji-regex": { "version": "9.2.2", @@ -17819,12 +17819,12 @@ } }, "node_modules/jsdom": { - "version": "23.0.1", - "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-23.0.1.tgz", - "integrity": "sha512-2i27vgvlUsGEBO9+/kJQRbtqtm+191b5zAZrU/UezVmnC2dlDAFLgDYJvAEi94T4kjsRKkezEtLQTgsNEsW2lQ==", + "version": "23.1.0", + "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-23.1.0.tgz", + "integrity": "sha512-wRscu8dBFxi7O65Cvi0jFRDv0Qa7XEHPix8Qg/vlXHLAMQsRWV1EDeQHBermzXf4Dt7JtFgBLbva3iTcBZDXEQ==", "dev": true, "dependencies": { - "cssstyle": "^3.0.0", + "cssstyle": "^4.0.1", "data-urls": "^5.0.0", "decimal.js": "^10.4.3", "form-data": "^4.0.0", @@ -17843,7 +17843,7 @@ "whatwg-encoding": "^3.1.1", "whatwg-mimetype": "^4.0.0", "whatwg-url": "^14.0.0", - "ws": "^8.14.2", + "ws": "^8.16.0", "xml-name-validator": "^5.0.0" }, "engines": { @@ -21886,17 +21886,22 @@ } }, "node_modules/react-router": { - "version": "6.21.1", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.21.1.tgz", - "integrity": "sha512-W0l13YlMTm1YrpVIOpjCADJqEUpz1vm+CMo47RuFX4Ftegwm6KOYsL5G3eiE52jnJpKvzm6uB/vTKTPKM8dmkA==", + "version": "5.3.4", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz", + "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==", "dependencies": { - "@remix-run/router": "1.14.1" - }, - "engines": { - "node": ">=14.0.0" + "@babel/runtime": "^7.12.13", + "history": "^4.9.0", + "hoist-non-react-statics": "^3.1.0", + "loose-envify": "^1.3.1", + "path-to-regexp": "^1.7.0", + "prop-types": "^15.6.2", + "react-is": "^16.6.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" }, "peerDependencies": { - "react": ">=16.8" + "react": ">=15" } }, "node_modules/react-router-dom": { @@ -21941,12 +21946,26 @@ "@babel/runtime": "^7.7.6" } }, - "node_modules/react-router-dom/node_modules/isarray": { + "node_modules/react-router-dom-v5-compat/node_modules/react-router": { + "version": "6.21.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.21.1.tgz", + "integrity": "sha512-W0l13YlMTm1YrpVIOpjCADJqEUpz1vm+CMo47RuFX4Ftegwm6KOYsL5G3eiE52jnJpKvzm6uB/vTKTPKM8dmkA==", + "dependencies": { + "@remix-run/router": "1.14.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router/node_modules/isarray": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==" }, - "node_modules/react-router-dom/node_modules/path-to-regexp": { + "node_modules/react-router/node_modules/path-to-regexp": { "version": "1.8.0", "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz", "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==", @@ -21954,30 +21973,11 @@ "isarray": "0.0.1" } }, - "node_modules/react-router-dom/node_modules/react-is": { + "node_modules/react-router/node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, - "node_modules/react-router-dom/node_modules/react-router": { - "version": "5.3.4", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz", - "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==", - "dependencies": { - "@babel/runtime": "^7.12.13", - "history": "^4.9.0", - "hoist-non-react-statics": "^3.1.0", - "loose-envify": "^1.3.1", - "path-to-regexp": "^1.7.0", - "prop-types": "^15.6.2", - "react-is": "^16.6.0", - "tiny-invariant": "^1.0.2", - "tiny-warning": "^1.0.0" - }, - "peerDependencies": { - "react": ">=15" - } - }, "node_modules/react-share": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/react-share/-/react-share-4.4.1.tgz", diff --git a/src/js/components/Search/SearchBar.jsx b/src/js/components/Search/SearchBar.jsx index cb08fbb08..62006ec60 100644 --- 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 (
- (` `)); 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 index fde41d45a..4cf506744 100644 --- 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 index 3c9938998..830030e96 100644 --- 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 index ee3077fa0..19d372731 100644 --- 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';