From 5d2912605f1c68e91f5241dc3ef7d2515bf25f97 Mon Sep 17 00:00:00 2001 From: Marliana Lara Date: Tue, 11 Feb 2020 11:53:22 -0500 Subject: [PATCH] Remove PF style overrides from card, breadcrumb, sidenav, tooltip, and modal components --- awx/ui_next/src/app.scss | 139 ------------------ .../src/components/AlertModal/AlertModal.jsx | 1 + .../components/Breadcrumbs/Breadcrumbs.jsx | 8 +- .../components/ContentEmpty/ContentEmpty.jsx | 2 +- .../components/ContentError/ContentError.jsx | 2 +- .../ContentLoading/ContentLoading.jsx | 2 +- awx/ui_next/src/components/Lookup/Lookup.jsx | 6 +- .../PaginatedDataListItem.jsx | 2 +- .../DeleteRoleConfirmationModal.test.jsx.snap | 12 +- .../src/components/Sparkline/StatusIcon.jsx | 2 +- .../src/screens/Credential/Credential.jsx | 4 +- awx/ui_next/src/screens/Host/Host.jsx | 4 +- .../src/screens/Inventory/Inventory.jsx | 4 +- .../src/screens/Inventory/SmartInventory.jsx | 4 +- .../Inventory/shared/InventoryGroupForm.jsx | 2 +- awx/ui_next/src/screens/Job/Job.jsx | 2 +- .../src/screens/Job/JobDetail/JobDetail.jsx | 7 +- .../screens/Job/JobOutput/HostEventModal.jsx | 7 +- .../src/screens/Job/JobTypeRedirect.jsx | 2 +- awx/ui_next/src/screens/NotFound.jsx | 2 +- .../src/screens/Organization/Organization.jsx | 4 +- awx/ui_next/src/screens/Project/Project.jsx | 4 +- awx/ui_next/src/screens/Team/Team.jsx | 4 +- awx/ui_next/src/screens/Template/Template.jsx | 4 +- .../screens/Template/WorkflowJobTemplate.jsx | 4 +- awx/ui_next/src/screens/User/User.jsx | 4 +- 26 files changed, 45 insertions(+), 193 deletions(-) diff --git a/awx/ui_next/src/app.scss b/awx/ui_next/src/app.scss index f0ba17e429..2c02873917 100644 --- a/awx/ui_next/src/app.scss +++ b/awx/ui_next/src/app.scss @@ -3,41 +3,6 @@ height: 100%; } -// -// sidebar overrides -// - -.pf-c-page__sidebar { - --pf-c-page__sidebar--md--Width: 255px; - - .pf-c-nav { - overflow-y: auto; - - .pf-c-nav__section { - --pf-c-nav__section--MarginTop: 8px; - } - - .pf-c-nav__section + .pf-c-nav__section { - --pf-c-nav__section--MarginTop: 8px; - } - - .pf-c-nav__simple-list .pf-c-nav__link { - --pf-c-nav__simple-list-link--PaddingBottom: 6px; - --pf-c-nav__simple-list-link--PaddingTop: 6px; - } - - .pf-c-nav__section-title { - --pf-c-nav__section-title--PaddingLeft: 24px; - } - - .pf-c-nav__link { - display: flex; - align-items: center; - padding-right: 64px; - } - } -} - // // data list overrides // @@ -87,102 +52,6 @@ } } -// -// pf modal overrides -// - -.awx-c-modal.pf-c-modal-box { - margin: 0; - padding: 24px; - width: 600px; - - .pf-c-modal-box__body { - overflow: auto; - } - - .pf-c-modal-box__footer > .pf-c-button:not(:last-child) { - margin-right: 20px; - } -} - -.pf-c-modal-box__footer { - --pf-c-modal-box__footer--PaddingTop: 20px; - --pf-c-modal-box__footer--PaddingRight: 20px; - --pf-c-modal-box__footer--PaddingBottom: 20px; - --pf-c-modal-box__footer--PaddingLeft: 20px; - --pf-c-modal-box__footer--MarginTop: 24px; - justify-content: flex-end; -} - -.pf-c-modal-box__header { - --pf-c-modal-box__header--PaddingTop: 10px; - --pf-c-modal-box__header--PaddingRight: 0; - --pf-c-modal-box__header--PaddingBottom: 0; - --pf-c-modal-box__header--PaddingLeft: 20px; -} - -.pf-c-modal-box__body { - --pf-c-modal-box__body--PaddingLeft: 20px; - --pf-c-modal-box__body--PaddingRight: 20px; - --pf-c-modal-box__body--PaddingBottom: 5px; -} - -// -// pf tooltip overrides -// - -.pf-c-tooltip__content { - --pf-c-tooltip__content--PaddingTop: 0.71rem; - --pf-c-tooltip__content--PaddingRight: 0.71rem; - --pf-c-tooltip__content--PaddingBottom: 0.71rem; - --pf-c-tooltip__content--PaddingLeft: 0.71rem; -} -// higher specificity needed to override PF styles added dynamically to page -.pf-c-tooltip .pf-c-tooltip__content { - text-align: left; -} - -// -// pf empty state overrides -// - -.pf-c-empty-state { - align-self: center; -} - -// -// assorted custom component styles -// note that these should be given a consistent prefix -// and bem style, as well as moved into component-based scss files -// - -.awx-c-card { - position: relative; -} - -// -// PF Alert notification component overrides -// - -.pf-c-alert__title { - --pf-c-alert__title--PaddingTop: 20px; - --pf-c-alert__title--PaddingRight: 20px; - --pf-c-alert__title--PaddingBottom: 20px; - --pf-c-alert__title--PaddingLeft: 20px; -} - -.pf-c-alert__description { - --pf-c-alert__description--PaddingRight: 20px; - --pf-c-alert__description--PaddingBottom: 20px; - --pf-c-alert__description--PaddingLeft: 20px; -} - -.pf-c-alert { - position: absolute; - width: 100%; - z-index: 20; -} - // // AlertModal styles // @@ -246,11 +115,3 @@ color: var(--pf-global--success-color--200); } } - -// -// LoginModal overrides -// - -.pf-m-error p.pf-c-form__helper-text { - color: var(--pf-global--danger-color--100); -} diff --git a/awx/ui_next/src/components/AlertModal/AlertModal.jsx b/awx/ui_next/src/components/AlertModal/AlertModal.jsx index 783f08f0a5..1b31f79653 100644 --- a/awx/ui_next/src/components/AlertModal/AlertModal.jsx +++ b/awx/ui_next/src/components/AlertModal/AlertModal.jsx @@ -30,6 +30,7 @@ export default ({ variant, children, ...props }) => { props.isOpen = Boolean(isOpen); return ( { const { light } = PageSectionVariants; diff --git a/awx/ui_next/src/components/ContentEmpty/ContentEmpty.jsx b/awx/ui_next/src/components/ContentEmpty/ContentEmpty.jsx index ebb0d94fd8..f01c8468ec 100644 --- a/awx/ui_next/src/components/ContentEmpty/ContentEmpty.jsx +++ b/awx/ui_next/src/components/ContentEmpty/ContentEmpty.jsx @@ -10,7 +10,7 @@ import { import { CubesIcon } from '@patternfly/react-icons'; const ContentEmpty = ({ i18n, title = '', message = '' }) => ( - + {title || i18n._(t`No items found.`)} {message} diff --git a/awx/ui_next/src/components/ContentError/ContentError.jsx b/awx/ui_next/src/components/ContentError/ContentError.jsx index 30fa451124..548cb77c89 100644 --- a/awx/ui_next/src/components/ContentError/ContentError.jsx +++ b/awx/ui_next/src/components/ContentError/ContentError.jsx @@ -39,7 +39,7 @@ function ContentError({ error, children, isNotFound, i18n }) { {is401 ? ( ) : ( - + {is404 ? i18n._(t`Not Found`) : i18n._(t`Something went wrong...`)} diff --git a/awx/ui_next/src/components/ContentLoading/ContentLoading.jsx b/awx/ui_next/src/components/ContentLoading/ContentLoading.jsx index 90747007da..c737c96d44 100644 --- a/awx/ui_next/src/components/ContentLoading/ContentLoading.jsx +++ b/awx/ui_next/src/components/ContentLoading/ContentLoading.jsx @@ -5,7 +5,7 @@ import { EmptyState, EmptyStateBody } from '@patternfly/react-core'; // TODO: Better loading state - skeleton lines / spinner, etc. const ContentLoading = ({ className, i18n }) => ( - <EmptyState className={className}> + <EmptyState variant="full" className={className}> <EmptyStateBody>{i18n._(t`Loading...`)}</EmptyStateBody> </EmptyState> ); diff --git a/awx/ui_next/src/components/Lookup/Lookup.jsx b/awx/ui_next/src/components/Lookup/Lookup.jsx index 500c4ce986..ed8bf363d8 100644 --- a/awx/ui_next/src/components/Lookup/Lookup.jsx +++ b/awx/ui_next/src/components/Lookup/Lookup.jsx @@ -139,7 +139,7 @@ function Lookup(props) { </ChipHolder> </InputGroup> <Modal - className="awx-c-modal" + isLarge title={i18n._(t`Select ${header || i18n._(t`Items`)}`)} isOpen={isModalOpen} onClose={closeModal} @@ -148,9 +148,7 @@ function Lookup(props) { key="select" variant="primary" onClick={save} - style={ - required && selectedItems.length === 0 ? { display: 'none' } : {} - } + isDisabled={required && selectedItems.length === 0} > {i18n._(t`Select`)} </Button>, diff --git a/awx/ui_next/src/components/PaginatedDataList/PaginatedDataListItem.jsx b/awx/ui_next/src/components/PaginatedDataList/PaginatedDataListItem.jsx index 5b4fa20257..43b3263618 100644 --- a/awx/ui_next/src/components/PaginatedDataList/PaginatedDataListItem.jsx +++ b/awx/ui_next/src/components/PaginatedDataList/PaginatedDataListItem.jsx @@ -27,7 +27,7 @@ export default function PaginatedDataListItem({ item }) { <DataListItemRow> <DataListItemCells dataListCells={[ - <DataListCell key="team-name"> + <DataListCell key="name"> <DetailWrapper> <Link to={{ pathname: item.url }}> <b id={`items-list-item-${item.id}`}>{item.name}</b> diff --git a/awx/ui_next/src/components/ResourceAccessList/__snapshots__/DeleteRoleConfirmationModal.test.jsx.snap b/awx/ui_next/src/components/ResourceAccessList/__snapshots__/DeleteRoleConfirmationModal.test.jsx.snap index 0cf60593da..50969673ec 100644 --- a/awx/ui_next/src/components/ResourceAccessList/__snapshots__/DeleteRoleConfirmationModal.test.jsx.snap +++ b/awx/ui_next/src/components/ResourceAccessList/__snapshots__/DeleteRoleConfirmationModal.test.jsx.snap @@ -73,7 +73,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = ` aria-describedby="pf-modal-0" aria-label="Remove {0} Access" aria-modal="true" - class="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger" + class="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger pf-m-lg" role="dialog" > <button @@ -154,7 +154,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = ` className="awx-c-modal at-c-alertModal at-c-alertModal--danger" hideTitle={false} isFooterLeftAligned={false} - isLarge={false} + isLarge={true} isOpen={true} isSmall={false} onClose={[Function]} @@ -174,7 +174,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = ` aria-describedby="pf-modal-0" aria-label="Remove {0} Access" aria-modal="true" - class="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger" + class="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger pf-m-lg" role="dialog" > <button @@ -274,7 +274,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = ` hideTitle={false} id="pf-modal-0" isFooterLeftAligned={false} - isLarge={false} + isLarge={true} isOpen={true} isSmall={false} onClose={[Function]} @@ -303,7 +303,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = ` <ModalBox className="awx-c-modal at-c-alertModal at-c-alertModal--danger" id="pf-modal-0" - isLarge={false} + isLarge={true} isSmall={false} style={Object {}} title="Remove {0} Access" @@ -312,7 +312,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = ` aria-describedby="pf-modal-0" aria-label="Remove {0} Access" aria-modal="true" - className="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger" + className="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger pf-m-lg" role="dialog" style={Object {}} > diff --git a/awx/ui_next/src/components/Sparkline/StatusIcon.jsx b/awx/ui_next/src/components/Sparkline/StatusIcon.jsx index 2c9b7ae16b..d89d5592d4 100644 --- a/awx/ui_next/src/components/Sparkline/StatusIcon.jsx +++ b/awx/ui_next/src/components/Sparkline/StatusIcon.jsx @@ -75,7 +75,7 @@ const SkippedBottom = styled.div` const StatusIcon = ({ status, ...props }) => { return ( - <div className="at-c-statusIcon" {...props}> + <div {...props}> {status === 'running' && <RunningJob />} {(status === 'new' || status === 'pending' || diff --git a/awx/ui_next/src/screens/Credential/Credential.jsx b/awx/ui_next/src/screens/Credential/Credential.jsx index 1c9266f852..705c305e61 100644 --- a/awx/ui_next/src/screens/Credential/Credential.jsx +++ b/awx/ui_next/src/screens/Credential/Credential.jsx @@ -63,7 +63,7 @@ function Credential({ i18n, setBreadcrumb }) { if (!hasContentLoading && contentError) { return ( <PageSection> - <Card className="awx-c-card"> + <Card> <ContentError error={contentError}> {contentError.response && contentError.response.status === 404 && ( <span> @@ -79,7 +79,7 @@ function Credential({ i18n, setBreadcrumb }) { return ( <PageSection> - <Card className="awx-c-card"> + <Card> {cardHeader} <Switch> <Redirect diff --git a/awx/ui_next/src/screens/Host/Host.jsx b/awx/ui_next/src/screens/Host/Host.jsx index 22439da660..0b26a0ad61 100644 --- a/awx/ui_next/src/screens/Host/Host.jsx +++ b/awx/ui_next/src/screens/Host/Host.jsx @@ -117,7 +117,7 @@ function Host({ inventory, i18n, setBreadcrumb }) { if (!hasContentLoading && contentError) { return ( - <Card className="awx-c-card"> + <Card> <ContentError error={contentError}> {contentError.response && contentError.response.status === 404 && ( <span> @@ -141,7 +141,7 @@ function Host({ inventory, i18n, setBreadcrumb }) { ); return ( - <Card className="awx-c-card"> + <Card> {cardHeader} <Switch> {redirect} diff --git a/awx/ui_next/src/screens/Inventory/Inventory.jsx b/awx/ui_next/src/screens/Inventory/Inventory.jsx index 6e8f55c60b..3eb114a466 100644 --- a/awx/ui_next/src/screens/Inventory/Inventory.jsx +++ b/awx/ui_next/src/screens/Inventory/Inventory.jsx @@ -92,7 +92,7 @@ function Inventory({ i18n, setBreadcrumb }) { if (!hasContentLoading && contentError) { return ( <PageSection> - <Card className="awx-c-card"> + <Card> <ContentError error={contentError}> {contentError.response.status === 404 && ( <span> @@ -108,7 +108,7 @@ function Inventory({ i18n, setBreadcrumb }) { return ( <PageSection> - <Card className="awx-c-card"> + <Card> {cardHeader} <Switch> <Redirect diff --git a/awx/ui_next/src/screens/Inventory/SmartInventory.jsx b/awx/ui_next/src/screens/Inventory/SmartInventory.jsx index 440667d1f0..39560ad4a3 100644 --- a/awx/ui_next/src/screens/Inventory/SmartInventory.jsx +++ b/awx/ui_next/src/screens/Inventory/SmartInventory.jsx @@ -88,7 +88,7 @@ class SmartInventory extends Component { if (!hasContentLoading && contentError) { return ( <PageSection> - <Card className="awx-c-card"> + <Card> <ContentError error={contentError}> {contentError.response.status === 404 && ( <span> @@ -105,7 +105,7 @@ class SmartInventory extends Component { } return ( <PageSection> - <Card className="awx-c-card"> + <Card> {cardHeader} <Switch> <Redirect diff --git a/awx/ui_next/src/screens/Inventory/shared/InventoryGroupForm.jsx b/awx/ui_next/src/screens/Inventory/shared/InventoryGroupForm.jsx index e1ae21f64d..ccec0375ac 100644 --- a/awx/ui_next/src/screens/Inventory/shared/InventoryGroupForm.jsx +++ b/awx/ui_next/src/screens/Inventory/shared/InventoryGroupForm.jsx @@ -26,7 +26,7 @@ function InventoryGroupForm({ }; return ( - <Card className="awx-c-card"> + <Card> <CardBody> <Formik initialValues={initialValues} onSubmit={handleSubmit}> {formik => ( diff --git a/awx/ui_next/src/screens/Job/Job.jsx b/awx/ui_next/src/screens/Job/Job.jsx index b3fe268ce8..7975260e8e 100644 --- a/awx/ui_next/src/screens/Job/Job.jsx +++ b/awx/ui_next/src/screens/Job/Job.jsx @@ -83,7 +83,7 @@ class Job extends Component { if (!hasContentLoading && contentError) { return ( <PageSection> - <Card className="awx-c-card"> + <Card> <ContentError error={contentError}> {contentError.response.status === 404 && ( <span> diff --git a/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx b/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx index 8e906e7319..a23c6a268b 100644 --- a/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx +++ b/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx @@ -34,10 +34,9 @@ const VariablesInput = styled(_VariablesInput)` const StatusDetailValue = styled.div` align-items: center; - display: inline-flex; - .at-c-statusIcon { - margin-right: 10px; - } + display: inline-grid; + grid-gap: 10px; + grid-template-columns: auto auto; `; const VERBOSITY = { diff --git a/awx/ui_next/src/screens/Job/JobOutput/HostEventModal.jsx b/awx/ui_next/src/screens/Job/JobOutput/HostEventModal.jsx index f563b1ef0c..989270325d 100644 --- a/awx/ui_next/src/screens/Job/JobOutput/HostEventModal.jsx +++ b/awx/ui_next/src/screens/Job/JobOutput/HostEventModal.jsx @@ -26,10 +26,9 @@ const Modal = styled(PFModal)` const HostNameDetailValue = styled.div` align-items: center; - display: inline-flex; - .at-c-statusIcon { - margin-right: 10px; - } + display: inline-grid; + grid-gap: 10px; + grid-template-columns: auto auto; `; const Tabs = styled(PFTabs)` diff --git a/awx/ui_next/src/screens/Job/JobTypeRedirect.jsx b/awx/ui_next/src/screens/Job/JobTypeRedirect.jsx index 9f1cc15e55..1dc45adbe8 100644 --- a/awx/ui_next/src/screens/Job/JobTypeRedirect.jsx +++ b/awx/ui_next/src/screens/Job/JobTypeRedirect.jsx @@ -54,7 +54,7 @@ class JobTypeRedirect extends Component { if (error) { return ( <PageSection> - <Card className="awx-c-card"> + <Card> {error === NOT_FOUND ? ( <ContentError isNotFound> <Link to="/jobs">{i18n._(`View all Jobs`)}</Link> diff --git a/awx/ui_next/src/screens/NotFound.jsx b/awx/ui_next/src/screens/NotFound.jsx index f09a8fdba9..16be2e5b7e 100644 --- a/awx/ui_next/src/screens/NotFound.jsx +++ b/awx/ui_next/src/screens/NotFound.jsx @@ -5,7 +5,7 @@ import ContentError from '@components/ContentError'; function NotFound() { return ( <PageSection> - <Card className="awx-c-card"> + <Card> <ContentError isNotFound /> </Card> </PageSection> diff --git a/awx/ui_next/src/screens/Organization/Organization.jsx b/awx/ui_next/src/screens/Organization/Organization.jsx index 8acb673b5b..c469bf0c0a 100644 --- a/awx/ui_next/src/screens/Organization/Organization.jsx +++ b/awx/ui_next/src/screens/Organization/Organization.jsx @@ -147,7 +147,7 @@ class Organization extends Component { if (!hasContentLoading && contentError) { return ( <PageSection> - <Card className="awx-c-card"> + <Card> <ContentError error={contentError}> {contentError.response.status === 404 && ( <span> @@ -165,7 +165,7 @@ class Organization extends Component { return ( <PageSection> - <Card className="awx-c-card"> + <Card> {cardHeader} <Switch> <Redirect diff --git a/awx/ui_next/src/screens/Project/Project.jsx b/awx/ui_next/src/screens/Project/Project.jsx index 29ebb17940..a6a2cf16b0 100644 --- a/awx/ui_next/src/screens/Project/Project.jsx +++ b/awx/ui_next/src/screens/Project/Project.jsx @@ -167,7 +167,7 @@ class Project extends Component { if (!hasContentLoading && contentError) { return ( <PageSection> - <Card className="awx-c-card"> + <Card> <ContentError error={contentError}> {contentError.response.status === 404 && ( <span> @@ -183,7 +183,7 @@ class Project extends Component { return ( <PageSection> - <Card className="awx-c-card"> + <Card> {cardHeader} <Switch> <Redirect from="/projects/:id" to="/projects/:id/details" exact /> diff --git a/awx/ui_next/src/screens/Team/Team.jsx b/awx/ui_next/src/screens/Team/Team.jsx index 7440bad624..d471a45da3 100644 --- a/awx/ui_next/src/screens/Team/Team.jsx +++ b/awx/ui_next/src/screens/Team/Team.jsx @@ -59,7 +59,7 @@ function Team({ i18n, setBreadcrumb }) { if (!hasContentLoading && contentError) { return ( <PageSection> - <Card className="awx-c-card"> + <Card> <ContentError error={contentError}> {contentError.response.status === 404 && ( <span> @@ -75,7 +75,7 @@ function Team({ i18n, setBreadcrumb }) { return ( <PageSection> - <Card className="awx-c-card"> + <Card> {cardHeader} <Switch> <Redirect from="/teams/:id" to="/teams/:id/details" exact /> diff --git a/awx/ui_next/src/screens/Template/Template.jsx b/awx/ui_next/src/screens/Template/Template.jsx index 8e22494524..660e7beed8 100644 --- a/awx/ui_next/src/screens/Template/Template.jsx +++ b/awx/ui_next/src/screens/Template/Template.jsx @@ -135,7 +135,7 @@ class Template extends Component { if (!hasContentLoading && contentError) { return ( <PageSection> - <Card className="awx-c-card"> + <Card> <ContentError error={contentError}> {contentError.response.status === 404 && ( <span> @@ -150,7 +150,7 @@ class Template extends Component { } return ( - <Card className="awx-c-card"> + <Card> {cardHeader} <Switch> <Redirect diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx index 96dd9683fb..7e0ba0cc0c 100644 --- a/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx +++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx @@ -79,7 +79,7 @@ class WorkflowJobTemplate extends Component { if (!hasContentLoading && contentError) { return ( <PageSection> - <Card className="awx-c-card"> + <Card> <ContentError error={contentError}> {contentError.response.status === 404 && ( <span> @@ -94,7 +94,7 @@ class WorkflowJobTemplate extends Component { } return ( - <Card className="awx-c-card"> + <Card> {cardHeader} <Switch> <Redirect diff --git a/awx/ui_next/src/screens/User/User.jsx b/awx/ui_next/src/screens/User/User.jsx index 416eafecb6..2e711bd7f2 100644 --- a/awx/ui_next/src/screens/User/User.jsx +++ b/awx/ui_next/src/screens/User/User.jsx @@ -96,7 +96,7 @@ class User extends Component { if (!hasContentLoading && contentError) { return ( <PageSection> - <Card className="awx-c-card"> + <Card> <ContentError error={contentError}> {contentError.response.status === 404 && ( <span> @@ -112,7 +112,7 @@ class User extends Component { return ( <PageSection> - <Card className="awx-c-card"> + <Card> {cardHeader} <Switch> <Redirect from="/users/:id" to="/users/:id/details" exact />