Merge pull request #4122 from DaleMcGrew/Dale_WebApp_Oct17-2024

Fixed "Ballot for..." display bug. Fixed styling format errors. Gave a little more spacing for Challenges footer text.
wevote · Oct 17, 2024 · 3844dee · 3844dee
2 parents a8edb80 + 6f3a746
commit 3844dee
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 31 deletions.
diff --git a/src/js/common/components/Navigation/ChallengeInviteSteps.jsx b/src/js/common/components/Navigation/ChallengeInviteSteps.jsx
@@ -186,23 +186,21 @@ const HeaderContainer = styled('div')`
   width: 100%;
 `;
 
-const LearnMoreButton = styled('button')`{
-    background: none;
-    border: none;
-    color: ${DesignTokenColors.primary500};
-    font-size: 13px;
-    font-weight: 500;
-    text-decoration: none;
-  }
+const LearnMoreButton = styled('button')`
+  background: none;
+  border: none;
+  color: ${DesignTokenColors.primary500};
+  font-size: 13px;
+  font-weight: 500;
+  text-decoration: none;
 `;
 
 const TitleH2 = styled('h2')`
-    color: ${DesignTokenColors.neutral900};
-    font-size: 20px;
-    font-weight: 600;
-    line-height: 25px;
-    margin: 0 10px;
-  }
+  color: ${DesignTokenColors.neutral900};
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 25px;
+  margin: 0 10px;
 `;
 const Wrapper = styled('div')`
   align-items: center;

diff --git a/src/js/components/Ballot/BallotTitleHeader.jsx b/src/js/components/Ballot/BallotTitleHeader.jsx
@@ -197,19 +197,20 @@ class BallotTitleHeader extends Component {
                             <BallotAddress
                               allowTextWrap={allowTextWrap}
                               centerText={centerText}
+                              className={linksOff ? '' : 'u-cursor--pointer'}
                               id="ballotTitleBallotAddress"
+                              onClick={this.showSelectBallotModalEditAddress}
                             >
                               Ballot for
                               {' '}
-                              <button style={{ backgroundColor: 'transparent', border: 'none', padding: '0' }} type="button">
-                                <span
-                                  className={linksOff ? '' : 'u-cursor--pointer u-link-color u-link-underline-on-hover'}
-                                  onClick={this.showSelectBallotModalEditAddress}
-                                >
+                              <span
+                                className={linksOff ? '' : 'u-link-color u-link-underline-on-hover'}
+                              >
+                                <span>
                                   {(textForMapSearch && textForMapSearch !== '') ? textForMapSearch : originalTextAddress}
                                 </span>
                                 {linksOff ? <></> : editIconStyled}
-                              </button>
+                              </span>
                             </BallotAddress>
                           ) : (
                             <>
@@ -223,7 +224,7 @@ class BallotTitleHeader extends Component {
                                 >
                                   Ballot for
                                   {' '}
-                                  <span className={linksOff ? '' : 'u-link-color'}>
+                                  <span className={linksOff ? '' : 'u-link-color u-link-underline-on-hover'}>
                                     {substitutedAddress}
                                   </span>
                                   {linksOff ? <></> : editIconStyled}
@@ -236,7 +237,7 @@ class BallotTitleHeader extends Component {
                                   id="ballotTitleBallotAddress"
                                   onClick={this.showSelectBallotModalEditAddress}
                                 >
-                                  <span className={linksOff ? '' : 'u-link-color'}>
+                                  <span className={linksOff ? '' : 'u-link-color u-link-underline-on-hover'}>
                                     Click to enter your address
                                   </span>
                                   {linksOff ? <></> : editIconStyled}
@@ -271,7 +272,7 @@ class BallotTitleHeader extends Component {
                 </ElectionNameScrollContent>
               </OverflowContent>
             </OverflowContainer>
-            {electionDayTextObject && (
+            {(!turnOffVoteByBelow && electionDayTextObject) && (
               <VoteByRightWrapper electionDateBelow={electionDateBelow}>
                 <VoteByRightLabel>
                   {daysUntilElection > 0 ? (

diff --git a/src/js/components/Navigation/FooterBar.jsx b/src/js/components/Navigation/FooterBar.jsx
@@ -197,6 +197,7 @@ class FooterBar extends React.Component {
       },
       '& .MuiBottomNavigationAction-label': {
         fontSize: 16,
+        marginBottom: '-4px',
       },
     };
     const groupsIconStyles = {
@@ -214,7 +215,7 @@ class FooterBar extends React.Component {
       },
       '& .MuiBottomNavigationAction-label': {
         fontSize: 16,
-        marginBottom: '4px',
+        marginBottom: '3px',
         marginTop: '-5px',
       },
     };
@@ -271,7 +272,8 @@ class FooterBar extends React.Component {
               showLabel
               sx={defaultIconStyles}
               style={{
-                paddingLeft: '0px',
+                marginLeft: '-4px',
+                paddingLeft: 0,
               }}
             />
             <BottomNavigationAction
@@ -300,7 +302,7 @@ class FooterBar extends React.Component {
               )}
               label="Candidates"
               style={{
-                marginLeft: '2px',
+                marginLeft: '-4px',
               }}
               showLabel
               sx={defaultIconStyles}
@@ -341,7 +343,7 @@ class FooterBar extends React.Component {
                 label="Challenges"
                 showLabel
                 style={{
-                  marginLeft: '8px',
+                  marginLeft: '4px',
                 }}
                 sx={groupsIconStyles}
               />

diff --git a/src/js/components/Style/BallotTitleHeaderStyles.jsx b/src/js/components/Style/BallotTitleHeaderStyles.jsx
@@ -108,9 +108,9 @@ export const VoteByBelowWrapper = styled('div', {
   display: flex;
   ${centerText ? 'justify-content: center;' : 'justify-content: start;'}
   margin: -2px 0 0 2px;
-  ${theme.breakpoints.up('md')} {
-    ${electionDateBelow ? '' : 'display: none;'}
-  }
+  // ${theme.breakpoints.up('md')} {
+  //   ${electionDateBelow ? '' : 'display: none;'}
+  // }
 `));
 
 export const VoteByRightLabel = styled('div')`
@@ -123,7 +123,7 @@ export const VoteByRightLabel = styled('div')`
 export const VoteByRightWrapper = styled('div', {
   shouldForwardProp: (prop) => !['electionDateBelow'].includes(prop),
 })(({ electionDateBelow, theme }) => (`
-  ${electionDateBelow ? 'display: none;' : 'display: block;'}
+  // ${electionDateBelow ? 'display: none;' : 'display: block;'}
   margin-left: 8px;
   margin-top: 4px;
   ${theme.breakpoints.down('md')} {

diff --git a/src/js/pages/Ballot/Ballot.jsx b/src/js/pages/Ballot/Ballot.jsx
@@ -1419,6 +1419,7 @@ class Ballot extends Component {
                       <header className="ballot__header__group">
                         <BallotTitleHeaderContainer marginTopOffset={this.marginTopOffset()}>
                           <BallotTitleHeader
+                            electionDateBelow
                             showShareButton
                             toggleSelectBallotModal={this.toggleSelectBallotModal}
                           />