fix css for candidate

wevote · Nov 9, 2023 · 2883114 · 2883114
1 parent b407fc9
commit 2883114
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 26 deletions.
diff --git a/src/js/common/components/Widgets/OfficeNameText.jsx b/src/js/common/components/Widgets/OfficeNameText.jsx
@@ -143,6 +143,7 @@ const PartyAndYearWrapper = styled('span')`
 
 const PartyAndOfficeWrapper = styled('div')`
   line-height: 1.2;
+  font-size: 14px;
 `;
 
 const YearStateWrapper = styled('div', {

diff --git a/src/js/components/Ballot/CandidateItem.jsx b/src/js/components/Ballot/CandidateItem.jsx
@@ -368,6 +368,28 @@ class CandidateItem extends Component {
               <>
                 {candidateNameRow}
               </>
+              <BallotItemSupportOpposeCountDisplayWrapper isClickable={!blockOnClickShowOrganizationModalWithPositions}>
+                <Suspense fallback={<></>}>
+                  <BallotItemSupportOpposeScoreDisplay
+                ballotItemWeVoteId={candidateWeVoteId}
+                blockOnClickShowOrganizationModalWithPositions={blockOnClickShowOrganizationModalWithPositions}
+                closeSupportOpposeCountDisplayModal={closeSupportOpposeCountDisplayModal}
+                controlAdviserMaterialUIPopoverFromProp={controlAdviserMaterialUIPopoverFromProp}
+                showAllPositions={this.props.goToBallotItem}
+                handleLeaveCandidateCard={forDesktop ? this.handleLeave : null}
+                handleEnterCandidateCard={forDesktop ? this.handleEnter : null}
+                hideEndorsementsOverview={this.props.hideEndorsementsOverview}
+                hideShowMoreLink={!linkToBallotItemPage}
+                openAdviserMaterialUIPopover={openAdviserMaterialUIPopover}
+                openSupportOpposeCountDisplayModal={openSupportOpposeCountDisplayModal}
+                supportOpposeCountDisplayModalTutorialOn={supportOpposeCountDisplayModalTutorialOn}
+                supportOpposeCountDisplayModalTutorialText={supportOpposeCountDisplayModalTutorialText}
+                showDownArrow={showDownArrow}
+                showUpArrow={showUpArrow}
+                  />
+                </Suspense>
+              </BallotItemSupportOpposeCountDisplayWrapper>
+
               { contestOfficeName && (
                 <div
                   className={linkToBallotItemPage && largeAreaHoverColorOnNow && showHover ? 'card__blue' : ''}
@@ -418,27 +440,6 @@ class CandidateItem extends Component {
               </CandidateLinksWrapper>
             </Candidate>
           </CandidateInfo>
-          <BallotItemSupportOpposeCountDisplayWrapper isClickable={!blockOnClickShowOrganizationModalWithPositions}>
-            <Suspense fallback={<></>}>
-              <BallotItemSupportOpposeScoreDisplay
-                ballotItemWeVoteId={candidateWeVoteId}
-                blockOnClickShowOrganizationModalWithPositions={blockOnClickShowOrganizationModalWithPositions}
-                closeSupportOpposeCountDisplayModal={closeSupportOpposeCountDisplayModal}
-                controlAdviserMaterialUIPopoverFromProp={controlAdviserMaterialUIPopoverFromProp}
-                showAllPositions={this.props.goToBallotItem}
-                handleLeaveCandidateCard={forDesktop ? this.handleLeave : null}
-                handleEnterCandidateCard={forDesktop ? this.handleEnter : null}
-                hideEndorsementsOverview={this.props.hideEndorsementsOverview}
-                hideShowMoreLink={!linkToBallotItemPage}
-                openAdviserMaterialUIPopover={openAdviserMaterialUIPopover}
-                openSupportOpposeCountDisplayModal={openSupportOpposeCountDisplayModal}
-                supportOpposeCountDisplayModalTutorialOn={supportOpposeCountDisplayModalTutorialOn}
-                supportOpposeCountDisplayModalTutorialText={supportOpposeCountDisplayModalTutorialText}
-                showDownArrow={showDownArrow}
-                showUpArrow={showUpArrow}
-              />
-            </Suspense>
-          </BallotItemSupportOpposeCountDisplayWrapper>
         </CandidateWrapper>
       </div>
     );

diff --git a/src/js/components/Widgets/BallotItemSupportOpposeComment.jsx b/src/js/components/Widgets/BallotItemSupportOpposeComment.jsx
@@ -272,7 +272,7 @@ const ActionBarWrapper = styled('div', {
   shouldForwardProp: (prop) => !['isCrunched'].includes(prop),
 })(({ isCrunched }) => (`
   padding: 0;
