Android Header Fixes

node/buildSrcCordova.js

@@ -56,26 +56,26 @@ function getVersionsFromConfigXML () {
   let regex = /version="(.*?)"/;
   let found = data.match(regex);
   if (found.length > 0) {
-    console.log('version from config.xml: ', found[1]);
+    console.log('> Cordova: version from config.xml: ', found[1]);
     versions.version = found[1];
   } else {
-    console.log('version from config.xml: error');
+    console.log('> Cordova: version from config.xml: error');
   }
   regex = /ios-CFBundleVersion="(.*?)"/;
   found = data.match(regex);
-  if (found.length > 0) {
-    console.log('ios-CFBundleVersion from config.xml: ', found[1]);
+  if (found && found.length > 0) {
+    console.log('> Cordova: ios-CFBundleVersion from config.xml: ', found[1]);
     versions.iosBundleVersion = found[1];
   } else {
-    console.log('ios-CFBundleVersion from config.xml: error');
+    console.log('> Cordova: ios-CFBundleVersion from config.xml: error');
   }
   regex = /android-versionCode="(.*?)"/;
   found = data.match(regex);
-  if (found.length > 0) {
-    console.log('android-versionCode from config.xml: ', found[1]);
+  if (found && found.length > 0) {
+    console.log('> Cordova: android-versionCode from config.xml: ', found[1]);
     versions.androidBundleVersion = found[1];
   } else {
-    console.log('android-versionCode from config.xml: error');
+    console.log('> Cordova: android-versionCode from config.xml: error');
   }
   return versions;
 }
@@ -178,7 +178,7 @@ function fileRewriterForCordova (path, versions) {
 
     if (deleteFiles.includes(path)) {
       fs.remove(path);
-      console.log(`rm file ${path}`);
+      console.log(`> Removed: rm file ${path}`);
     // } else if (dummySubstituteFiles.includes(path)) {
     // Removes files that have includes that cause problems in cordova -- these were Stripe related,
     // but the stripe problem no longer manifested in Oct 2025, and Dale wanted the non-functional
@@ -234,13 +234,13 @@ fs.remove('./build').then(() => {
               if (!(out.length === 1 && out[1] === undefined)) {
                 console.log('> Cordova: Files that (incorrectly) still contain React.lazy: ');
                 console.log(out);
-                console.log('> Cordova: The files listed above, need to be fixed before proceeding!');  // Or the regex needs adjustment
+                console.error('> Cordova: The files listed above, need to be fixed before proceeding!');  // Or the regex needs adjustment
               }
             });
         });
       });
     } catch (err) {
-      console.log(err);
+      console.error(`> Cordova caught error: ${err}`);
     }
   });
 });

node/initialSteps.js

@@ -2,7 +2,7 @@ const fs = require('fs');
 const { promises: fsPromises } = require('fs');
 
 const isWebApp = !process.env.npm_lifecycle_script.includes('CORDOVA=1');
-console.log(isWebApp ? 'initialSteps -- WebApp compilation' : '> Cordova: Cordova compilation');
+console.log(isWebApp ? 'Info.plist initialSteps -- WebApp compilation' : '> Cordova: Cordova compilation');
 
 // Creates the compileDate.js file that contains the compile date as a string, so it can be displayed where wanted in the app.
 const d = new Date();

node/unSymLinkIOS.sh

@@ -1,5 +1,5 @@
 # This suddenly become necessary with XCode 15 and iOS 17, on October 25, 2023
-echo 'copying files and removing symlinks in WeVoteCordova/platforms/ios/www'
+echo '> Cordova: copying files and removing symlinks in WeVoteCordova/platforms/ios/www'
 cd ../WeVoteCordova/platforms/ios/www || exit
 rm bundle.js
 cp ../../../../WebApp/build/bundle.js .

src/App.jsx

@@ -12,7 +12,7 @@ import VoterSessionActions from './js/actions/VoterSessionActions';
 import muiTheme from './js/common/components/Style/muiTheme';
 import LoadingWheelComp from './js/common/components/Widgets/LoadingWheelComp';
 import AppObservableStore, { messageService } from './js/common/stores/AppObservableStore';
