WV-4818 Make Cordova photo upload button area look like WebApp's

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

@@ -113,8 +113,8 @@ class VoterPhotoUpload extends Component {
     }
   }
 
-  handleCordovaDrop (files) {
-    console.log('files:', files);
+  handleCordovaDrop (event) {
+    // console.log('handleCordovaDrop event:', event);
     const { camera: { getPicture, DestinationType: { FILE_URI }, PictureSourceType: { PHOTOLIBRARY }, PopoverArrowDirection: { ARROW_ANY } } } = navigator;
     const { CameraPopoverOptions } = window;
     getPicture(async (pictureUrl) => {
@@ -188,6 +188,10 @@ class VoterPhotoUpload extends Component {
       thumbnail.style.display = 'none';
       thumbnail.src = '';
     }
+    const cordovaDropZone = document.querySelector('#cordovaDropZoneReplica');
+    if(cordovaDropZone) {
+      cordovaDropZone.style.display = 'inline-block';
+    }
   };
 
   preparePhotoForUpload = async (url) => {
@@ -201,6 +205,7 @@ class VoterPhotoUpload extends Component {
       dataUrl = url;
     }
     let thumbnail;
+    const cordovaDropZone = document.querySelector('#cordovaDropZoneReplica');
     const { isWebApp } = this.state;
     if (isWebApp) {
       thumbnail = document.querySelector('img[role="presentation"]');
@@ -210,6 +215,8 @@ class VoterPhotoUpload extends Component {
     if (thumbnail) {
       thumbnail.style.display = 'inline';
       thumbnail.src = dataUrl;
+      // console.log('preparePhotoForUpload cordovaDropZone display none', dataUrl);
+      cordovaDropZone.style.display = 'none';
     }
     const { politicianWeVoteId, onUpload } = this.props;
     if (politicianWeVoteId) {
@@ -242,6 +249,10 @@ class VoterPhotoUpload extends Component {
       pageDetails: getPageDetails(),
     };
     TagManager.dataLayer({ dataLayer: dataLayerObject });
+    this.setState({
+      politicianProfileUploadedImageUrlLarge: '',
+      voterProfileUploadedImageUrlLarge: '',
+    })
     this.clearThumbnail();
   };
 
@@ -259,8 +270,11 @@ class VoterPhotoUpload extends Component {
     const { resolveLocalFileSystemURL } = window;
     resolveLocalFileSystemURL(uri, async (fileEntry) => {
       const entryUrl = fileEntry.toURL();
-      await this.save(entryUrl);
-    }, (err) => console.error('camera resolveLocalFileSystemURL error', err));
+      await this.preparePhotoForUpload(entryUrl);
+    }, (err) => {
+      console.log('cameraCallback', err.message);
+      console.error('camera resolveLocalFileSystemURL error', err);
+    })
   }
 
   render () {
@@ -284,11 +298,12 @@ class VoterPhotoUpload extends Component {
         initialFiles = [voterProfileUploadedImageUrlLarge];
       }
     }
+
     return (
-      <OuterWrapper>
+      <OuterWrapperPhotoUpload>
         <form onSubmit={(e) => e.preventDefault()}>
-          <Wrapper>
-            <ColumnFullWidth>
+          <FormInnerWrapper>
+            <ColumnFullWidthPhotoUpload>
               {imageToDisplay ? (
                 <VoterPhotoWrapper limitPhotoHeight={limitPhotoHeight}>
                   <VoterPhotoImage maxWidth={maxWidth} src={imageToDisplay} alt="Profile Photo" />
@@ -323,22 +338,32 @@ class VoterPhotoUpload extends Component {
                     />
                   ) : (
                     <>
-                      <ChooseLink
-                        id="choosePhotoLink"
-                        className="u-link-color u-link-underline u-cursor--pointer"
-                        onClick={this.handleCordovaDrop}
-                      >
-                        Choose Photo
-                      </ChooseLink>
+                      <CordovaDropZoneReplica show id="cordovaDropZoneReplica">
+                        <div style={{ alignContent: 'center', minHeight: '100px', paddingTop: '15%'  }}>
+                          <ChooseLink
+                            id="choosePhotoLink"
+                            className={classes.dropzoneText}
+                            onClick={this.handleCordovaDrop}
+                            style={{ marginBottom: '20%' }}
+                          >
+                            Upload profile photo
+                          </ChooseLink>
+                          <AccountCircle
+                            fontSize="large"
+                            sx={{ marginLeft: '40%' }}
+                            onClick={this.handleCordovaDrop}
+                          />
+                        </div>
+                      </CordovaDropZoneReplica>
                       <img src="" id="cordova" alt="" />
                     </>
                   )}
                 </>
               )}
-            </ColumnFullWidth>
-          </Wrapper>
+            </ColumnFullWidthPhotoUpload>
+          </FormInnerWrapper>
         </form>
-      </OuterWrapper>
+      </OuterWrapperPhotoUpload>
     );
   }
 }
@@ -374,19 +399,36 @@ const styles = (theme) => ({
   },
 });
 
