From ecb2167fd08fae4358875a6720aef258b486adca Mon Sep 17 00:00:00 2001 From: Kateryna Stetsenko Date: Thu, 29 Aug 2024 15:56:46 -0700 Subject: [PATCH 1/6] [WV-491] Add CandidateEndorsementText styled component to PositionRowListCompressed.jsx with specific styling --- .../components/Ballot/PositionRowListCompressed.jsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/js/components/Ballot/PositionRowListCompressed.jsx b/src/js/components/Ballot/PositionRowListCompressed.jsx index 2900017a0..6ca6cde17 100644 --- a/src/js/components/Ballot/PositionRowListCompressed.jsx +++ b/src/js/components/Ballot/PositionRowListCompressed.jsx @@ -350,14 +350,23 @@ const CandidateEndorsementPhotos = styled('div')` `; const CandidateEndorsementText = styled('div')` - cursor: pointer; +cursor: pointer; overflow-wrap: break-word; + color: #1073d4; + font-family: "Poppins", sans-serif; + font-weight: 500; + font-size: 14px; + line-height: 17.92px; + letter-spacing: 0.5%; + text-decoration: underline; `; const CandidateEndorsementsWrapper = styled('div')` height: 100%; - max-width: 400px; + max-width: 212px; white-space: wrap; + width: 212px; + height: 102px; `; export default withTheme(withStyles(styles)(PositionRowListCompressed)); From 2a68f04ffd799fd5a6ff2da6fd4391406c746c9e Mon Sep 17 00:00:00 2001 From: Kateryna Stetsenko Date: Thu, 29 Aug 2024 18:35:45 -0700 Subject: [PATCH 2/6] [WV-491]Add PositionRowListCompressed.jsx with styles for avatar and LazyImage --- .../Ballot/PositionRowListCompressed.jsx | 36 ++++++++++++++----- 1 file changed, 27 insertions(+), 9 deletions(-) diff --git a/src/js/components/Ballot/PositionRowListCompressed.jsx b/src/js/components/Ballot/PositionRowListCompressed.jsx index 6ca6cde17..83598d0af 100644 --- a/src/js/components/Ballot/PositionRowListCompressed.jsx +++ b/src/js/components/Ballot/PositionRowListCompressed.jsx @@ -298,9 +298,18 @@ class PositionRowListCompressed extends Component { alt="" /> ) : ( - - {speakerDisplayNameInitials} - + + {speakerDisplayNameInitials} + )} ); @@ -333,20 +342,30 @@ const CandidateEndorsementsContainer = styled('div')` align-items: flex-start; display: flex; flex-flow: column; + width: 212px; `; const CandidateEndorsementContainer = styled('div')(({ theme }) => (` - min-width: 42px; + min-width: 36px; + border-radius: 50%; + margin-right: -12px; + ${theme.breakpoints.down('xs')} { display: none; } + + img{ + width: 36px; + height: 36px; + border-radius: 50%; + object-fit: cover; + border: 2px solid #FFFFFF; +} `)); const CandidateEndorsementPhotos = styled('div')` - cursor: pointer; display: flex; - justify-content: flex-start; - margin-right: 0; + align-items: center; `; const CandidateEndorsementText = styled('div')` @@ -363,9 +382,8 @@ cursor: pointer; const CandidateEndorsementsWrapper = styled('div')` height: 100%; - max-width: 212px; + max-width: 100%; white-space: wrap; - width: 212px; height: 102px; `; From ad0e30b9b65d6c0f628017bdcffaa0523299ea60 Mon Sep 17 00:00:00 2001 From: Kateryna Stetsenko Date: Thu, 29 Aug 2024 19:21:38 -0700 Subject: [PATCH 3/6] [WV-491] Changed styles in PositionRowListCompressed.jsx --- src/js/components/Ballot/PositionRowListCompressed.jsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/js/components/Ballot/PositionRowListCompressed.jsx b/src/js/components/Ballot/PositionRowListCompressed.jsx index 83598d0af..591cf7157 100644 --- a/src/js/components/Ballot/PositionRowListCompressed.jsx +++ b/src/js/components/Ballot/PositionRowListCompressed.jsx @@ -342,7 +342,9 @@ const CandidateEndorsementsContainer = styled('div')` align-items: flex-start; display: flex; flex-flow: column; - width: 212px; + width: 100%; + max-width: 212px; + overflow: hidden; `; const CandidateEndorsementContainer = styled('div')(({ theme }) => (` @@ -366,6 +368,7 @@ const CandidateEndorsementContainer = styled('div')(({ theme }) => (` const CandidateEndorsementPhotos = styled('div')` display: flex; align-items: center; + width: 100%; `; const CandidateEndorsementText = styled('div')` @@ -378,10 +381,11 @@ cursor: pointer; line-height: 17.92px; letter-spacing: 0.5%; text-decoration: underline; + width: 100%; `; const CandidateEndorsementsWrapper = styled('div')` - height: 100%; + width: 212px; max-width: 100%; white-space: wrap; height: 102px; From 224d352a56e301e4e749218a92baa3ae2dbc7790 Mon Sep 17 00:00:00 2001 From: Kateryna Stetsenko Date: Thu, 29 Aug 2024 16:32:24 -0700 Subject: [PATCH 4/6] [WV-491] Style changes Add .profile-photo class to main.css with border-radius: 50% --- src/js/components/Ballot/PositionRowListCompressed.jsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/js/components/Ballot/PositionRowListCompressed.jsx b/src/js/components/Ballot/PositionRowListCompressed.jsx index 591cf7157..cb70b2c84 100644 --- a/src/js/components/Ballot/PositionRowListCompressed.jsx +++ b/src/js/components/Ballot/PositionRowListCompressed.jsx @@ -351,6 +351,7 @@ const CandidateEndorsementContainer = styled('div')(({ theme }) => (` min-width: 36px; border-radius: 50%; margin-right: -12px; + position: relative; ${theme.breakpoints.down('xs')} { display: none; @@ -369,10 +370,13 @@ const CandidateEndorsementPhotos = styled('div')` display: flex; align-items: center; width: 100%; + cursor: pointer; `; const CandidateEndorsementText = styled('div')` -cursor: pointer; + width: 100%; + height: 54px; + cursor: pointer; overflow-wrap: break-word; color: #1073d4; font-family: "Poppins", sans-serif; @@ -381,7 +385,7 @@ cursor: pointer; line-height: 17.92px; letter-spacing: 0.5%; text-decoration: underline; - width: 100%; + margin-top: 12px; `; const CandidateEndorsementsWrapper = styled('div')` From e06f2f3fc519ea3d3c68823e1d034e1e74fb4cfb Mon Sep 17 00:00:00 2001 From: Kateryna Stetsenko Date: Fri, 30 Aug 2024 11:24:43 -0700 Subject: [PATCH 5/6] [WV-491] Remove weight: 500 property from PositionRowListCompressed component to match mockup --- src/js/components/Ballot/PositionRowListCompressed.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/js/components/Ballot/PositionRowListCompressed.jsx b/src/js/components/Ballot/PositionRowListCompressed.jsx index cb70b2c84..f184e5d32 100644 --- a/src/js/components/Ballot/PositionRowListCompressed.jsx +++ b/src/js/components/Ballot/PositionRowListCompressed.jsx @@ -380,7 +380,6 @@ const CandidateEndorsementText = styled('div')` overflow-wrap: break-word; color: #1073d4; font-family: "Poppins", sans-serif; - font-weight: 500; font-size: 14px; line-height: 17.92px; letter-spacing: 0.5%; From 23206bccbc2d43500f9d579818e3404b2fd9e093 Mon Sep 17 00:00:00 2001 From: Kateryna Stetsenko Date: Tue, 3 Sep 2024 21:48:09 -0700 Subject: [PATCH 6/6] [WV-491]Organized CSS properties in alphabetical order in PositionRowListCompressed component --- .../Ballot/PositionRowListCompressed.jsx | 52 +++++++++---------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/src/js/components/Ballot/PositionRowListCompressed.jsx b/src/js/components/Ballot/PositionRowListCompressed.jsx index f184e5d32..7535aff5e 100644 --- a/src/js/components/Ballot/PositionRowListCompressed.jsx +++ b/src/js/components/Ballot/PositionRowListCompressed.jsx @@ -299,17 +299,17 @@ class PositionRowListCompressed extends Component { /> ) : ( - {speakerDisplayNameInitials} - + sx={{ + ...styleWithBackgroundColor, + border: '2px solid #FFFFFF', + borderRadius: '50%', + height: '36px', + objectFit: 'cover', + width: '36px', + }} + > + {speakerDisplayNameInitials} + )} ); @@ -342,9 +342,9 @@ const CandidateEndorsementsContainer = styled('div')` align-items: flex-start; display: flex; flex-flow: column; - width: 100%; max-width: 212px; overflow: hidden; + width: 100%; `; const CandidateEndorsementContainer = styled('div')(({ theme }) => (` @@ -358,40 +358,40 @@ const CandidateEndorsementContainer = styled('div')(({ theme }) => (` } img{ - width: 36px; - height: 36px; + border: 2px solid #FFFFFF; border-radius: 50%; + height: 36px; object-fit: cover; - border: 2px solid #FFFFFF; -} + width: 36px; + } `)); const CandidateEndorsementPhotos = styled('div')` + align-items: center; + cursor: pointer; display: flex; - align-items: center; width: 100%; - cursor: pointer; `; const CandidateEndorsementText = styled('div')` - width: 100%; - height: 54px; - cursor: pointer; - overflow-wrap: break-word; color: #1073d4; + cursor: pointer; font-family: "Poppins", sans-serif; font-size: 14px; - line-height: 17.92px; + height: 54px; letter-spacing: 0.5%; - text-decoration: underline; + line-height: 17.92px; margin-top: 12px; + overflow-wrap: break-word; + text-decoration: underline; + width: 100%; `; const CandidateEndorsementsWrapper = styled('div')` - width: 212px; + height: 102px; max-width: 100%; white-space: wrap; - height: 102px; + width: 212px; `; export default withTheme(withStyles(styles)(PositionRowListCompressed));