-import { hasDynamicIsland, hasIPhoneNotch, heightOfIOSSpacer } from './js/common/utils/cordovaUtils';
+import { hasDynamicIsland, hasCordovaNotch, heightOfCordovaSpacer } from './js/common/utils/cordovaUtils';
 import historyPush from './js/common/utils/historyPush';
 import { isWeVoteMarketingSite, normalizedHref } from './js/common/utils/hrefUtils';
 import initializejQuery from './js/common/utils/initializejQuery';
@@ -221,7 +221,7 @@ class App extends Component {
 
     if (isCordova()) {
       console.log(`Cordova:   window.device ${JSON.stringify(window.device)}`);
-      console.log(`Cordova:   Header, isIOS ${hasDynamicIsland()} (${heightOfIOSSpacer()}), hasIPhoneNotch (or AndroidNotch) ${hasIPhoneNotch()}`);
+      console.log(`Cordova:   Header, isIOS ${hasDynamicIsland()}, heightOfCordovaSpacer ${heightOfCordovaSpacer()}), hasCordovaNotch ${hasCordovaNotch()}`);
     }
 
     this.acceptURLVariables();
@@ -536,8 +536,8 @@ class App extends Component {
                   <Route path="/candidate/:candidate_we_vote_id/:organization_we_vote_id" exact component={OrganizationVoterGuideCandidate} />
                   <Route path="/candidate/:candidate_we_vote_id" exact component={Candidate} />
                   <Route path="/challenges/" exact component={ChallengesHomeLoader} />
-                  <Route path="/donate" component={(isNotWeVoteMarketingSite || this.localIsAndroid()) ? ReadyRedirect : Donate} />
-                  <Route path="/donatefaq" component={(isNotWeVoteMarketingSite || this.localIsAndroid()) ? ReadyRedirect : DonateFaq} />
+                  <Route path="/donate" component={(isNotWeVoteMarketingSite) ? ReadyRedirect : Donate} />
+                  <Route path="/donatefaq" component={(isNotWeVoteMarketingSite) ? ReadyRedirect : DonateFaq} />
                   <Route path="/facebook_invitable_friends" component={FacebookInvitableFriends} />
                   <Route path="/findfriends/:set_up_page" exact component={FindFriendsRoot} />
                   <Route path="/findfriends" exact><FindFriendsRoot /></Route>

src/js/common/components/Navigation/ChallengeHeaderSimple.jsx

@@ -45,7 +45,7 @@ function ChallengeHeaderSimple (props) {
               </ChallengeTitleAndDaysLeftWrapper>
             </ChallengePhotoAndTitle>
             {!hideCloseIcon && (
-              <CloseDrawerIconWrapper>
+              <CloseDrawerIconWrapperChallenger>
                 <div>
                   <IconButton
                     aria-label="Close"
@@ -59,7 +59,7 @@ function ChallengeHeaderSimple (props) {
                     </span>
                   </IconButton>
                 </div>
-              </CloseDrawerIconWrapper>
+              </CloseDrawerIconWrapperChallenger>
             )}
           </ChallengeTitleRow>
         </ChallengeHeaderSimpleContentContainer>
@@ -157,7 +157,7 @@ const ChallengeTitleRow = styled('div')`
   margin-bottom: 16px;
 `;
 
-const CloseDrawerIconWrapper = styled('div')`
+const CloseDrawerIconWrapperChallenger = styled('div')`
   display: flex;
   justify-content: flex-end;
 `;

src/js/common/components/Settings/SettingsVerifySecretCode.jsx

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import styled from 'styled-components';
 import VoterActions from '../../../actions/VoterActions';
-import { hasIPhoneNotch, isIOS, isIPhone4in } from '../../utils/cordovaUtils';
+import { hasCordovaNotch, isIOS, isIPhone4in } from '../../utils/cordovaUtils';
 import { isCordova, isWebApp } from '../../utils/isCordovaOrWebApp';
 import { renderLog } from '../../utils/logging';
 import VoterStore from '../../../stores/VoterStore';
@@ -758,7 +758,7 @@ SettingsVerifySecretCode.propTypes = {
 
 const styles = (theme) => ({
   dialogPaper: {
-    marginTop: hasIPhoneNotch() ? 68 : 48,
+    marginTop: hasCordovaNotch() ? 68 : 48,
     [theme.breakpoints.up('sm')]: {
       maxWidth: '720px',
       width: '85%',

src/js/common/utils/cordovaUtils.js

@@ -356,14 +356,18 @@ export function isIPadMini () {
   return false;
 }
 
-export function heightOfIOSSpacer (asString = false) {
-  if (isIOS()) {
+export function heightOfCordovaSpacer (asString = false) {
+  let height = 0;
+  if (isCordova()) {
     if (isIOS() && !isIOSAppOnMac()) {
-      const params = getThisAppleDeviceParameters();
-      return asString ? `${params.iOSSpacer}px` : params.iOSSpacer;
+      const { iOSSpacer } = getThisAppleDeviceParameters();
+      height = iOSSpacer;
+    } else if (isAndroid()) {
+      height = window.androidNotchCutout ? window.androidNotchInset : 0;
     }
   }
-  return 0;
+  // console.log(`heightOfCordovaSpacer '${asString ? `${height}px` : height}'`);
+  return asString ? `${height}px` : height;
 }
 
 export function isCordovaPhone () {
@@ -395,32 +399,8 @@ export function isIPadGiantSize () {
   return false;
 }
 
-export function isAndroidNotch () {
-  if (window.device === undefined) {
-    return false;
-  }
-  const { device: { model, uuid } } = window;
-  // There is an edge-to-edge setting for android, but it will go away in Android 16 in 2025, we have to do this
-  // https://stackoverflow.com/questions/79382767/prevent-edge-to-edge-behaviour-after-android-sdk-35
-  const notchedModels = [
-    'Pixel 7',          // From Browserstack Cordova app device dialog
-    'Pixel 9',          // From Browserstack logcat
-    'Pixel 9',          // From Browserstack logcat
-    'Pixel 9 Pro',      // From Browserstack logcat
-    'Pixel 9 Pro XL',   // From Browserstack logcat
-    'Pixel 10',         // From Browserstack logcat
-    'Pixel 10 Pro',     // From Browserstack logcat
-    'Pixel 10 Pro XL',  // From Browserstack logcat
-  ];
-  const simulatorUUIDs = [    // These change when you update Android Studio
-    'ba09ecb05c77f653',
-    '6d9df9c89e647862',
-  ];
-  if (notchedModels.includes(model) || simulatorUUIDs.includes(uuid)) {
-    logMatch('isAndroidNotch === true for ', model, uuid);
-    return true;
-  }
-  return false;
+export function hasAndroidNotch () {
+  return window.androidNotchCutout;
 }
 
 export function hasDynamicIsland () {
@@ -436,19 +416,23 @@ export function hasDynamicIsland () {
   return false;
 }
 
-export function hasIPhoneNotch () {
-  if (!isIOS()) return false;
-  // Notched models === from the iPhone X up to the iPhone 14 and iPhone SE (2022).
-  // Specifically, this includes the iPhone X, XR, XS, 11, 12, 13 series, iPhone 14 and 14 Plus, and the iPhone SE (2022).
-  const params = getThisAppleDeviceParameters();
-  const marketingInt = parseInt(params.marketingNumber) || 0;
-  const isPro = params.name.includes('Pro');
-  const lettered = ['X', 'XR', 'XS', 'SE'];       // Too simple of a test to handle old SE versions, but those are mostly gone
-  return !hasDynamicIsland() && (
-    lettered.includes(params.marketingNumber) ||
-    (marketingInt === 14 && !isPro) ||
-    (marketingInt >= 11 && marketingInt <= 13)
-  );
+export function hasCordovaNotch () {
+  if (isAndroid()) {
+    return hasAndroidNotch();
+  } else if (isIOS()) {
+    // Notched models === from the iPhone X up to the iPhone 14 and iPhone SE (2022).
+    // Specifically, this includes the iPhone X, XR, XS, 11, 12, 13 series, iPhone 14 and 14 Plus, and the iPhone SE (2022).
+    const params = getThisAppleDeviceParameters();
+    const marketingInt = parseInt(params.marketingNumber) || 0;
+    const isPro = params.name.includes('Pro');
+    const lettered = ['X', 'XR', 'XS', 'SE'];       // Too simple of a test to handle old SE versions, but those are mostly gone
+    return !hasDynamicIsland() && (
+      lettered.includes(params.marketingNumber) ||
+      (marketingInt === 14 && !isPro) ||
+      (marketingInt >= 11 && marketingInt <= 13)
+    );
+  }
+  return false;
 }
 
 export function isIOsSmallerThanPlus () {
@@ -519,39 +503,6 @@ export function getAndroidSize () {
   return androidSizeString;
 }
 
-export function hasAndroidNotch () {
-  // https://deviceatlas.com/blog/list-of-user-agent-strings  (last letter U, like SM-G988U, is a country code ... USA)
-  const ua = navigator.userAgent.toLowerCase();
-  if (ua.includes('SM-S908') ||       // Samsung Galaxy S22 Ultra
-      ua.includes('SM-S906') ||       // Samsung Galaxy S22+
-      ua.includes('SM-S901') ||       // Samsung Galaxy S22
-      ua.includes('SM-G996') ||       // Samsung Galaxy S21
-      ua.includes('SM-G980') ||       // Samsung Galaxy S20
-      ua.includes('SM-G973')) {       // Samsung Galaxy S10
-    return true;
-  }
-
-  // window.device.model: "sdk_gphone64_arm64"
-
-  if (androidPixels === 4446720) {
-    logMatch('Android Samsung Galaxy S22 Ultra (or S22+) detected by pixel size');
-    return true;
-  } else if (androidPixels === 2527200) {
-    logMatch('Android Samsung Galaxy S22 detected by pixel size');  // 1440 x 3040
-    return true;
-  } else if (androidPixels === 2562000) {
-    logMatch('Android Samsung Galaxy S21 detected by pixel size');  // 1080 x 2400
-    return true;
-  } else if (androidPixels === 4608000) {
-    logMatch('Android Samsung Galaxy S20 Ultra detected by pixel size');
-    return true;
-  } else if (androidPixels === 4377600) {
-    logMatch('Android Samsung Galaxy S10 detected by pixel size');  // 1080x2340
-    return true;
-  }
-  return false;
-}
-
 export function isAndroidSizeSM () {
   if (isAndroid()) {
     if (getAndroidSize() === '--sm') {
@@ -680,7 +631,7 @@ if (isSimulator()) {
 
 export function getToastClass () {
   let toastClass = '';
-  if (hasIPhoneNotch()) {
+  if (hasCordovaNotch()) {
     toastClass = 'app-toast-cordova__iphone-notch';
   } else if (isIOS()) {
     toastClass = 'app-toast-cordova__iphone';

src/js/components/Activity/ActivityTidbitDrawer.jsx

@@ -77,7 +77,7 @@ class ActivityTidbitDrawer extends Component {
         anchor="right"
         classes={{ paper: classes.drawerClasses }}
         direction="left"
-        id="share-menu"
+        id="activityTidbit"
         onClose={this.closeActivityTidbitDrawer}
         open={modalOpen}
       >

src/js/components/Ballot/PositionDrawer.jsx

@@ -11,7 +11,8 @@ import MeasureActions from '../../actions/MeasureActions';
 import OrganizationActions from '../../actions/OrganizationActions';
 import VoterGuideActions from '../../actions/VoterGuideActions';
 import apiCalming from '../../common/utils/apiCalming';
-import { hasIPhoneNotch } from '../../common/utils/cordovaUtils';
+import convertToInteger from '../../common/utils/convertToInteger';
+import { hasCordovaNotch, heightOfCordovaSpacer } from '../../common/utils/cordovaUtils';
 import { normalizedHref } from '../../common/utils/hrefUtils';
 import { isWebApp } from '../../common/utils/isCordovaOrWebApp';
 import { renderLog } from '../../common/utils/logging';
@@ -20,11 +21,8 @@ import BallotStore from '../../stores/BallotStore';
 import CandidateStore from '../../stores/CandidateStore';
 import IssueStore from '../../stores/IssueStore';
 import MeasureStore from '../../stores/MeasureStore';
-// import OrganizationStore from '../../stores/OrganizationStore';
 import VoterGuideStore from '../../stores/VoterGuideStore';
 import VoterStore from '../../stores/VoterStore';
-import { cordovaDrawerTopMargin } from '../../utils/cordovaOffsets';
-import convertToInteger from '../../common/utils/convertToInteger';
 
 const DelayedLoad = React.lazy(() => import(/* webpackChunkName: 'DelayedLoad' */ '../../common/components/Widgets/DelayedLoad'));
 const PositionItem = React.lazy(() => import(/* webpackChunkName: 'PositionItem' */ './PositionItem'));
@@ -291,7 +289,7 @@ PositionDrawer.propTypes = {
 
 const styles = () => ({
   drawer: {
-    marginTop: cordovaDrawerTopMargin(),
+    marginTop: `${heightOfCordovaSpacer(true)} !important`,
     maxWidth: '550px !important',
     '& *': {
       maxWidth: '550px !important',
@@ -305,7 +303,7 @@ const styles = () => ({
   },
   dialogPaper: {
     display: 'block',
-    marginTop: hasIPhoneNotch() ? 68 : 48,
+    marginTop: hasCordovaNotch() ? 68 : 48,
     minWidth: '100%',
     maxWidth: '100%',
     width: '100%',

src/js/components/Ballot/SelectBallotModal.jsx

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import React, { Component, Suspense } from 'react';
 import styled from 'styled-components';
 import AnalyticsActions from '../../actions/AnalyticsActions';
-import { hasIPhoneNotch } from '../../common/utils/cordovaUtils';
+import { hasCordovaNotch } from '../../common/utils/cordovaUtils';
 import { displayNoneIfSmallerThanDesktop } from '../../common/utils/isMobileScreenSize';
 import { renderLog } from '../../common/utils/logging';
 import AppObservableStore, { messageService } from '../../common/stores/AppObservableStore';
@@ -204,7 +204,7 @@ const styles = (theme) => ({
     },
   },
   dialogPaper: {
-    marginTop: hasIPhoneNotch() ? 68 : 48,
+    marginTop: hasCordovaNotch() ? 68 : 48,
     minHeight: '80%',
     maxHeight: '90%',
     height: '80%',

src/js/components/CompleteYourProfile/AdviserIntroModal.jsx

@@ -5,7 +5,7 @@ import withStyles from '@mui/styles/withStyles';
 import withTheme from '@mui/styles/withTheme';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { hasIPhoneNotch } from '../../common/utils/cordovaUtils';
+import { hasCordovaNotch } from '../../common/utils/cordovaUtils';
 import { renderLog } from '../../common/utils/logging';
 import { ModalTitleType1, ModalTitleAreaType1 } from '../Style/ModalType1Styles';
 
@@ -67,7 +67,7 @@ AdviserIntroModal.propTypes = {
 
 const styles = () => ({
   dialogPaper: {
-    marginTop: hasIPhoneNotch() ? 68 : 48,
+    marginTop: hasCordovaNotch() ? 68 : 48,
     '@media (min-width: 576px)': {
       maxWidth: '600px',
       width: '90%',

src/js/components/CompleteYourProfile/FirstPositionIntroModal.jsx

@@ -6,7 +6,7 @@ import withTheme from '@mui/styles/withTheme';
 import PropTypes from 'prop-types';
 import React, { Component, Suspense } from 'react';
 import VoterActions from '../../actions/VoterActions';
-import { hasIPhoneNotch } from '../../common/utils/cordovaUtils';
+import { hasCordovaNotch } from '../../common/utils/cordovaUtils';
 import { normalizedHref } from '../../common/utils/hrefUtils';
 import { renderLog } from '../../common/utils/logging';
 import { ContinueButtonType1Wrapper, ModalTitleType1, ModalTitleAreaType1 } from '../Style/ModalType1Styles';
@@ -155,7 +155,7 @@ FirstPositionIntroModal.propTypes = {
 
 const styles = () => ({
   dialogPaper: {
-    marginTop: hasIPhoneNotch() ? 68 : 48,
+    marginTop: hasCordovaNotch() ? 68 : 48,
     '@media (min-width: 576px)': {
       maxWidth: '600px',
       width: '90%',