Merge pull request #4777 from jlmitch5/styleCleanupUiNext

assorted style cleanup in UI next

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul

awx/ui_next/src/components/ContentError/ContentError.jsx

@@ -16,6 +16,7 @@ import ErrorDetail from '@components/ErrorDetail';
 
 const EmptyState = styled(PFEmptyState)`
   width: var(--pf-c-empty-state--m-lg--MaxWidth);
+  max-width: 100%;
 `;
 
 async function logout() {

awx/ui_next/src/components/ErrorDetail/ErrorDetail.jsx

@@ -22,6 +22,13 @@ const CardBody = styled(PFCardBody)`
 
 const Expandable = styled(PFExpandable)`
   text-align: left;
+
+  & .pf-c-expandable__toggle {
+    padding-left: 10px;
+    margin-left: 5px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+  }
 `;
 
 class ErrorDetail extends Component {

awx/ui_next/src/components/Lookup/InstanceGroupsLookup.jsx

@@ -1,13 +1,18 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { FormGroup, Tooltip } from '@patternfly/react-core';
-import { QuestionCircleIcon } from '@patternfly/react-icons';
+import { QuestionCircleIcon as PFQuestionCircleIcon } from '@patternfly/react-icons';
+import styled from 'styled-components';
 
 import { InstanceGroupsAPI } from '@api';
 import Lookup from '@components/Lookup';
 
+const QuestionCircleIcon = styled(PFQuestionCircleIcon)`
+  margin-left: 10px;
+`;
+
 const getInstanceGroups = async params => InstanceGroupsAPI.read(params);
 
 class InstanceGroupsLookup extends React.Component {
@@ -21,18 +26,14 @@ class InstanceGroupsLookup extends React.Component {
     return (
       <div className={className}>
         <FormGroup
-          label={
+          label={i18n._(t`Instance Groups`)}
-            <Fragment>
-              {i18n._(t`Instance Groups`)}{' '}
-              {tooltip && (
-                <Tooltip position="right" content={tooltip}>
-                  <QuestionCircleIcon />
-                </Tooltip>
-              )}
-            </Fragment>
-          }
           fieldId="org-instance-groups"
         >
+          {tooltip && (
+            <Tooltip position="right" content={tooltip}>
+              <QuestionCircleIcon />
+            </Tooltip>
+          )}
           <Lookup
             id="org-instance-groups"
             lookupHeader={i18n._(t`Instance Groups`)}

awx/ui_next/src/components/Lookup/InventoryLookup.jsx

@@ -1,14 +1,19 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { string, func, bool } from 'prop-types';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { FormGroup, Tooltip } from '@patternfly/react-core';
-import { QuestionCircleIcon } from '@patternfly/react-icons';
+import { QuestionCircleIcon as PFQuestionCircleIcon } from '@patternfly/react-icons';
+import styled from 'styled-components';
 
 import { InventoriesAPI } from '@api';
 import { Inventory } from '@types';
 import Lookup from '@components/Lookup';
 
+const QuestionCircleIcon = styled(PFQuestionCircleIcon)`
+  margin-left: 10px;
+`;
+
 const getInventories = async params => InventoriesAPI.read(params);
 
 class InventoryLookup extends React.Component {
@@ -17,19 +22,15 @@ class InventoryLookup extends React.Component {
 
     return (
       <FormGroup
-        label={
+        label={i18n._(t`Inventory`)}
-          <Fragment>
-            {i18n._(t`Inventory`)}{' '}
-            {tooltip && (
-              <Tooltip position="right" content={tooltip}>
-                <QuestionCircleIcon />
-              </Tooltip>
-            )}
-          </Fragment>
-        }
         isRequired={required}
         fieldId="inventory-lookup"
       >
+        {tooltip && (
+          <Tooltip position="right" content={tooltip}>
+            <QuestionCircleIcon />
+          </Tooltip>
+        )}
         <Lookup
           id="inventory-lookup"
           lookupHeader={i18n._(t`Inventory`)}

awx/ui_next/src/components/Lookup/Lookup.jsx

@@ -46,6 +46,8 @@ const InputGroup = styled(PFInputGroup)`
 const ChipHolder = styled.div`
   --pf-c-form-control--BorderTopColor: var(--pf-global--BorderColor--200);
   --pf-c-form-control--BorderRightColor: var(--pf-global--BorderColor--200);
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
 `;
 
 class Lookup extends React.Component {

awx/ui_next/src/components/Search/Search.jsx

@@ -44,6 +44,8 @@ const Dropdown = styled(PFDropdown)`
 
       ::before {
         border-color: var(--pf-global--BorderColor--200);
+        border-top-left-radius: 3px;
+        border-bottom-left-radius: 3px;
       }
 
       > span {
@@ -64,6 +66,8 @@ const Dropdown = styled(PFDropdown)`
 const NoOptionDropdown = styled.div`
   align-self: stretch;
   border: 1px solid var(--pf-global--BorderColor--200);
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
   padding: 3px 7px;
   white-space: nowrap;
 `;

awx/ui_next/src/screens/Organization/OrganizationNotifications/__snapshots__/OrganizationNotifications.test.jsx.snap

@@ -643,9 +643,9 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                                                   "componentStyle": ComponentStyle {
                                                                                     "componentId": "Search__NoOptionDropdown-sc-1dwuww3-3",
                                                                                     "isStatic": true,
-                                                                                    "lastClassName": "iMdtNX",
+                                                                                    "lastClassName": "cbKaoS",
                                                                                     "rules": Array [
-                                                                                      "align-self:stretch;border:1px solid var(--pf-global--BorderColor--200);padding:3px 7px;white-space:nowrap;",
+                                                                                      "align-self:stretch;border:1px solid var(--pf-global--BorderColor--200);border-top-left-radius:3px;border-bottom-left-radius:3px;padding:3px 7px;white-space:nowrap;",
                                                                                     ],
                                                                                   },
                                                                                   "displayName": "Search__NoOptionDropdown",
@@ -661,7 +661,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
                                                                               forwardedRef={null}
                                                                             >
                                                                               <div
-                                                                                className="Search__NoOptionDropdown-sc-1dwuww3-3 iMdtNX"
+                                                                                className="Search__NoOptionDropdown-sc-1dwuww3-3 cbKaoS"
                                                                               >
                                                                                 Name
                                                                               </div>