From 71ace1bc0003dd3de995243becdc733bd2e4d274 Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Wed, 12 Dec 2018 10:40:51 -0500
Subject: [PATCH 1/4] Small ux changes on the org list based on feedback

---
 .../DataListToolbar/DataListToolbar.jsx       | 29 ++++++++-----------
 src/components/DataListToolbar/styles.scss    | 17 +++++++----
 .../components/OrganizationListItem.jsx       |  2 +-
 3 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/src/components/DataListToolbar/DataListToolbar.jsx b/src/components/DataListToolbar/DataListToolbar.jsx
index c48d855dd7..80b238be6e 100644
--- a/src/components/DataListToolbar/DataListToolbar.jsx
+++ b/src/components/DataListToolbar/DataListToolbar.jsx
@@ -23,6 +23,7 @@ import {
   SortNumericDownIcon,
   SortNumericUpIcon,
   TrashAltIcon,
+  PlusIcon
 } from '@patternfly/react-icons';
 import {
   Link
@@ -114,6 +115,12 @@ class DataListToolbar extends React.Component {
       return icon;
     };
 
+    const dropdownItems = columns.filter(({ key }) => key !== searchKey).map(({ key, name }) => (
+      <DropdownItem key={key} component="button">
+        { name }
+      </DropdownItem>
+    ));
+
     return (
       <I18n>
         {({ i18n }) => (
@@ -146,13 +153,8 @@ class DataListToolbar extends React.Component {
                               { searchColumnName }
                             </DropdownToggle>
                           )}
-                        >
-                          {columns.filter(({ key }) => key !== searchKey).map(({ key, name }) => (
-                            <DropdownItem key={key} component="button">
-                              { name }
-                            </DropdownItem>
-                          ))}
-                        </Dropdown>
+                          dropdownItems={dropdownItems}
+                        />
                         <TextInput
                           type="search"
                           aria-label={i18n._(t`Search text input`)}
@@ -183,15 +185,8 @@ class DataListToolbar extends React.Component {
                             { sortedColumnName }
                           </DropdownToggle>
                         )}
-                      >
-                        {columns
-                          .filter(({ key, isSortable }) => isSortable && key !== sortedColumnKey)
-                          .map(({ key, name }) => (
-                            <DropdownItem key={key} component="button">
-                              { name }
-                            </DropdownItem>
-                          ))}
-                      </Dropdown>
+                        dropdownItems={dropdownItems}
+                      />
                     </ToolbarItem>
                     <ToolbarItem>
                       <Button
@@ -228,7 +223,7 @@ class DataListToolbar extends React.Component {
                 {addUrl && (
                   <Link to={addUrl}>
                     <Button variant="primary" aria-label={i18n._(t`Add`)}>
-                      <Trans>Add</Trans>
+                      <PlusIcon />
                     </Button>
                   </Link>
                 )}
diff --git a/src/components/DataListToolbar/styles.scss b/src/components/DataListToolbar/styles.scss
index 66fd6f0902..1258225f31 100644
--- a/src/components/DataListToolbar/styles.scss
+++ b/src/components/DataListToolbar/styles.scss
@@ -33,7 +33,7 @@
   margin-right: 20px;
 }
 
-.awx-toolbar button {
+.awx-toolbar button.pf-c-button {
   height: 30px;
   padding: 0px;
 }
@@ -43,7 +43,7 @@
   height: 30px;
 
   input {
-    padding: 0px;
+    padding: 0 10px;
     width: 300px;
   }
 
@@ -57,7 +57,7 @@
   min-height: 30px;
   min-width: 70px;
   height: 30px;
-  padding: 0px;
+  padding: 0 10px;
   margin: 0px;
 
   .pf-c-dropdown__toggle-icon {
@@ -74,16 +74,23 @@
 .awx-toolbar .pf-c-button.pf-m-primary {
   background-color: #5cb85c;
   min-width: 0px;
-  width: 58px;
+  width: 30px;
   height: 30px;
   text-align: center;
-
   padding: 0px;
   margin: 0px;
   margin-right: 20px;
   margin-left: 20px;
+  border-radius: 50%;
 }
 
 .awx-toolbar .pf-l-toolbar__item .pf-c-button.pf-m-plain {
   font-size: 18px;
 }
+
+.awx-toolbar .pf-l-toolbar__item .pf-c-button.pf-m-plain :nth-of-type(2) {
+// .awx-toolbar .pf-l-toolbar__item:nth-of-type(2) {
+//   .pf-c-button.pf-m-plain {
+  font-size: 22px;
+//   }
+}
diff --git a/src/pages/Organizations/components/OrganizationListItem.jsx b/src/pages/Organizations/components/OrganizationListItem.jsx
index da2a2ef2cd..d28f158126 100644
--- a/src/pages/Organizations/components/OrganizationListItem.jsx
+++ b/src/pages/Organizations/components/OrganizationListItem.jsx
@@ -41,7 +41,7 @@ export default ({
             state: { breadcrumb: [parentBreadcrumb, { name, url: detailUrl }] }
           }}
         >
-          {name}
+          <b>{name}</b>
         </Link>
       </span>
     </div>

From d43f0cb2fc63f25134b9fef15d3df0f39511ba25 Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Wed, 12 Dec 2018 10:53:23 -0500
Subject: [PATCH 2/4] Removed extraneous style

---
 src/components/DataListToolbar/styles.scss | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/components/DataListToolbar/styles.scss b/src/components/DataListToolbar/styles.scss
index 1258225f31..178622387e 100644
--- a/src/components/DataListToolbar/styles.scss
+++ b/src/components/DataListToolbar/styles.scss
@@ -87,10 +87,3 @@
 .awx-toolbar .pf-l-toolbar__item .pf-c-button.pf-m-plain {
   font-size: 18px;
 }
-
-.awx-toolbar .pf-l-toolbar__item .pf-c-button.pf-m-plain :nth-of-type(2) {
-// .awx-toolbar .pf-l-toolbar__item:nth-of-type(2) {
-//   .pf-c-button.pf-m-plain {
-  font-size: 22px;
-//   }
-}

From 21cf1d85e3dd245ab4202b93672d4f4dfe49c3e5 Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Thu, 13 Dec 2018 10:56:11 -0500
Subject: [PATCH 3/4] Remove border-radius on add button

---
 src/components/DataListToolbar/styles.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/DataListToolbar/styles.scss b/src/components/DataListToolbar/styles.scss
index 178622387e..722e2f6a67 100644
--- a/src/components/DataListToolbar/styles.scss
+++ b/src/components/DataListToolbar/styles.scss
@@ -81,7 +81,6 @@
   margin: 0px;
   margin-right: 20px;
   margin-left: 20px;
-  border-radius: 50%;
 }
 
 .awx-toolbar .pf-l-toolbar__item .pf-c-button.pf-m-plain {

From 6ce88fdf4db4541979752c722795518c7b45fd0b Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Mon, 17 Dec 2018 13:16:08 -0500
Subject: [PATCH 4/4] Separates search dropdown items from sort dropdown items

---
 .../DataListToolbar/DataListToolbar.jsx       | 26 +++++++++++++------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/components/DataListToolbar/DataListToolbar.jsx b/src/components/DataListToolbar/DataListToolbar.jsx
index 80b238be6e..e1d2ea6842 100644
--- a/src/components/DataListToolbar/DataListToolbar.jsx
+++ b/src/components/DataListToolbar/DataListToolbar.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { I18n } from '@lingui/react';
-import { Trans, t } from '@lingui/macro';
+import { t } from '@lingui/macro';
 import {
   Button,
   Checkbox,
@@ -115,11 +115,21 @@ class DataListToolbar extends React.Component {
       return icon;
     };
 
-    const dropdownItems = columns.filter(({ key }) => key !== searchKey).map(({ key, name }) => (
-      <DropdownItem key={key} component="button">
-        { name }
-      </DropdownItem>
-    ));
+    const searchDropdownItems = columns
+      .filter(({ key }) => key !== searchKey)
+      .map(({ key, name }) => (
+        <DropdownItem key={key} component="button">
+          { name }
+        </DropdownItem>
+      ));
+
+    const sortDropdownItems = columns
+      .filter(({ key, isSortable }) => isSortable && key !== sortedColumnKey)
+      .map(({ key, name }) => (
+        <DropdownItem key={key} component="button">
+          { name }
+        </DropdownItem>
+      ));
 
     return (
       <I18n>
@@ -153,7 +163,7 @@ class DataListToolbar extends React.Component {
                               { searchColumnName }
                             </DropdownToggle>
                           )}
-                          dropdownItems={dropdownItems}
+                          dropdownItems={searchDropdownItems}
                         />
                         <TextInput
                           type="search"
@@ -185,7 +195,7 @@ class DataListToolbar extends React.Component {
                             { sortedColumnName }
                           </DropdownToggle>
                         )}
-                        dropdownItems={dropdownItems}
+                        dropdownItems={sortDropdownItems}
                       />
                     </ToolbarItem>
                     <ToolbarItem>