Merge pull request #59 from mabashian/45-list-ux

Small ux changes on the org list based on feedback

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,
@@ -23,6 +23,7 @@ import {
   SortNumericDownIcon,
   SortNumericUpIcon,
   TrashAltIcon,
+  PlusIcon
 } from '@patternfly/react-icons';
 import {
   Link
@@ -114,6 +115,22 @@ class DataListToolbar extends React.Component {
       return icon;
     };
 
+    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>
         {({ i18n }) => (
@@ -146,13 +163,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={searchDropdownItems}
+                        />
                         <TextInput
                           type="search"
                           aria-label={i18n._(t`Search text input`)}
@@ -183,15 +195,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={sortDropdownItems}
+                      />
                     </ToolbarItem>
                     <ToolbarItem>
                       <Button
@@ -228,7 +233,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,10 +74,9 @@
 .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;

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>