Small ux changes on the org list based on feedback

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>
                           )}
-                        >
+                          dropdownItems={dropdownItems}
-                          {columns.filter(({ key }) => key !== searchKey).map(({ key, name }) => (
+                        />
-                            <DropdownItem key={key} component="button">
-                              { name }
-                            </DropdownItem>
-                          ))}
-                        </Dropdown>
                         <TextInput
                           type="search"
                           aria-label={i18n._(t`Search text input`)}
@@ -183,15 +185,8 @@ class DataListToolbar extends React.Component {
                             { sortedColumnName }
                           </DropdownToggle>
                         )}
-                      >
+                        dropdownItems={dropdownItems}
-                        {columns
+                      />
-                          .filter(({ key, isSortable }) => isSortable && key !== sortedColumnKey)
-                          .map(({ key, name }) => (
-                            <DropdownItem key={key} component="button">
-                              { name }
-                            </DropdownItem>
-                          ))}
-                      </Dropdown>
                     </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>
                 )}

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;
+//   }
+}

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>