More styling

client/coral-admin/src/routes/Community/components/People.js

@@ -17,6 +17,7 @@ const People = (props) => {
     totalPages,
     setRole,
     setCommenterStatus,
+    viewUserDetail,
   } = props;
 
   const hasResults = !!users.length;
@@ -42,12 +43,13 @@ const People = (props) => {
             ? <Table
               users={users}
               setRole={setRole}
+              viewUserDetail={viewUserDetail}
               setCommenterStatus={setCommenterStatus}
               onHeaderClickHandler={onHeaderClickHandler}
             />
             : <EmptyCard>{t('community.no_results')}</EmptyCard>
         }
-
+        
         <Paginate
           pageCount={totalPages}
           onPageChange={onNewPageHandler}
@@ -66,6 +68,7 @@ People.propTypes = {
   onNewPageHandler: PropTypes.func,
   setCommenterStatus: PropTypes.func.isRequired,
   setRole: PropTypes.func.isRequired,
+  viewUserDetail: PropTypes.func.isRequired,
 };
 
 export default People;

client/coral-admin/src/routes/Community/components/Table.css

@@ -2,14 +2,18 @@
   width: 100%;
   border-left: none;
   border-right: none;
+}
 
-  th {
-    font-size: 1.1em;
-  }
+th.header {
+  font-size: 1.1em;
+}
 
-  th:nth-child(2), th:nth-child(3) {
-    width: 100px;
-  }
+th.header:hover {
+  cursor: pointer;
+}
+
+th.header:nth-child(2), th.header:nth-child(3) {
+  width: 100px;
 }
 
 .button {

client/coral-admin/src/routes/Community/components/Table.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from '../components/Table.css';
+import styles from './Table.css';
 import t from 'coral-framework/services/i18n';
 import PropTypes from 'prop-types';
 import {Dropdown, Option} from 'coral-ui';
@@ -24,14 +24,14 @@ const headers = [
   }
 ];
 
-const Table = ({users, onHeaderClickHandler, setRole, setCommenterStatus, viewUserDetail}) => (
+const Table = ({users, setRole, onHeaderClickHandler, setCommenterStatus, viewUserDetail}) => (
   <table className={`mdl-data-table ${styles.dataTable}`}>
     <thead>
       <tr>
         {headers.map((header, i) =>(
           <th
             key={i}
-            className="mdl-data-table__cell--non-numeric"
+            className={cn('mdl-data-table__cell--non-numeric', styles.header)}
             scope="col"
             onClick={() => onHeaderClickHandler({field: header.field})}>
             {header.title}
@@ -80,7 +80,7 @@ Table.propTypes = {
   onHeaderClickHandler: PropTypes.func.isRequired,
   setRole: PropTypes.func.isRequired,
   setCommenterStatus: PropTypes.func.isRequired,
-  viewUserDetail: PropTypes.func,
+  viewUserDetail: PropTypes.func.isRequired,
 };
 
 export default Table;

client/coral-admin/src/routes/Community/containers/People.js

@@ -77,6 +77,7 @@ class PeopleContainer extends React.Component {
       totalPages={this.props.community.totalPagesPeople}
       setCommenterStatus={this.props.setCommenterStatus}
       setRole={this.props.setRole}
+      viewUserDetail={this.props.viewUserDetail}
     />;
   }
 }
@@ -87,6 +88,7 @@ PeopleContainer.propTypes = {
   updateSorting: PropTypes.func,
   setRole: PropTypes.func.isRequired,
   setCommenterStatus: PropTypes.func.isRequired,
+  viewUserDetail: PropTypes.func.isRequired,
   community: PropTypes.object,
 };
 

client/coral-ui/components/Paginate.css

@@ -2,7 +2,7 @@
   text-align: center;
 }
 
-.page, .previous, .next {
+.page, .previous, .next, .break {
   display: inline-block;
   margin-right: 5px;
   height: 30px;

client/coral-ui/components/Paginate.js

@@ -11,7 +11,6 @@ const Paginate = ({pageCount, onPageChange}) => (
     pageRangeDisplayed={5}
     marginPagesDisplayed={2}
     onPageChange={onPageChange}
-    breakLabel={<a href="">...</a>}
     breakClassName={styles.break}
     containerClassName={styles.container}
     pageClassName={styles.page}