Refactor styles and remove patternfly utility classes

src/app.scss

@@ -1,3 +1,8 @@
+// https://github.com/patternfly/patternfly-react/issues/1294
+#app {
+  height: 100%;
+}
+
 //
 // masthead overrides
 //
@@ -44,7 +49,6 @@
     }
 
     .pf-c-nav__simple-list .pf-c-nav__link {
-      --pf-c-nav__simple-list-link--PaddingLeft: 24px;
       --pf-c-nav__simple-list-link--PaddingBottom: 6px;
       --pf-c-nav__simple-list-link--PaddingTop: 6px;
     }
@@ -70,16 +74,6 @@
   padding-bottom: 10px;
 }
 
-//
-// toolbar overrides
-//
-
-.pf-l-toolbar {
-  align-self: center;
-  height: 60px;
-}
-
-
 //
 // data list overrides
 //
@@ -99,7 +93,7 @@
 
 .pf-c-data-list__item {
   --pf-c-data-list__item--PaddingLeft: 20px;
-  --pf-c-data-list__item--PaddingRight: 0px;
+  --pf-c-data-list__item--PaddingRight: 20px;
 }
 
 .pf-c-data-list__check {
@@ -116,8 +110,24 @@
   margin-right: 20px;
 }
 
-.pf-c-data-list__cell a {
+.pf-c-data-list__cell {
-  margin-right: 8px;
+  --pf-c-data-list__cell--PaddingTop: 16px;
+  --pf-c-data-list__cell--PaddingBottom: 16px;
+  --pf-c-data-list__cell-cell--PaddingTop: 16px;
+
+  a {
+    margin-right: 8px;
+  }
+}
+
+//
+// switch overrides
+//
+// https://github.com/patternfly/patternfly-next/issues/915
+.pf-c-switch {
+  .pf-c-switch__label::before {
+    display: none;
+  }
 }
 
 //
@@ -143,19 +153,15 @@
   }
 }
 
-//
-// data list overrides
-//
-
-.pf-c-data-list__item {
-  --pf-c-data-list__item--PaddingLeft: 20px;
-  --pf-c-data-list__item--PaddingRight: 20px;
-}
-
 //
 // pf modal overrides
 //
 
+.pf-c-modal-box {
+  --pf-c-modal-box--Width: 550px;
+  --pf-c-modal-box--MaxWidth: 550px;
+}
+
 .pf-c-modal-box__footer {
   --pf-c-modal-box__footer--PaddingTop: 20px;
   --pf-c-modal-box__footer--PaddingRight: 20px;
@@ -189,6 +195,10 @@
   padding: 0;
 }
 
+.pf-c-card__body {
+  --pf-c-card__body--PaddingTop: 24px;
+}
+
 //
 // pf empty state overrides
 //
@@ -205,11 +215,10 @@
 
 .awx-lookup {
   min-height: 36px;
-}
 
-.awx-c-modal {
+  .pf-c-form-control {
-  width: 550px;
+    --pf-c-form-control--Height: auto;
-  margin: 0;
+  }
 }
 
 .awx-c-icon--remove {

src/components/DataListToolbar/styles.scss

@@ -5,6 +5,7 @@
 
   border-bottom: var(--awx-toolbar--BorderWidth) solid var(--awx-toolbar--BorderColor);
   background-color: var(--awx-toolbar--BackgroundColor);
+  display: flex;
   height: 70px;
   padding-top: 5px;
 
@@ -13,6 +14,10 @@
   --pf-global--FontSize--md: 14px;
 }
 