-const ColumnFullWidth = styled('div')`
+const ColumnFullWidthPhotoUpload = styled('div')`
   padding: 8px 12px;
   width: 100%;
 `;
 
+const CordovaDropZoneReplica = styled('div', {
+  shouldForwardProp: (prop) => !['show'].includes(prop),
+})(({ show }) => (`
+  color: #999;
+  position: relative;
+  width: 100%;
+  min-height: 250px;
+  background-color: rgb(255, 255, 255);
+  border: dashed rgba(0, 0, 0, 0.12);
+  border-radius: 4px;
+  box-sizing: border-box;
+  cursor: pointer;
+  overflow: hidden;
+  display: ${show ? 'inline-block' : 'none'};
+`));
+
+
 const DeleteLink = styled('div')`
 `;
 
 const ChooseLink = styled('div')`
   margin: 0 0 20px 18px;
 `;
 
-const OuterWrapper = styled('div')`
+const OuterWrapperPhotoUpload = styled('div')`
   width: 100%;
 `;
 
@@ -410,7 +452,7 @@ const VoterPhotoWrapper = styled('div', {
   width: 100%;
 `));
 
-const Wrapper = styled('div')`
+const FormInnerWrapper = styled('div')`
   display: flex;
   justify-content: space-between;
   margin-left: -12px;

src/js/common/utils/isMobileScreenSize.js

@@ -8,7 +8,7 @@ function isCordova () {
 
 export default function isMobileScreenSize () {
   // const { muiThemeGlobal: { breakpoints: { values: { tabMin } } } } = window;
-  const tabMin = window?.muiThemeGlobal?.breakpoints?.values?.tabMin ?? 786;
+  const tabMin = window?.muiThemeGlobal?.breakpoints?.values?.tabMin || 786;
   const width = isCordova() ? window.screen.availWidth : window.innerWidth;
   // console.log('isMobileScreenSize isCordova, width, maxWidth, return value:', isCordova(), width, tabMin,  width < tabMin);
   return  width < tabMin || isCordovaPhone();

src/js/components/Ballot/BallotTitleHeader.jsx

@@ -285,10 +285,12 @@ class BallotTitleHeader extends Component {
                                   >
                                     Ballot for
                                     {' '}
-                                      <AddressSpanLimited id="BallotFor1" className={linksOff ? '' : 'u-link-color u-link-underline-on-hover'}>
-                                        {(textForMapSearch && textForMapSearch !== '') ? textForMapSearch : originalTextAddress}
-                                      </AddressSpanLimited>
-                                      {linksOff ? <></> : editIconStyled}
+                                    <AddressSpanLimited
+                                      id="BallotFor1"
+                                      className={linksOff ? '' : 'u-link-color u-link-underline-on-hover'}
+                                      innerComponent={(textForMapSearch && textForMapSearch !== '') ? textForMapSearch : originalTextAddress}
+                                    />
+                                    {linksOff ? <></> : editIconStyled}
                                   </BallotAddress>
                                 </BallotAddressWrapper>
                               ) : (
@@ -304,10 +306,11 @@ class BallotTitleHeader extends Component {
                                       >
                                         Ballot for
                                         {' '}
-                                        <AddressSpanLimited id="BallotFor2" className={linksOff ? '' : 'u-link-color u-link-underline-on-hover'}>
-                                          {substitutedAddress}
-                                        </AddressSpanLimited>
-                                        {linksOff ? <></> : editIconStyled}
+                                        <AddressSpanLimited
+                                          id="BallotFor2"
+                                          className={linksOff ? '' : 'u-link-color u-link-underline-on-hover'}
+                                          innerComponent={linksOff ? <></> : editIconStyled}
+                                        />
                                       </BallotAddress>
                                     </BallotAddressWrapper>
                                   ) : (

src/js/components/Ballot/BallotTitleHeaderNationalPlaceholder.jsx

@@ -180,9 +180,8 @@ class BallotTitleHeaderNationalPlaceholder extends Component {
                               if (event.key === 'Enter') this.showSelectBallotModalEditAddress();
                             }}
                             className={linksOff ? '' : 'u-link-color'}
-                          >
-                            {textForMapSearch}
-                          </AddressSpanLimited>
+                            innerComponent={textForMapSearch}
+                          />
                         </BallotAddress>
                       ) : (
                         <BallotAddress tabIndex={-1}

src/js/components/Navigation/BallotDecisionsTabs.jsx

@@ -1,11 +1,11 @@
 import { Badge, Tab, Tabs } from '@mui/material';
-import styled from 'styled-components';
 import withStyles from '@mui/styles/withStyles';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import styled from 'styled-components';
 import BallotActions from '../../actions/BallotActions';
-import { renderLog } from '../../common/utils/logging';
 import SmartTooltip from '../../common/components/Widgets/SmartToolTip';
+import { renderLog } from '../../common/utils/logging';
 
 
 class BallotDecisionsTabs extends Component {

src/js/components/Style/BallotTitleHeaderStyles.jsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import styled from 'styled-components';
 import colors from '../../common/components/Style/Colors';
 import DesignTokenColors from '../../common/components/Style/DesignTokenColors';
@@ -168,13 +169,31 @@ export function ballotWrapperBodyStyles () {
   return styles;
 }
 
-export const AddressSpanLimited = styled('div')`
-  ${isMobileScreenSize() && {
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    display: 'inline-block',
-    width: '100%',
-    marginBottom: '-7px',
-  }}
+export function AddressSpanLimited({ id, className, innerComponent }) {
+  if (isMobileScreenSize()) {
+    return (
+      <AddressSpanLimitedMobile className={className} id={id}>
+        {innerComponent}
+      </AddressSpanLimitedMobile>
+    );
+  } else {
+    return (
+      <AddressSpanLimitedDesktop className={className} styleid={id}>
+        {innerComponent}
+      </AddressSpanLimitedDesktop>
+    );
+  }
+}
+
+export const AddressSpanLimitedDesktop = styled('span')`
+  //color: #206DB3; /* primary500 */
+`;
+
+export const AddressSpanLimitedMobile = styled('div')`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: inline-block;
+  width: 100%;
+  margin-bottom: -7px;
 `;

src/js/pages/Ballot/Ballot.jsx

@@ -1741,8 +1741,7 @@ const BallotBottomWrapper = styled('div', {
   shouldForwardProp: (prop) => !['scrolledDown'].includes(prop),
 })(({ scrolledDown, theme }) => {
   return (`
-    ${scrolledDown || showBallotDecisionsTabs() ? 'margin-top: 12px;' : 'margin-top: 38px;'}
-    ${isCordova() && isMobileScreenSize() && 'margin-top: 0 !important;'}
+    ${isCordova() && isMobileScreenSize() ? 'margin-top: 0 !important;' : 'margin-top: 12px'}
     transition: all 150ms ease-in;
     width: 100%;
     ${theme.breakpoints.down('sm') && isWebApp()} {
@@ -1751,6 +1750,8 @@ const BallotBottomWrapper = styled('div', {
     ${(isCordova() && pageEnumeration() === CordovaPageConstants.ballotSmHdrWild) ? 'padding-top: 20px' : ''}
   `);
 });
+// Removed Jul 29, 2026  ${scrolledDown || showBallotDecisionsTabs() ? 'margin-top: 12px;' : 'margin-top: 38px;'}
+
 
 const BallotOverflowWrapper = styled('div')`
   overflow-x: hidden;

src/js/utilsApi/showBallotDecisionsTabs.js

@@ -1,13 +1,8 @@
-import { isWebApp } from '../common/utils/isCordovaOrWebApp';
-import BallotStore from '../stores/BallotStore';  // eslint-disable-line import/no-cycle
+import BallotStore from '../stores/BallotStore'; // eslint-disable-line import/no-cycle
 
 export default function showBallotDecisionsTabs () {
   // Dale 2026-07-18 I would like showBallotDecisionsTabs to not be based on mobile vs. desktop, but only based on if ballot choices have been made.
   // WV-679 is the ticket where the UX team is reworking the design for in all screen sizes.
-
-  // src/js/common/utils/isMobileScreenSize.js should be used to avoid problems, 500 is an imperfect criteria
-  // const isMobileScreenSizeForShowBallotDecisionsTabs = window.innerWidth < 500;
-  // console.log('window.innerWidth:', window.innerWidth, ', isMobileScreenSizeForShowBallotDecisionsTabs:', isMobileScreenSizeForShowBallotDecisionsTabs);
   return (BallotStore.ballotLength !== BallotStore.ballotRemainingChoicesLength) &&
     (BallotStore.ballotRemainingChoicesLength > 0);
 }