From e68349b6b5c3b7b24ae15ab0ec7904f821b7d474 Mon Sep 17 00:00:00 2001
From: John Mitchell <jmitchel@Johns-MacBook-Pro.local>
Date: Wed, 18 Sep 2019 13:57:06 -0400
Subject: [PATCH] assorted style cleanup in UI next - round all corners of
 combo fields - make sure required asterisk is always before help popover ? -
 bug: fix ? popover from opening lookups - fix spacing of detail toggle for
 http error

---
 .../components/ContentError/ContentError.jsx  |  1 +
 .../components/ErrorDetail/ErrorDetail.jsx    |  7 ++++++
 .../Lookup/InstanceGroupsLookup.jsx           | 25 ++++++++++---------
 .../src/components/Lookup/InventoryLookup.jsx | 25 ++++++++++---------
 awx/ui_next/src/components/Lookup/Lookup.jsx  |  2 ++
 awx/ui_next/src/components/Search/Search.jsx  |  4 +++
 6 files changed, 40 insertions(+), 24 deletions(-)

diff --git a/awx/ui_next/src/components/ContentError/ContentError.jsx b/awx/ui_next/src/components/ContentError/ContentError.jsx
index a94adc4ac9..53610b52d4 100644
--- a/awx/ui_next/src/components/ContentError/ContentError.jsx
+++ b/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() {
diff --git a/awx/ui_next/src/components/ErrorDetail/ErrorDetail.jsx b/awx/ui_next/src/components/ErrorDetail/ErrorDetail.jsx
index ed3d468315..25d2c9d035 100644
--- a/awx/ui_next/src/components/ErrorDetail/ErrorDetail.jsx
+++ b/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 {
diff --git a/awx/ui_next/src/components/Lookup/InstanceGroupsLookup.jsx b/awx/ui_next/src/components/Lookup/InstanceGroupsLookup.jsx
index f44c9e5144..966cb62b95 100644
--- a/awx/ui_next/src/components/Lookup/InstanceGroupsLookup.jsx
+++ b/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={
-            <Fragment>
-              {i18n._(t`Instance Groups`)}{' '}
-              {tooltip && (
-                <Tooltip position="right" content={tooltip}>
-                  <QuestionCircleIcon />
-                </Tooltip>
-              )}
-            </Fragment>
-          }
+          label={i18n._(t`Instance Groups`)}
           fieldId="org-instance-groups"
         >
+          {tooltip && (
+            <Tooltip position="right" content={tooltip}>
+              <QuestionCircleIcon />
+            </Tooltip>
+          )}
           <Lookup
             id="org-instance-groups"
             lookupHeader={i18n._(t`Instance Groups`)}
diff --git a/awx/ui_next/src/components/Lookup/InventoryLookup.jsx b/awx/ui_next/src/components/Lookup/InventoryLookup.jsx
index b7179032a3..35125b6ff6 100644
--- a/awx/ui_next/src/components/Lookup/InventoryLookup.jsx
+++ b/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={
-          <Fragment>
-            {i18n._(t`Inventory`)}{' '}
-            {tooltip && (
-              <Tooltip position="right" content={tooltip}>
-                <QuestionCircleIcon />
-              </Tooltip>
-            )}
-          </Fragment>
-        }
+        label={i18n._(t`Inventory`)}
         isRequired={required}
         fieldId="inventory-lookup"
       >
+        {tooltip && (
+          <Tooltip position="right" content={tooltip}>
+            <QuestionCircleIcon />
+          </Tooltip>
+        )}
         <Lookup
           id="inventory-lookup"
           lookupHeader={i18n._(t`Inventory`)}
diff --git a/awx/ui_next/src/components/Lookup/Lookup.jsx b/awx/ui_next/src/components/Lookup/Lookup.jsx
index f168953bb5..d70284b3fa 100644
--- a/awx/ui_next/src/components/Lookup/Lookup.jsx
+++ b/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 {
diff --git a/awx/ui_next/src/components/Search/Search.jsx b/awx/ui_next/src/components/Search/Search.jsx
index 2db6cf05ba..8cf0add5d8 100644
--- a/awx/ui_next/src/components/Search/Search.jsx
+++ b/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;
 `;