Update organization card header and tabs to use styled-components

src/app.scss

@@ -203,15 +203,6 @@
   text-align: right;
 }
 
-.awx-orgTabs-container{
-  display: flex
-}
-
-.awx-orgTabs__bottom-border{
-  flex-grow: 1;
-  border-bottom: 1px solid #d2d2d2
-}
-
 //
 // AlertModal styles
 //

src/components/Tabs/RoutedTabs.jsx

@@ -1,7 +1,35 @@
 import React from 'react';
 import { shape, string, number, arrayOf } from 'prop-types';
-import { Tab, Tabs } from '@patternfly/react-core';
+import { Tab, Tabs as PFTabs } from '@patternfly/react-core';
 import { withRouter } from 'react-router-dom';
+import styled from 'styled-components';
+
+const Tabs = styled(PFTabs)`
+  --pf-c-tabs__button--PaddingLeft: 20px;
+  --pf-c-tabs__button--PaddingRight: 20px;
+
+  .pf-c-tabs__list {
+    li:first-of-type .pf-c-tabs__button {
+      &::before {
+        border-left: none;
+      }
+      &::after {
+        margin-left: 0;
+      }
+    }
+  }
+
+  &::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    content: "";
+    border: solid var(--pf-c-tabs__item--BorderColor);
+    border-width: var(--pf-c-tabs__item--BorderWidth) 0 var(--pf-c-tabs__item--BorderWidth) 0;
+  }
+`;
 
 function RoutedTabs (props) {
   const { history, tabsArray } = props;

src/pages/Organizations/screens/Organization/Organization.jsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Switch, Route, withRouter, Redirect } from 'react-router-dom';
-import { Card, CardHeader, PageSection } from '@patternfly/react-core';
+import { Card, CardHeader as PFCardHeader, PageSection } from '@patternfly/react-core';
 import CardCloseButton from '../../../../components/CardCloseButton';
 import ContentError from '../../../../components/ContentError';
 import OrganizationAccess from './OrganizationAccess';
@@ -12,6 +12,7 @@ import OrganizationNotifications from './OrganizationNotifications';
 import OrganizationTeams from './OrganizationTeams';
 import RoutedTabs from '../../../../components/Tabs/RoutedTabs';
 import { OrganizationsAPI } from '../../../../api';
+import styled from 'styled-components';
 
 class Organization extends Component {
   constructor (props) {
@@ -130,23 +131,24 @@ class Organization extends Component {
       });
     }
 
+    const CardHeader = styled(PFCardHeader)`
+      --pf-c-card--first-child--PaddingTop: 0;
+      --pf-c-card--child--PaddingLeft: 0;
+      --pf-c-card--child--PaddingRight: 0;
+      position: relative;
+    `;
+
     let cardHeader = (
-      <CardHeader style={{ padding: 0 }}>
+      loading ? '' : (
-        <React.Fragment>
+        <CardHeader>
-          <div className="awx-orgTabs-container">
           <RoutedTabs
             match={match}
             history={history}
-              labeltext={i18n._(t`Organization detail tabs`)}
             tabsArray={tabsArray}
           />
           <CardCloseButton linkTo="/organizations" />
-            <div
-              className="awx-orgTabs__bottom-border"
-            />
-          </div>
-        </React.Fragment>
         </CardHeader>
+      )
     );
 
     if (!isInitialized) {