fix: fix styling for recommended challenge and thrive articles

#3977

Author: veshu

src/shared/components/challenge-detail/RecommendedActiveChallenges/ChallengesCard/index.jsx

@@ -81,7 +81,7 @@ export default function ChallengesCard({
               onClick={() => selectChallengeDetailsTab(DETAIL_TABS.DETAILS)}
               to={challengeDetailLink}
               styleName="challenge-title"
-              openNewTab={false}
+              openNewTab
             ><p>{challenge.name}</p>
             </Link>
             <div styleName="endtime-prize-container">

src/shared/components/challenge-detail/RecommendedActiveChallenges/style.scss

@@ -18,7 +18,7 @@
   align-items: center;
   justify-content: space-between;
   margin-top: -20px;
-  padding: 0 13px 0 33px;
+  padding: 0 13px;
   flex-wrap: wrap;
 }
 
@@ -39,7 +39,6 @@
 .challenges {
   display: flex;
   flex-wrap: wrap;
-  justify-content: center;
 }
 
 .challenge-card {

src/shared/components/challenge-detail/ThriveArticles/style.scss

@@ -23,7 +23,7 @@
 .header {
   @include roboto-bold;
 
-  margin-left: 33px;
+  margin-left: 13px;
   font-size: 20px;
   color: $tc-black;
 }

src/shared/containers/challenge-detail/index.jsx

@@ -414,11 +414,8 @@ class ChallengeDetailPageContainer extends React.Component {
               registerForChallenge={this.registerForChallenge}
               registering={registering}
               selectedView={selectedTab}
-              hasRecommendedChallenges={
-                selectedTab === DETAIL_TABS.DETAILS && displayRecommendedChallenges.length > 0
-              }
-              hasThriveArticles={
-                selectedTab === DETAIL_TABS.DETAILS && (thriveArticles.length > 0)}
+              hasRecommendedChallenges={displayRecommendedChallenges.length > 0}
+              hasThriveArticles={thriveArticles.length > 0}
               setChallengeListingFilter={setChallengeListingFilter}
               unregisterFromChallenge={() => unregisterFromChallenge(auth, challengeId)
               }
@@ -528,8 +525,7 @@ class ChallengeDetailPageContainer extends React.Component {
           }}
         />
         {
-        !isEmpty && selectedTab === DETAIL_TABS.DETAILS
-        && displayRecommendedChallenges.length ? (
+        !isEmpty && displayRecommendedChallenges.length ? (
           <RecommendedActiveChallenges
             challenges={displayRecommendedChallenges}
             prizeMode={prizeMode}
@@ -539,10 +535,10 @@ class ChallengeDetailPageContainer extends React.Component {
             expandedTags={expandedTags}
             expandTag={expandTag}
           />
-          ) : null
+        ) : null
         }
         {
-        !isEmpty && selectedTab === DETAIL_TABS.DETAILS && thriveArticles.length ? (
+        !isEmpty && thriveArticles.length ? (
           <RecommendedThriveArticles articles={thriveArticles} />
         ) : null
         }

src/shared/utils/challenge-detail/helper.jsx

@@ -195,7 +195,7 @@ export function getDisplayRecommendedChallenges(
   let results = _.filter(displayRecommendedChallenges, (c) => {
     let isValid = filter(c);
     if (isValid && userHandle) {
-      isValid = !c.users[userHandle];
+      isValid = !c.users[userHandle] && c.id !== challenge.id;
     }
     return isValid;
   });