Create styled div for an arrow

fdiazq · Oct 19, 2024 · 03f4225 · 03f4225
1 parent 8c227c2
commit 03f4225
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 27 deletions.
diff --git a/src/js/common/components/Challenge/JoinChallengeAndLearnMoreButtons.jsx b/src/js/common/components/Challenge/JoinChallengeAndLearnMoreButtons.jsx
@@ -17,7 +17,7 @@ const JoinChallengeAndLearnMoreButtons = ({ classes }) => {
       </Button>
       <Button
         classes={{ root: classes.learnMoreButton }}
-        color="primary"
+        color="secondary"
         variant="contained"
       >
         Learn More
@@ -29,20 +29,24 @@ const JoinChallengeAndLearnMoreButtons = ({ classes }) => {
 const styles = () => ({
   joinChallengeButton: {
     borderRadius: 45,
-    maxWidth: '300px',
+    maxWidth: 300,
     background: 'var(--Primary-600, #0858A1)',
-    border: ' 1px solid var(--Primary-400, #4187C6)',
+    border: '1px solid var(--Primary-400, #4187C6)',
     color: 'var(--WhiteUI, #FFFFFF)',
     marginRight: '10px',
-    marginTop: '10px'
+    marginTop: '10px',
   },
-learnMoreButton:{
+  learnMoreButton:{
     borderRadius: 45,
-    maxWidth: '300px',
+    maxWidth: 300,
     background: 'white',
-    border: ' 1px solid var(--Primary-400, #4187C6)',
+    border: '1px solid var(--Primary-400, #4187C6)',
     color: 'var(--Neutral-900, #2A2A2C)',
-    marginTop: '10px'
+    marginTop: '10px',
+    '&:hover': {
+      backgroundColor: 'white',
+      color: 'var(--Neutral-900, #2A2A2C)',
+    },
   },
 });
 

diff --git a/src/js/common/components/Challenge/YourRank.jsx b/src/js/common/components/Challenge/YourRank.jsx
@@ -79,14 +79,16 @@ const YourRank = ({ classes, challengeWeVoteId }) => {
           <Button
             onClick={handleClick}
             classes={{ root: classes.buttonDesktop }}
-            style={{ color: clicked ? '#FFFFFF' : '#AC5204' }}
+            style={{
+              backgroundColor: clicked ? '#AC5204' : 'white',
+              color: clicked ? '#FFFFFF' : '#AC5204' }}
           >
             #
             {rankOfVoter}
             {' '}
-            <span className="arrow">
-              <img src={arrowImage} alt="arrow" classes={{ root: classes.arrow}} />
-            </span>
+            <StyledArrowContainer>
+              <ArrowImg src={arrowImage} alt="arrow"/>
+            </StyledArrowContainer>
           </Button>
         </YourRankButtonWrapper>
       </YourRankInnerWrapper>
@@ -135,15 +137,6 @@ const styles = (theme) => ({
       textDecoration: 'underline',
     },
   },
-  arrow: {
-    width: '10.5px',
-    height: '12.5px',
-    top: '2.75px',
-    left: '14.25px',
-    gap: '0px',
-    opacity: '0px',
-    angle: '-90 deg',
-  },
 });
 
 const YourRankInnerWrapper = styled('div')`
@@ -158,23 +151,40 @@ const YourRankOuterWrapper = styled('div')`
   z-index: 100;
 `;
 
-const YourRankButtonWrapper = styled('div')`
-  background-color: ${(props)=>(props.clicked ? "#AC5204" : "#FFFFFF")};
+const YourRankButtonWrapper = styled('div', {
+  shouldForwardProp: (prop) => !['clicked'].includes(prop),
+})(({ clicked }) => `
+  background-color: ${clicked ? DesignTokenColors.orange500 : DesignTokenColors.white};
   width: 105px;
   height: 34px;
-  //top: 443px;
-  //left: 234px;
-  gap: 0px;
+  // top: 443px;
+  // left: 234px;
+  gap: 0;
   border-radius: 20px;
   border: 1px solid #AC5204;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background-color 0.3s ease, color 0.3s ease;
-`;
+`);
 
 const YourRankText = styled('div')`
   margin-right: 10px;
 `;
 
+const StyledArrowContainer = styled('div')`
+  width: '10.5px',
+  height: '12.5px',
+  top: '2.75px',
+  left: '14.25px',
+  gap: 0,
+  opacity: 0,
+  angle: '-90 deg',
+`;
+
+const ArrowImg = styled('img')`
+  width: 10.5px;
+  height: 12.5px;
+`;
+
 export default withStyles(styles)(YourRank);