From 6b8e32b8503f4d4c95ca6e27793c14c7320f3828 Mon Sep 17 00:00:00 2001
From: Gandharv <gandharvkumargarg@gmail.com>
Date: Mon, 15 Nov 2021 21:14:53 +0530
Subject: [PATCH] Fixes CSS of border-bottom of active classname in group
 manager (#1407)

---
 .../ManageGroupPermissionResources.jsx        | 47 +++++++++----------
 1 file changed, 21 insertions(+), 26 deletions(-)

diff --git a/frontend/src/ManageGroupPermissionResources/ManageGroupPermissionResources.jsx b/frontend/src/ManageGroupPermissionResources/ManageGroupPermissionResources.jsx
index 764b39a65f..903765ab15 100644
--- a/frontend/src/ManageGroupPermissionResources/ManageGroupPermissionResources.jsx
+++ b/frontend/src/ManageGroupPermissionResources/ManageGroupPermissionResources.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import cx from 'classnames';
 import SelectSearch, { fuzzySearch } from 'react-select-search';
 import { groupPermissionService } from '../_services/groupPermission.service';
 import 'react-toastify/dist/ReactToastify.css';
@@ -327,32 +328,26 @@ class ManageGroupPermissionResources extends React.Component {
           <div className="page-body">
             <div className="container-xl">
               <div className="card">
-                <ul className="nav nav-tabs">
-                  <li className="nav-item">
-                    <a
-                      className={`nav-link ${currentTab === 'apps' ? 'active' : ''}`}
-                      onClick={() => this.setState({ currentTab: 'apps' })}
-                    >
-                      Apps
-                    </a>
-                  </li>
-                  <li className="nav-item">
-                    <a
-                      className={`nav-link ${currentTab === 'users' ? 'active' : ''}`}
-                      onClick={() => this.setState({ currentTab: 'users' })}
-                    >
-                      Users
-                    </a>
-                  </li>
-                  <li className="nav-item">
-                    <a
-                      className={`nav-link ${currentTab === 'permissions' ? 'active' : ''}`}
-                      onClick={() => this.setState({ currentTab: 'permissions' })}
-                    >
-                      Permissions
-                    </a>
-                  </li>
-                </ul>
+                <nav className="nav nav-tabs">
+                  <a
+                    onClick={() => this.setState({ currentTab: 'apps' })}
+                    className={cx('nav-item nav-link', { active: currentTab === 'apps' })}
+                  >
+                    Apps
+                  </a>
+                  <a
+                    onClick={() => this.setState({ currentTab: 'users' })}
+                    className={cx('nav-item nav-link', { active: currentTab === 'users' })}
+                  >
+                    Users
+                  </a>
+                  <a
+                    onClick={() => this.setState({ currentTab: 'permissions' })}
+                    className={cx('nav-item nav-link', { active: currentTab === 'permissions' })}
+                  >
+                    Permissions
+                  </a>
+                </nav>
                 <div className="card-body">
                   <div className="tab-content">
                     {/* Apps Tab */}