diff --git a/src/app.scss b/src/app.scss
index 74d0f4f91b..704f02219a 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -34,7 +34,7 @@
// sidebar overrides
//
-.pf-c-page__sidebar{
+.pf-c-page__sidebar {
--pf-c-page__sidebar--md--Width: 255px;
.pf-c-nav {
@@ -205,8 +205,25 @@
// pf card overrides
//
-.pf-c-card {
+// specificity hack to override PatternFly
+.pf-c-card.pf-c-card {
+ --pf-c-card--child--PaddingRight: 20px;
+ --pf-c-card--child--PaddingBottom: 24px;
+ --pf-c-card--child--PaddingLeft: 20px;
+
display: flex;
+ position: relative;
+}
+
+.pf-c-card__close {
+ position: absolute;
+ top: 10px;
+ right: 4px;
+ color: var(--pf-c-button--m-plain--Color);
+
+ &.pf-c-button {
+ position: absolute;
+ }
}
.pf-c-card__header {
@@ -300,14 +317,6 @@
margin-bottom: 10px;
}
-.OrgsTab-closeButton {
- color: black;
- float: right;
- position: relative;
- top: -25px;
- margin: 0 10px;
- right: 10px;
-}
.awx-c-form-action-group {
float: right;
display: block;
diff --git a/src/components/CardCloseButton.jsx b/src/components/CardCloseButton.jsx
new file mode 100644
index 0000000000..9b8dffe41c
--- /dev/null
+++ b/src/components/CardCloseButton.jsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { string } from 'prop-types';
+import { Link } from 'react-router-dom';
+import { Button } from '@patternfly/react-core';
+import { TimesIcon } from '@patternfly/react-icons';
+import { I18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+
+function CardCloseButton ({ linkTo, ...props }) {
+ if (linkTo) {
+ return (
+
+ {({ i18n }) => (
+
+
+
+ )}
+
+ );
+ }
+ return (
+
+ {({ i18n }) => (
+
+ )}
+
+ );
+}
+CardCloseButton.propTypes = {
+ linkTo: string,
+};
+CardCloseButton.defaultProps = {
+ linkTo: null,
+};
+
+export default CardCloseButton;
diff --git a/src/components/FormActionGroup.jsx b/src/components/FormActionGroup/FormActionGroup.jsx
similarity index 98%
rename from src/components/FormActionGroup.jsx
rename to src/components/FormActionGroup/FormActionGroup.jsx
index 675633163e..99db0621a4 100644
--- a/src/components/FormActionGroup.jsx
+++ b/src/components/FormActionGroup/FormActionGroup.jsx
@@ -1,21 +1,19 @@
import React from 'react';
import PropTypes from 'prop-types';
-
import { I18n } from '@lingui/react';
import { t } from '@lingui/macro';
-
import {
ActionGroup,
Toolbar,
ToolbarGroup,
Button
} from '@patternfly/react-core';
+import './styles.scss';
const formActionGroupStyle = {
display: 'flex',
flexDirection: 'row',
justifyContent: 'flex-end',
- marginTop: '10px'
};
const buttonGroupStyle = {
diff --git a/src/components/FormActionGroup/index.js b/src/components/FormActionGroup/index.js
new file mode 100644
index 0000000000..95f4999d9e
--- /dev/null
+++ b/src/components/FormActionGroup/index.js
@@ -0,0 +1,3 @@
+import FormActionGroup from './FormActionGroup';
+
+export default FormActionGroup;
diff --git a/src/components/FormActionGroup/styles.scss b/src/components/FormActionGroup/styles.scss
new file mode 100644
index 0000000000..b42fb22d74
--- /dev/null
+++ b/src/components/FormActionGroup/styles.scss
@@ -0,0 +1,3 @@
+.pf-c-form__group.pf-m-action {
+ --pf-c-form__group--m-action--MarginTop: 0;
+}
diff --git a/src/pages/Organizations/screens/Organization/Organization.jsx b/src/pages/Organizations/screens/Organization/Organization.jsx
index 479a12b642..50737c6701 100644
--- a/src/pages/Organizations/screens/Organization/Organization.jsx
+++ b/src/pages/Organizations/screens/Organization/Organization.jsx
@@ -1,23 +1,11 @@
import React, { Component } from 'react';
import { I18n, i18nMark } from '@lingui/react';
import { t } from '@lingui/macro';
-import {
- Switch,
- Route,
- withRouter,
- Redirect,
- Link
-} from 'react-router-dom';
-import {
- Card,
- CardHeader,
- PageSection,
-} from '@patternfly/react-core';
-import {
- TimesIcon
-} from '@patternfly/react-icons';
+import { Switch, Route, withRouter, Redirect } from 'react-router-dom';
+import { Card, CardHeader, PageSection } from '@patternfly/react-core';
import { withNetwork } from '../../../../contexts/Network';
import NotifyAndRedirect from '../../../../components/NotifyAndRedirect';
+import CardCloseButton from '../../../../components/CardCloseButton';
import OrganizationAccess from './OrganizationAccess';
import OrganizationDetail from './OrganizationDetail';
import OrganizationEdit from './OrganizationEdit';
@@ -125,7 +113,9 @@ class Organization extends Component {
} = this.state;
const tabsPaddingOverride = {
- padding: '0'
+ paddingTop: '0',
+ paddingRight: '0',
+ paddingLeft: '0',
};
const canSeeNotificationsTab = me.is_system_auditor || isNotifAdmin || isAuditorOfThisOrg;
@@ -164,13 +154,7 @@ class Organization extends Component {
labeltext={i18n._(t`Organization detail tabs`)}
tabsArray={tabsArray}
/>
-
-
-
+
)}
diff --git a/src/pages/Organizations/screens/OrganizationAdd.jsx b/src/pages/Organizations/screens/OrganizationAdd.jsx
index 219e5da82d..c975ea6bac 100644
--- a/src/pages/Organizations/screens/OrganizationAdd.jsx
+++ b/src/pages/Organizations/screens/OrganizationAdd.jsx
@@ -8,13 +8,11 @@ import {
Card,
CardHeader,
CardBody,
- Button,
Tooltip,
} from '@patternfly/react-core';
-import { TimesIcon } from '@patternfly/react-icons';
import { withNetwork } from '../../../contexts/Network';
-
+import CardCloseButton from '../../../components/CardCloseButton';
import OrganizationForm from '../components/OrganizationForm';
class OrganizationAdd extends React.Component {
@@ -70,13 +68,7 @@ class OrganizationAdd extends React.Component {
content={i18n._(t`Close`)}
position="top"
>
-
+