-  margin-bottom: ${isCrunched ? '3px' : '12px'};
+  margin-bottom: ${isCrunched ? '3px' : '2px'};
 `));
 
 const CommentDisplayWrapper = styled('div', {

diff --git a/src/js/components/Widgets/ItemActionBar/ItemActionBar.jsx b/src/js/components/Widgets/ItemActionBar/ItemActionBar.jsx
@@ -1021,8 +1021,10 @@ const ButtonGroup = styled('div', {
   // border-width: 1 px;
   flex-wrap: nowrap;
   height: fit-content;
+  height: 40px;
   justify-content: center;
   margin-left: 0;
+  margin-right: 8px;
   ${positionPublicToggleWrapAllowed ? 'width: 100%;' : ''};
 `));
 

diff --git a/src/js/components/Widgets/PositionPublicToggle.jsx b/src/js/components/Widgets/PositionPublicToggle.jsx
@@ -287,7 +287,7 @@ PositionPublicToggle.propTypes = {
 const styles = (theme) => ({
   radioPrimary: {
     padding: '.1rem',
-    margin: '.1rem .1rem .6rem .6rem',
+    marginRight: '4px',
     [theme.breakpoints.down('md')]: {
       marginLeft: 0,
     },
@@ -297,7 +297,7 @@ const styles = (theme) => ({
     // bottom: '4px',
     position: 'relative',
     [theme.breakpoints.down('sm')]: {
-      fontSize: '11px',
+      fontSize: '13px',
     },
     marginRight: isAndroidSizeMD() ? '2px' : '',
   },
@@ -309,6 +309,7 @@ const styles = (theme) => ({
 const PositionPublicToggleOuterWrapper = styled('div')`
   // margin-left: auto;
   width: fit-content;
+  //padding-top: 12px;
 `;
 
 const PositionPublicToggleInnerWrapper = styled('div')(({ theme }) => (`
@@ -326,6 +327,7 @@ const RadioItem = styled('div', {
       // width: 100% !important;
       // min-width: 100% !important;
       // margin-bottom: -6px;
+      padding-right: 6px;
   `) : ''}
 `));
 
@@ -335,6 +337,7 @@ const RadioGroup = styled('div', {
   display: flex;
   flex-flow: row nowrap;
   width: 100%;
+  height: 40px;
   ${theme.breakpoints.down('md')} {
     margin-bottom: -10px;
   }

diff --git a/src/js/components/Widgets/TwitterAccountStats.jsx b/src/js/components/Widgets/TwitterAccountStats.jsx
@@ -78,14 +78,14 @@ const TwitterAccountStatsOuterWrapper = styled('div')`
 
 const TwitterFollowersWrapper = styled('div')`
   color: #000;
-  font-size: 16px;
+  font-size: 14px;
   height: 24px;
   padding: 0 !important;
 `;
 
 const TwitterHandleWrapper = styled('div')`
   color: #000;
-  font-size: 16px;
+  font-size: 14px;
   height: 24px;
   margin-right: 5px;
   padding: 0 !important;