+.awx-toolbar .pf-l-level {
+  flex: 1;
+}
+
 .awx-toolbar .pf-c-button.pf-m-plain {
   --pf-c-button--m-plain--PaddingLeft: 0px;
   --pf-c-button--m-plain--PaddingRight: 0px;
@@ -43,6 +48,7 @@
   height: 30px;
 
   input {
+    height: 30px;
     padding: 0 10px;
     width: 300px;
   }
@@ -60,6 +66,10 @@
   padding: 0 10px;
   margin: 0px;
 
+  .pf-c-dropdown__toggle-text {
+    width: auto;
+  }
+
   .pf-c-dropdown__toggle-icon {
     margin: 0px;
     padding-top: 3px;

src/components/Lookup/Lookup.jsx

@@ -136,7 +136,6 @@ class Lookup extends React.Component {
             </Button>
             <div className="pf-c-form-control">{this.wrapTags(value)}</div>
             <Modal
-              className="awx-c-modal"
               title={`Select ${lookupHeader}`}
               isOpen={isModalOpen}
               onClose={this.handleModalToggle}

src/components/NotificationsList/NotificationListItem.jsx

@@ -28,27 +28,23 @@ class NotificationListItem extends React.Component {
     return (
       <I18n>
         {({ i18n }) => (
-          <li key={itemId} className="pf-c-data-list__item pf-u-flex-row pf-u-align-items-center">
+          <li key={itemId} className="pf-c-data-list__item">
-            <div className="pf-c-data-list__cell pf-u-flex-row">
+            <div className="pf-c-data-list__cell" style={{ display: 'flex' }}>
-              <div className="pf-u-display-inline-flex">
+              <Link
-                <Link
+                to={{
-                  to={{
+                  pathname: detailUrl
-                    pathname: detailUrl
+                }}
-                  }}
+              >
-                >
+                <b>{name}</b>
-                  <b>{name}</b>
+              </Link>
-                </Link>
-              </div>
               <Badge
                 style={capText}
-                className="pf-u-display-inline-flex"
                 isRead
               >
                 {notificationType}
               </Badge>
             </div>
-            <div className="pf-c-data-list__cell" />
+            <div className="pf-c-data-list__cell" style={{ display: 'flex', justifyContent: 'flex-end' }}>
-            <div className="pf-c-data-list__cell pf-u-display-flex pf-u-justify-content-flex-end">
               <Switch
                 label={i18n._(t`Successful`)}
                 isChecked={successTurnedOn}

src/components/PageHeaderToolbar.jsx

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Link } from 'react-router-dom';
 
 import { t } from '@lingui/macro';
 import { I18n } from '@lingui/react';
@@ -55,6 +54,10 @@ class PageHeaderToolbar extends Component {
     const { isHelpOpen, isUserOpen } = this.state;
     const { isAboutDisabled, onAboutClick, onLogoutClick } = this.props;
 
+    const dropdownIconColor = {
+      color: 'white'
+    };
+
     return (
       <I18n>
         {({ i18n }) => (
@@ -68,6 +71,7 @@ class PageHeaderToolbar extends Component {
                   toggle={(
                     <DropdownToggle
                       onToggle={this.onHelpToggle}
+                      style={dropdownIconColor}
                     >
                       <QuestionCircleIcon />
                     </DropdownToggle>
@@ -99,15 +103,17 @@ class PageHeaderToolbar extends Component {
                   toggle={(
                     <DropdownToggle
                       onToggle={this.onUserToggle}
+                      style={dropdownIconColor}
                     >
                       <UserIcon />
                     </DropdownToggle>
                   )}
                   dropdownItems={[
-                    <DropdownItem key="user">
+                    <DropdownItem
-                      <Link to="/home">
+                      key="user"
-                        {i18n._(t`User Details`)}
+                      href="#/home"
-                      </Link>
+                    >
+                      {i18n._(t`User Details`)}
                     </DropdownItem>,
                     <DropdownItem
                       key="logout"

src/components/SelectedList/SelectedList.jsx

@@ -12,6 +12,7 @@ const selectedRowStyling = {
 };
 
 const selectedLabelStyling = {
+  alignSelf: 'center',
   fontSize: '14px',
   fontWeight: 'bold'
 };
@@ -37,7 +38,7 @@ class SelectedList extends Component {
     return (
       <div className="awx-selectedList">
         <div className="pf-l-split" style={selectedRowStyling}>
-          <div className="pf-l-split__item pf-u-align-items-center" style={selectedLabelStyling}>
+          <div className="pf-l-split__item" style={selectedLabelStyling}>
             {label}
           </div>
           <div className="pf-l-split__item">

src/components/Tabs/Tabs.jsx

@@ -9,28 +9,26 @@ import './tabs.scss';
 const Tabs = ({ children, labelText, closeButton }) => (
   <div
     aria-label={labelText}
-    className="pf-c-tabs pf-u-flex-direction-row pf-u-justify-content-space-between"
+    className="pf-c-tabs"
   >
     <ul className="pf-c-tabs__list">
       {children}
     </ul>
     {closeButton
       && (
-        <div className="pf-u-align-self-center">
+        <Tooltip
-          <Tooltip
+          message={closeButton.text}
-            message={closeButton.text}
+          position="top"
-            position="top"
+        >
-          >
+          <Link to={closeButton.link}>
-            <Link to={closeButton.link}>
+            <Button
-              <Button
+              variant="plain"
-                variant="plain"
+              aria-label={closeButton.text}
-                aria-label={closeButton.text}
+            >
-              >
+              <TimesIcon />
-                <TimesIcon />
+            </Button>
-              </Button>
+          </Link>
-            </Link>
+        </Tooltip>
-          </Tooltip>
-        </div>
       )
     }
   </div>

src/components/Tabs/tabs.scss

@@ -10,7 +10,10 @@
   --pf-global--link--Color: #484848;
   --pf-global--link--Color--hover: #484848;
   --pf-global--link--TextDecoration--hover: none;
-  --pf-global--FontWeight--normal: 700;
+
+  align-items: center;
+  flex-direction: row;
+  justify-content: space-between;
 
   &:before {
     border-bottom: 1px solid var(--pf-c-tabs__item--BorderColor);
@@ -27,6 +30,7 @@
     --pf-c-tabs__button--PaddingLeft: 20px;
     --pf-c-tabs__button--PaddingRight: 20px;
     display: block;
+    font-weight: 700;
 
     &:after {
       content: '';

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

@@ -94,7 +94,7 @@ class OrganizationDetail extends Component {
     return (
       <I18n>
         {({ i18n }) => (
-          <CardBody className="pf-u-pt-lg">
+          <CardBody>
             <div className="pf-l-grid pf-m-gutter pf-m-all-12-col-on-md pf-m-all-6-col-on-lg pf-m-all-4-col-on-xl">
               <Detail
                 label={i18n._(t`Name`)}
@@ -135,7 +135,7 @@ class OrganizationDetail extends Component {
                 value={modified}
               />
             </div>
-            <div className="pf-u-display-flex pf-u-flex-direction-row-reverse pf-u-ml-auto pf-u-mt-md">
+            <div style={{ display: 'flex', flexDirection: 'row-reverse' }}>
               <Link to={`/organizations/${match.params.id}/edit`}>
                 <Button><Trans>Edit</Trans></Button>
               </Link>