Merge pull request #4106 from itcreativeusa/WV-514-invite-more-friend…

…s-header-with-two-tabs Replace Link with NavLink and style for active state in ChallengeInvi…
wevote · Oct 13, 2024 · 39f2f0e · 39f2f0e
2 parents eb71f95 + d3e074b
commit 39f2f0e
Showing 1 changed file with 24 additions and 32 deletions.
diff --git a/src/js/common/components/Navigation/ChallengeInviteSteps.jsx b/src/js/common/components/Navigation/ChallengeInviteSteps.jsx
@@ -1,5 +1,5 @@
 import React, { Suspense } from 'react';
-import { Link, withRouter } from 'react-router-dom';
+import { NavLink, withRouter } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { withStyles } from '@mui/styles';
 import styled from 'styled-components';
@@ -44,9 +44,6 @@ class ChallengeInviteSteps extends React.Component {
     return 1;
   };
 
-  // Check if a step is active based on the current step number
-  // isStepActive = (stepNumber) => this.props.currentStep === stepNumber;
-
   // Set a step as active when clicked
   isStepActive = (stepNumber) => this.state.activeStep === stepNumber;
 
@@ -74,7 +71,7 @@ class ChallengeInviteSteps extends React.Component {
     }));
   };
 
-  render() {
+  render () {
     return (
       <ChallengeInviteStepsContainer>
         {/* Rocket, Invite more friends, and Learn More */}
@@ -102,7 +99,7 @@ class ChallengeInviteSteps extends React.Component {
           <StepOneIconAndText
             isActive={this.isStepActive(1)}
           >
-            <Link
+            <StyledNavLink
               to={`${this.getChallengeBasePath()}customize-message`}
               // Handle click to update state
               onClick={() => this.handleStepClick(1)}
@@ -111,15 +108,15 @@ class ChallengeInviteSteps extends React.Component {
                 alt="Step 1 Icon"
                 imageName={this.isStepActive(1) ? StepOneActiveIcon : StepOneIcon}
               />
-            </Link>
-            <Link
+            </StyledNavLink>
+            <StyledNavLink
               to={`${this.getChallengeBasePath()}customize-message`}
               style={commonTextStyle}
               // Handle click to update state
               onClick={() => this.handleStepClick(1)}
             >
               Customize the message to your friends
-            </Link>
+            </StyledNavLink>
           </StepOneIconAndText>
 
           {/* Horizontal Line Between Steps */}
@@ -128,7 +125,7 @@ class ChallengeInviteSteps extends React.Component {
           <StepTwoIconAndText
             isActive={this.isStepActive(2)}
           >
-            <Link
+            <StyledNavLink
               to={`${this.getChallengeBasePath()}invite-friends`}
               // Handle click to update state
               onClick={() => this.handleStepClick(2)}
@@ -137,15 +134,15 @@ class ChallengeInviteSteps extends React.Component {
                 alt="Step 2 Icon"
                 imageName={this.isStepActive(2) ? StepTwoActiveIcon : StepTwoIcon}
               />
-            </Link>
-            <Link
+            </StyledNavLink>
+            <StyledNavLink
               to={`${this.getChallengeBasePath()}invite-friends`}
               style={commonTextStyle}
               // Handle click to update state
               onClick={() => this.handleStepClick(2)}
             >
               Copy message & link
-            </Link>
+            </StyledNavLink>
           </StepTwoIconAndText>
         </StepsContainer>
         {/* Render BoostLearnMoreModal */}
@@ -190,7 +187,7 @@ const HeaderContainer = styled('div')`
 `;
 
 const LearnMoreButton = styled('button')`{
-background: none;
+    background: none;
     border: none;
     color: ${DesignTokenColors.primary500};
     font-size: 13px;
@@ -237,16 +234,6 @@ const StepOneIconAndText = styled('div')`
   margin-right: 25px;
   text-align: center;
   width: 169px;
-  a {
-    font-weight: ${({ isActive }) => (isActive ? '600' : 'normal')};
-    color: ${({ isActive }) => (isActive ? DesignTokenColors.primary500 : 'inherit')};
-
-    &:hover {
-      color: ${DesignTokenColors.primary500};
-      font-weight: 600;
-      text-decoration: underline;
-    }
-  }
 `;
 
 const StepTwoIconAndText = styled('div')`
@@ -258,15 +245,20 @@ const StepTwoIconAndText = styled('div')`
   margin-left: 25px;
   text-align: center;
   width: 109px;
-  a {
-    font-weight: ${({ isActive }) => (isActive ? '600' : 'normal')};
-    color: ${({ isActive }) => (isActive ? DesignTokenColors.primary500 : 'inherit')};
+`;
 
-    &:hover {
-      color: ${DesignTokenColors.primary500};
-      font-weight: 600;
-      text-decoration: underline;
-    }
+const StyledNavLink = styled(NavLink)`
+  font-weight: normal;
+  color: inherit;
+  text-decoration: none;
+  &.active {
+    font-weight: 600;
+    color: ${DesignTokenColors.primary500};
+  }
+  &:hover {
+    color: ${DesignTokenColors.primary500};
+    font-weight: 600;
+    text-decoration: underline;
   }
 `;