From a3fdb4aee3fc83e4de96ca5a2bc678db43b9e90c Mon Sep 17 00:00:00 2001
From: Alex Corey <alex.swansboro@gmail.com>
Date: Thu, 2 May 2019 13:38:51 -0400
Subject: [PATCH] add bottom border to tabs

---
 src/app.scss                                  | 20 +++++++++++++
 .../screens/Organization/Organization.jsx     | 29 ++++++++++++-------
 2 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/src/app.scss b/src/app.scss
index 704f02219a..931b00520f 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -317,6 +317,24 @@
   margin-bottom: 10px;
 }
 
+.orgTabsContainer{
+  display: flex
+}
+
+.orgTabsSection{
+  flex-grow: 1;
+  border-bottom: 1px solid #d2d2d2
+}
+
+.OrgsTab-closeButton {
+  color: black;
+  float: right;
+  position: relative;
+  top: 10px;
+  margin: 0 10px;
+  right: 10px;
+}
+
 .awx-c-form-action-group {
   float: right;
   display: block;
@@ -398,3 +416,5 @@
 .pf-m-error p.pf-c-form__helper-text {
   color: var(--pf-global--danger-color--100);
 }
+
+
diff --git a/src/pages/Organizations/screens/Organization/Organization.jsx b/src/pages/Organizations/screens/Organization/Organization.jsx
index 223bf0b60f..e46eae7569 100644
--- a/src/pages/Organizations/screens/Organization/Organization.jsx
+++ b/src/pages/Organizations/screens/Organization/Organization.jsx
@@ -112,8 +112,10 @@ class Organization extends Component {
       isAdminOfThisOrg
     } = this.state;
 
-    const tabsPaddingOverride = {
-      padding: '0',
+    const tabsStyle = {
+      paddingTop: '0px',
+      paddingLeft: '0px',
+      paddingRight: '0px',
     };
 
     const canSeeNotificationsTab = me.is_system_auditor || isNotifAdmin || isAuditorOfThisOrg;
@@ -141,18 +143,25 @@ class Organization extends Component {
       loading ? ''
         : (
           <CardHeader
-            style={tabsPaddingOverride}
+            style={tabsStyle}
           >
             <I18n>
               {({ i18n }) => (
                 <React.Fragment>
-                  <RoutedTabs
-                    match={match}
-                    history={history}
-                    labeltext={i18n._(t`Organization detail tabs`)}
-                    tabsArray={tabsArray}
-                  />
-                  <CardCloseButton linkTo="/organizations" />
+                  <div className="orgTabsContainer">
+                    <RoutedTabs
+                      className="orgTabsSection"
+                      match={match}
+                      history={history}
+                      labeltext={i18n._(t`Organization detail tabs`)}
+                      tabsArray={tabsArray}
+                    />
+                    <div
+                      className="orgTabsSection"
+                    >
+                      <CardCloseButton linkTo="/organizations" />
+                    </div>
+                  </div>
                 </React.Fragment>
               )}
             </I18n>