Merge pull request #4042 from jedwardmook/WV-530

[TEAM REVIEW] WV-530 Potential redesign of OverlayImage on voterguide/page
wevote · Sep 19, 2024 · 40afed5 · 40afed5
2 parents 968fffd + f1c7a1c
commit 40afed5
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 10 deletions.
diff --git a/src/css/main.css b/src/css/main.css
@@ -1636,7 +1636,7 @@ h1,h2,h3,h4,h5,h6 {
 }
 
 .image-16x16 {
-  border-radius:3px;
+  border-radius:2px;
   height:16px;
   width:16px
 }
@@ -1648,17 +1648,20 @@ h1,h2,h3,h4,h5,h6 {
 }
 
 .image-border-gray-border {
-  border:2px solid #999;
+  border:3px solid #999;
+  border-top: 2px solid #999;
   border-radius:4px
 }
 
 .image-border-support {
-  border:2px solid #1fc06f;
+  border:3px solid #1fc06f;
+  border-top: 2px solid #1fc06f;
   border-radius:4px
 }
 
 .image-border-oppose {
-  border:2px solid #ff4922;
+  border:3px solid #ff4922;
+  border-top: 2px solid #ff4922;
   border-radius:4px
 }
 

diff --git a/src/js/components/Widgets/ScoreDisplay/BallotItemVoterGuideSupportOpposeDisplay.jsx b/src/js/components/Widgets/ScoreDisplay/BallotItemVoterGuideSupportOpposeDisplay.jsx
@@ -130,7 +130,7 @@ class BallotItemVoterGuideSupportOpposeDisplay extends Component {
                         alt="organization-photo-16x16"
                         imageUrl={organizationImageUrlHttpsTiny}
                         kind_of_ballot_item="ORGANIZATION"
-                        sizeClassName="image-16x16 "
+                        sizeClassName="image-16x16"
                       />
                     </Suspense>
                   ) : <TinyImageSpacer />}
@@ -345,10 +345,13 @@ const OverlayImage = styled('div')`
   // border: 2px solid {({ theme }) => theme.colors.supportGreenRgb};
   // color: {({ theme }) => theme.colors.supportGreenRgb};
   display: flex;
-  width: 36px;
+  align-items: center;
+  justify-content: space-around;
+  width: 40px;
   height: 20px;
-  margin-left: -2px;
-  margin-top: -12px;
+  background-color: white;
+  // margin-left: -2px;
+  margin-top: -10px;
   z-index: 2;
 `;
 
@@ -357,15 +360,16 @@ const OrganizationIconWrapper = styled('div')`
   padding: 0 !important;
   width: 22px;
   display: flex;
+  // justify-content: center;
 `;
 
 const TinyImageSpacer = styled('div')`
   background: white;
   border-radius: 3px;
   margin: 0 !important;
   padding: 0 !important;
-  width: 16px;
-  height: 16px;
+  width: 14px;
+  height: 14px;
 `;
 
 export default withTheme(withStyles(styles)(BallotItemVoterGuideSupportOpposeDisplay));