Merge pull request #4021 from eaw-pid/WV-512

[TEAM REVIEW] - WV-512 - Add shadow when hovering over ballot item
wevote · Sep 12, 2024 · 80a64bd · 80a64bd
2 parents 9308f22 + ebeaf72
commit 80a64bd
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 16 deletions.
diff --git a/src/js/common/components/Style/ScrollingStyles.jsx b/src/js/common/components/Style/ScrollingStyles.jsx
@@ -4,14 +4,24 @@ import DesignTokenColors from './DesignTokenColors';
 export const BallotHorizontallyScrollingContainer = styled('div', {
   shouldForwardProp: (prop) => !['isChosen', 'showLeftGradient', 'showRightGradient'].includes(prop),
 })(({ isChosen, showLeftGradient, showRightGradient }) => (`
-  width: 100%;
+    width: 100%;
   overflow-x: auto;
   white-space: nowrap;
+  border: none;
+  border-radius: 16px;
+  margin-bottom: 5px;
+  transition: box-shadow 0.2s ease, background-color 0.3s ease; /* Smooth transition for shadow and background color */
+
+ /* Default styles */
+  background-color: ${isChosen ? DesignTokenColors.confirmation50 : ''};
+  box-shadow: ${isChosen ? '0 4px 8px rgba(0, 0, 0, 0.3)' : 'none'};
+
+  /* Hover effect */
+  &:hover {
+    background-color: ${isChosen ? DesignTokenColors.confirmation50 : DesignTokenColors.neutral50};
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Shadow effect on hover */
+  }
 
-  border: 1px solid #fff; /* Default border color so that the hover doesn't create jump */
-  &:hover { border: 1px solid ${DesignTokenColors.neutralUI100}; }
-  ${isChosen ? '' : `&:hover { background-color: ${DesignTokenColors.neutral50}; }`}
-  ${isChosen ? `background-color: ${DesignTokenColors.confirmation50};` : ''}
 
     /* Fade out, right side */
   ${showRightGradient ? '-webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 0));' : ''}
@@ -35,8 +45,6 @@ export const BallotHorizontallyScrollingContainer = styled('div', {
 `));
 
 export const BallotScrollingInnerWrapper = styled('div')`
-  overflow-x: hidden;
-  overflow-y: hidden;
   display: flex;
   position: relative;
 `;

diff --git a/src/js/components/Ballot/PositionRowListCompressed.jsx b/src/js/components/Ballot/PositionRowListCompressed.jsx
@@ -265,13 +265,20 @@ class PositionRowListCompressed extends Component {
           numberOfNamesDisplayed += 1;
         }
       });
-      if (numberOfNamesDisplayed < filteredPositionList.length) {
-        talkingAboutText += ` and ${filteredPositionListLength - numberOfNamesDisplayed} others`;
-      }
-      if (candidateName) {
-        talkingAboutText += ` are talking about ${candidateName}`;
-      }
-    }
+//
+      const remainingCount = filteredPositionList.length - numberOfNamesDisplayed;
+        if (remainingCount > 0) {
+          talkingAboutText += ` and ${remainingCount} ${remainingCount === 1 ? 'other' : 'others'}`;
+        }
+
+        if (candidateName && numberOfNamesDisplayed === 1) {
+          talkingAboutText += ` is talking about ${candidateName}`;
+        }
+        else {
+          talkingAboutText += ` are talking about ${candidateName}`;
+        }
+          }
+
     return (
       <CandidateEndorsementsWrapper>
         <CandidateEndorsementsContainer>

diff --git a/src/js/components/Style/BallotStyles.jsx b/src/js/components/Style/BallotStyles.jsx
@@ -63,7 +63,6 @@ export const CandidateContainer = styled('div')`
 `;
 
 export const CandidateInfo = styled('div')(({ theme }) => (`
-  border: 1px solid #fff;
   display: block;
   height: 100%;
   margin: 0 !important;
@@ -139,7 +138,7 @@ export const CandidateWrapper = styled('div')(({ theme }) => (`
     width: 100%;
   }
   ${theme.breakpoints.up('sm')} {
-    // margin-left: 48px;
+//     margin-left: 48px;
     min-width: 320px;
   }
 `));