diff --git a/src/app.scss b/src/app.scss index 05fef0b208..b15ebc0a61 100644 --- a/src/app.scss +++ b/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 // diff --git a/src/components/Tabs/RoutedTabs.jsx b/src/components/Tabs/RoutedTabs.jsx index 4100e766b6..2e2b5b4991 100644 --- a/src/components/Tabs/RoutedTabs.jsx +++ b/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; diff --git a/src/pages/Organizations/screens/Organization/Organization.jsx b/src/pages/Organizations/screens/Organization/Organization.jsx index 71100980f7..0c043dffbd 100644 --- a/src/pages/Organizations/screens/Organization/Organization.jsx +++ b/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 = ( - - -
- - -
-
- - + loading ? '' : ( + + + + + ) ); if (!isInitialized) {