Update placeholders, icons

Author: LanesGood

src/components/tables/search-input.js

@@ -53,7 +53,7 @@ const SearchInput = ({ onSearch, placeholder, 'data-cy': dataCy }) => {
           name='search'
           id='search'
           placeholder={placeholder}
-          style={{ width: '12rem' }}
+          style={{ width: '12.5rem' }}
         />
         <Button
           data-cy={`${dataCy}-search-submit`}

src/components/tables/table.js

@@ -14,13 +14,15 @@ function TableHead({ columns, sort, setSort, onClick }) {
             currentSortDirection === 'asc' ? 'desc' : 'asc'
           let sortIcon = ''
           if (currentSortDirection !== 'none') {
-            sortIcon = currentSortDirection === 'asc' ? '⬆' : '⬇'
+            sortIcon = currentSortDirection === 'asc' ? '▲' : '▼'
           }
 
           return (
             <th
               key={`table-head-column-${key}`}
               data-cy={`table-head-column-${key}`}
+              className={sortable && 'sortable'}
+              title={sortable && `Click to sort by ${key}`}
               onClick={() => {
                 onClick && onClick()
 
@@ -152,6 +154,9 @@ export default function Table({
             background: ${theme.colors.primaryLite};
             border-bottom: 4px solid ${theme.colors.primaryColor};
           }
+          thead th.sortable {
+            cursor: pointer;
+          }
 
           tbody tr td {
             padding: 0.875rem;

src/components/tables/users.js

@@ -57,6 +57,7 @@ function UsersTable({ type, orgId, onRowClick, isSearchable }) {
             setPage(1)
             setSearch(search)
           }}
+          placeholder='Search by username'
         />
       )}
       <Table

src/pages/teams/[id]/members-table.js

@@ -49,7 +49,7 @@ function MembersTable({ rows: allRows, onRowClick }) {
     <>
       <SearchInput
         data-cy='team-members-table'
-        placeholder='Type an username...'
+        placeholder='Search by username'
         onSearch={(search) => {
           // Reset to page 1 and search
           setPage(1)

src/pages/teams/index.js

@@ -100,7 +100,7 @@ export default class TeamList extends Component {
       <>
         <SearchInput
           data-cy='teams-table'
-          placeholder='Search by team name...'
+          placeholder='Search by team name'
           onSearch={(search) => {
             // Reset to page 1 and search
             this.setState({ page: 1, search })