Add Tab styles

src/pages/Organizations/components/OrganizationDetail.jsx

@@ -6,10 +6,7 @@ import {
   CardHeader,
   CardBody,
   PageSection,
-  PageSectionVariants,
-  ToolbarGroup,
-  ToolbarItem,
-  ToolbarSection,
+  PageSectionVariants
 } from '@patternfly/react-core';
 import {
   Switch,
@@ -23,9 +20,9 @@ import '../tabs.scss';
 
 const DetailTab = ({ location, match, tab, currentTab, children, breadcrumb }) => {
   const tabClasses = () => {
-    let classes = 'at-c-tabs__tab';
+    let classes = 'pf-c-tabs__item';
     if (tab === currentTab) {
-      classes += ' at-m-selected';
+      classes += ' pf-m-current';
     }
 
     return classes;
@@ -43,11 +40,14 @@ const DetailTab = ({ location, match, tab, currentTab, children, breadcrumb }) =
   };
 
   return (
-    <ToolbarItem className={tabClasses()}>
-      <Link to={{ pathname: `${match.url}`, search: updateTab(), state: { breadcrumb } }} replace={tab === currentTab}>
-        {children}
-      </Link>
-    </ToolbarItem>
+    <li className={tabClasses()}>
+        <Link
+          className={'pf-c-tabs__button'}
+          to={{ pathname: `${match.url}`, search: updateTab(), state: { breadcrumb } }}
+          replace={tab === currentTab}>
+          {children}
+        </Link>
+    </li>
   );
 };
 
@@ -96,8 +96,8 @@ const OrganizationDetail = ({
   const detailTabs = (tabs) => (
     <I18n>
       {({ i18n }) => (
-        <ToolbarSection aria-label={i18n._(t`Organization detail tabs`)}>
-          <ToolbarGroup className="at-c-tabs">
+        <div className="pf-c-tabs" aria-label={i18n._(t`Organization detail tabs`)}>
+          <ul className="pf-c-tabs__list">
             {tabs.map(tab => (
               <DetailTab
                 key={tab}
@@ -110,8 +110,8 @@ const OrganizationDetail = ({
                 {getTabName(tab)}
               </DetailTab>
             ))}
-          </ToolbarGroup>
-        </ToolbarSection>
+          </ul>
+        </div>
       )}
     </I18n>
   );

src/pages/Organizations/tabs.scss

@@ -1,22 +1,50 @@
-.at-c-tabs {
-  padding: 0 5px !important;
-  margin: 0 -10px !important;
-
-  .at-c-tabs__tab {
-    margin: 0 5px;
-  }
-
-  .at-c-tabs__tab.at-m-selected {
-    text-decoration: underline;
-  }
-}
-
 .at-c-orgPane {
   a {
     display: block;
   }
 }
 
+.pf-c-card__header {
+  --pf-c-card__header--PaddingBottom: 0;
+  --pf-c-card__header--PaddingLeft: 0;
+  --pf-c-card__header--PaddingRight: 0;
+  --pf-c-card__header--PaddingTop: 0;
+}
+
+.pf-c-tabs {
+  --pf-global--link--Color: #484848;
+  --pf-global--link--Color--hover: #484848;
+  --pf-global--link--TextDecoration--hover: none;
+
+  &:before {
+    border-bottom: 1px solid var(--pf-c-tabs__item--BorderColor);
+    border-top: 1px solid var(--pf-c-tabs__item--BorderColor);
+    bottom: 0;
+    content: " ";
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
+  .pf-c-tabs__button {
+    --pf-c-tabs__button--PaddingLeft: 20px;
+    --pf-c-tabs__button--PaddingRight: 20px;
+  }
+
+  .pf-c-tabs__item.pf-m-current
+  .pf-c-tabs__button::after {
+    border-bottom: 3px solid var(--pf-c-tabs__item--m-current--Color);
+    border-top: none;
+  }
+
+  .pf-c-tabs__item:not(.pf-m-current):hover
+  .pf-c-tabs__button::after {
+    border-bottom: 3px solid var(--pf-global--Color--dark-200);
+    border-top: none;
+  }
+}
+
 .pf-c-breadcrumb__item.heading {
   flex: 100%;
   font-size: 20px;