From 8fed685f871f4d3ec23fae288d150c2bd5153226 Mon Sep 17 00:00:00 2001
From: ilona <gogiashvili.ilona@gmail.com>
Date: Wed, 23 Oct 2024 08:54:44 -0400
Subject: [PATCH] Add id for buttons in the
 JoinChallengeAndLearnMoreButtons.jsx

---
 .../JoinChallengeAndLearnMoreButtons.jsx      | 27 ++++++++++---------
 .../common/components/Challenge/YourRank.jsx  |  2 +-
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/js/common/components/Challenge/JoinChallengeAndLearnMoreButtons.jsx b/src/js/common/components/Challenge/JoinChallengeAndLearnMoreButtons.jsx
index 6bdd3740f..a19df0591 100644
--- a/src/js/common/components/Challenge/JoinChallengeAndLearnMoreButtons.jsx
+++ b/src/js/common/components/Challenge/JoinChallengeAndLearnMoreButtons.jsx
@@ -5,12 +5,13 @@ import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import JoinChallengeButton from './JoinChallengeButton'
 
-const JoinChallengeAndLearnMoreButtons = ({ classes }) => {
+const JoinChallengeAndLearnMoreButtons = ({ challengeWeVoteId, classes }) => {
   return (
     <JoinChallengeButtonWrapper>
       <Button
         classes={{ root: classes.joinChallengeButton }}
         color="primary"
+        id={`challengeLearnMore-${challengeWeVoteId}`}
         variant="contained"
       >
        Join Challenge
@@ -18,7 +19,8 @@ const JoinChallengeAndLearnMoreButtons = ({ classes }) => {
       <Button
         classes={{ root: classes.learnMoreButton }}
         color="secondary"
-        variant="contained"
+        id={`challengeLearnMore-${challengeWeVoteId}`}
+        variant="outlined"
       >
         Learn More
       </Button>
@@ -30,23 +32,23 @@ const styles = () => ({
   joinChallengeButton: {
     borderRadius: 45,
     maxWidth: 300,
-    background: 'var(--Primary-600, #0858A1)',
-    border: '1px solid var(--Primary-400, #4187C6)',
-    color: 'var(--WhiteUI, #FFFFFF)',
+//     background: 'var(--Primary-600, #0858A1)',
+//     border: '1px solid var(--Primary-400, #4187C6)',
+//     color: 'var(--WhiteUI, #FFFFFF)',
     marginRight: '10px',
     marginTop: '10px',
   },
   learnMoreButton:{
     borderRadius: 45,
     maxWidth: 300,
-    background: 'white',
-    border: '1px solid var(--Primary-400, #4187C6)',
-    color: 'var(--Neutral-900, #2A2A2C)',
+//     background: 'white',
+//     border: '1px solid var(--Primary-400, #4187C6)',
+//     color: 'var(--Neutral-900, #2A2A2C)',
     marginTop: '10px',
-    '&:hover': {
-      backgroundColor: 'white',
-      color: 'var(--Neutral-900, #2A2A2C)',
-    },
+//     '&:hover': {
+//       backgroundColor: 'white',
+//       color: 'var(--Neutral-900, #2A2A2C)',
+//     },
   },
 });
 
@@ -57,6 +59,7 @@ const JoinChallengeButtonWrapper = styled('div')`
 `;
 
 JoinChallengeAndLearnMoreButtons.propTypes = {
+  challengeWeVoteId: PropTypes.string,
   classes: PropTypes.object.isRequired,
 };
 
diff --git a/src/js/common/components/Challenge/YourRank.jsx b/src/js/common/components/Challenge/YourRank.jsx
index 2e38965e8..7690d411a 100644
--- a/src/js/common/components/Challenge/YourRank.jsx
+++ b/src/js/common/components/Challenge/YourRank.jsx
@@ -98,7 +98,7 @@ const YourRank = ({ classes, challengeWeVoteId }) => {
             classes={{ root: classes.buttonDesktop }}
             style={{
               backgroundColor: clicked ? '#AC5204' : 'white',
-              color: clicked ? '#FFFFFF' : '#AC5204' }}
+              color: clicked ? '#FFFFFF' : '#AC5204'}}
           >
             #
             {rankOfVoter}