From a68fb310ed0ccccd1a9d3b7cb5e26b27760f0c31 Mon Sep 17 00:00:00 2001
From: Mubbshar Anwar <78487564+mubbsharanwar@users.noreply.github.com>
Date: Fri, 11 Jun 2021 15:25:43 +0500
Subject: [PATCH] fix: Logistration tabs behavior (#331)

Logistration Tabs behavior and styles fix by using Paragon Tab component.

Fixes: VAN-554
---
 src/_style.scss                        | 12 +-----------
 src/common-components/Logistration.jsx | 20 ++++++++++----------
 2 files changed, 11 insertions(+), 21 deletions(-)

diff --git a/src/_style.scss b/src/_style.scss
index 27cd2b57..8cfb7248 100644
--- a/src/_style.scss
+++ b/src/_style.scss
@@ -35,22 +35,12 @@ $accent-a-light: #c9f2f5;
 .nav-tabs {
   a {
     color: $primary !important;
+    background: transparent !important;
 
     :hover {
       color: $primary !important;
     }
   }
-
-  .nav-link.active {
-    border-bottom: 0.175rem solid $primary;
-    border-top: none;
-    border-left: none;
-    border-right: none;
-  }
-
-  :hover {
-    border: none;
-  }
 }
 
 .sr-only {
diff --git a/src/common-components/Logistration.jsx b/src/common-components/Logistration.jsx
index 2f110d49..f80f50ed 100644
--- a/src/common-components/Logistration.jsx
+++ b/src/common-components/Logistration.jsx
@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Link } from 'react-router-dom';
+import { Redirect } from 'react-router-dom';
 
 import { sendPageEvent, sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Button } from '@edx/paragon';
+import { Button, Tabs, Tab } from '@edx/paragon';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faChevronLeft } from '@fortawesome/free-solid-svg-icons';
 
@@ -18,6 +18,7 @@ const Logistration = (props) => {
   const { intl, selectedPage } = props;
   const tpa = getTpaHint();
   const [institutionLogin, setInstitutionLogin] = useState(false);
+  const [key, setKey] = useState('');
 
   const handleInstitutionLogin = (e) => {
     sendTrackEvent('edx.bi.institution_login_form.toggled', { category: 'user-engagement' });
@@ -47,17 +48,16 @@ const Logistration = (props) => {
         : (
           <>
             {!tpa && (
-              <span className="nav nav-tabs">
-                <Link className={`nav-item nav-link ${selectedPage === REGISTER_PAGE ? 'active' : ''}`} to={updatePathWithQueryParams(REGISTER_PAGE)}>
-                  {intl.formatMessage(messages['logistration.register'])}
-                </Link>
-                <Link className={`nav-item nav-link ${selectedPage === LOGIN_PAGE ? 'active' : ''}`} to={updatePathWithQueryParams(LOGIN_PAGE)}>
-                  {intl.formatMessage(messages['logistration.sign.in'])}
-                </Link>
-              </span>
+              <Tabs defaultActiveKey={selectedPage} id="controlled-tab-example" onSelect={(k) => setKey(k)}>
+                <Tab title={intl.formatMessage(messages['logistration.register'])} eventKey={REGISTER_PAGE} />
+                <Tab title={intl.formatMessage(messages['logistration.sign.in'])} eventKey={LOGIN_PAGE} />
+              </Tabs>
             )}
           </>
         )}
+      { key && (
+        <Redirect to={updatePathWithQueryParams(key)} />
+      )}
       <div id="main-content" className="main-content">
         {selectedPage === LOGIN_PAGE
           ? <LoginPage institutionLogin={institutionLogin} handleInstitutionLogin={handleInstitutionLogin} />