Merge pull request #4006 from itcreativeusa/wv-491-style-new-position…

…-row-list-compressed-component WV-491 style new position row list compressed component [MERGE READY]
wevote · Sep 4, 2024 · c64caae · c64caae
2 parents ab4ca1b + 23206bc
commit c64caae
Showing 1 changed file with 40 additions and 6 deletions.
diff --git a/src/js/components/Ballot/PositionRowListCompressed.jsx b/src/js/components/Ballot/PositionRowListCompressed.jsx
@@ -298,7 +298,16 @@ class PositionRowListCompressed extends Component {
                       alt=""
                     />
                   ) : (
-                    <Avatar sx={styleWithBackgroundColor}>
+                    <Avatar
+                      sx={{
+                        ...styleWithBackgroundColor,
+                        border: '2px solid #FFFFFF',
+                        borderRadius: '50%',
+                        height: '36px',
+                        objectFit: 'cover',
+                        width: '36px',
+                      }}
+                    >
                       {speakerDisplayNameInitials}
                     </Avatar>
                   )}
@@ -333,31 +342,56 @@ const CandidateEndorsementsContainer = styled('div')`
   align-items: flex-start;
   display: flex;
   flex-flow: column;
+  max-width: 212px;
+  overflow: hidden;
+  width: 100%;
 `;
 
 const CandidateEndorsementContainer = styled('div')(({ theme }) => (`
-  min-width: 42px;
+  min-width: 36px;
+  border-radius: 50%;
+  margin-right: -12px;
+  position: relative; 
+
   ${theme.breakpoints.down('xs')} {
     display: none;
   }
+    
+  img{
+    border: 2px solid #FFFFFF; 
+    border-radius: 50%; 
+    height: 36px;
+    object-fit: cover; 
+    width: 36px;    
+  }
 `));
 
 const CandidateEndorsementPhotos = styled('div')`
+  align-items: center;  
   cursor: pointer;
   display: flex;
-  justify-content: flex-start;
-  margin-right: 0;
+  width: 100%;
 `;
 
 const CandidateEndorsementText = styled('div')`
+  color: #1073d4;
   cursor: pointer;
+  font-family: "Poppins", sans-serif;
+  font-size: 14px;
+  height: 54px;
+  letter-spacing: 0.5%;
+  line-height: 17.92px;
+  margin-top: 12px;
   overflow-wrap: break-word;
+  text-decoration: underline;
+  width: 100%;
 `;
 
 const CandidateEndorsementsWrapper = styled('div')`
-  height: 100%;
-  max-width: 400px;
+  height: 102px;  
+  max-width: 100%;
   white-space: wrap;
+  width: 212px;
 `;
 
 export default withTheme(withStyles(styles)(PositionRowListCompressed));