refactor: update users manager to use shared table style

app/components/component-users-manager/src/User.jsx

@@ -3,7 +3,10 @@ import gql from 'graphql-tag'
 import { useMutation } from '@apollo/react-hooks'
 import { Action } from '@pubsweet/ui'
 import { UserAvatar } from '../../component-avatar/src'
-import { Row, Cell, LastCell, UserCombo, Primary, Secondary, UserInfo } from './style'
+import { Row, Cell, LastCell } from './style'
+
+import { UserCombo, Primary, Secondary, UserInfo } from '../../shared'
+
 import { convertTimestampToDate } from '../../../shared/time-formatting'
 
 const DELETE_USER = gql`

app/components/component-users-manager/src/UsersManager.jsx

 import React, { useState } from 'react'
 import gql from 'graphql-tag'
 import { useQuery } from '@apollo/react-hooks'
-import { Heading } from '@pubsweet/ui'
+// import { Heading } from '@pubsweet/ui'
 
 import User from './User'
-import { Container, Table, Header, Caret, Carets } from './style'
-import Spinner from '../../shared/Spinner'
-import Pagination from '../../shared/Pagination'
+import {
+  Container,
+  Table,
+  Header,
+  PageHeading,
+  Content,
+  Spinner,
+  Pagination,
+  CaretUp,
+  CaretDown,
+  Carets,
+} from './style'
 
 const GET_USERS = gql`
   query Users(
@@ -15,7 +24,12 @@ const GET_USERS = gql`
     $offset: Int
     $limit: Int
   ) {
-    users(sort: $sort, filter: $filter, offset: $offset, limit: $limit) {
+    paginatedUsers(
+      sort: $sort
+      filter: $filter
+      offset: $offset
+      limit: $limit
+    ) {
       totalCount
       users {
         id
@@ -30,38 +44,6 @@ const GET_USERS = gql`
   }
 `
 
-const CaretUp = ({ active }) => (
-  <Caret
-    aria-hidden="true"
-    className=""
-    data-icon="caret-up"
-    fill="currentColor"
-    focusable="false"
-    height="1em"
-    viewBox="0 0 100 100"
-    width="1em"
-    active={active}
-  >
-    <path d="M50 17L100.229 67.25H-0.229473L50 17Z" />
-  </Caret>
-)
-
-
-const CaretDown = ({ active }) => (
-  <Caret
-    active={active}
-    aria-hidden="true"
-    className=""
-    data-icon="caret-down"
-    fill="currentColor"
-    focusable="false"
-    height="1em"
-    viewBox="0 0 100 100"
-    width="1em"
-  >
-    <path d="M50 84L-0.229473 33.75L100.229 33.75L50 84Z" />
-  </Caret>
-)
 
 const UsersManager = () => {
   const SortHeader = ({ thisSortName, children }) => {
@@ -113,32 +95,34 @@ const UsersManager = () => {
   if (loading) return <Spinner />
   if (error) return `Error! ${error.message}`
 
-  const { users, totalCount } = data.users
+  const { users, totalCount } = data.paginatedUsers
 
   return (
     <Container>
-      <Heading level={1}>Users</Heading>
-      <Table>
-        <Header>
-          <tr>
-            <SortHeader thisSortName="username">Name</SortHeader>
-            <SortHeader thisSortName="created">Created</SortHeader>
-            <SortHeader thisSortName="admin">Admin</SortHeader>
-            <th />
-          </tr>
-        </Header>
-        <tbody>
-          {users.map((user, key) => (
-            <User key={user.id} number={key + 1} user={user} />
-          ))}
-        </tbody>
-      </Table>
-      <Pagination
-        limit={limit}
-        page={page}
-        setPage={setPage}
-        totalCount={totalCount}
-      />
+      <PageHeading level={1}>Users</PageHeading>
+      <Content>
+        <Table>
+          <Header>
+            <tr>
+              <SortHeader thisSortName="username">Name</SortHeader>
+              <SortHeader thisSortName="created">Created</SortHeader>
+              <SortHeader thisSortName="admin">Admin</SortHeader>
+              <th />
+            </tr>
+          </Header>
+          <tbody>
+            {users.map((user, key) => (
+              <User key={user.id} number={key + 1} user={user} />
+            ))}
+          </tbody>
+        </Table>
+        <Pagination
+          limit={limit}
+          page={page}
+          setPage={setPage}
+          totalCount={totalCount}
+        />
+      </Content>
     </Container>
   )
 }

app/components/component-users-manager/src/style.js

-import styled, { css } from 'styled-components'
-import { Action } from '@pubsweet/ui'
-import { th, grid } from '@pubsweet/ui-toolkit'
-
-export const Table = styled.table`
-  width: 100%;
-  border-radius: ${th('borderRadius')};
-  border-collapse: collapse;
-  font-size: ${th('fontSizeBaseSmall')};
-
-  td {
-    width: 33%;
-  }
-`
-export const Header = styled.thead`
-  text-align: left;
-  font-variant: all-small-caps;
-  border-bottom: 1px solid ${th('colorFurniture')};
-
-  background-color: ${th('colorBackgroundHue')};
-
-  th {
-    padding: ${grid(1)} ${grid(3)};
-  }
-`
-
-export const Container = styled.div`
-  padding: ${grid(2)};
-`
-
-export const Row = styled.tr`
-  max-height: ${grid(8)};
-  border-bottom: 1px solid ${th('colorFurniture')};
-
-  &:hover {
-    background-color: ${th('colorBackgroundHue')};
-  }
-`
-
-export const Cell = styled.td`
-  padding-bottom: ${grid(2)};
-  padding-top: calc(${grid(2)} - 1px);
-  padding-left: ${grid(3)};
-  padding-right: ${grid(3)};
-  button {
-    font-size: ${th('fontSizeBaseSmall')};
-  }
-`
-
-export const UserCombo = styled.div`
-  display: flex;
-  line-height: ${grid(2.5)};
-  align-items: center;
-`
-
-export const LastCell = styled(Cell)`
-  text-align: right;
-`
-
-export const Primary = styled.div`
-  font-weight: 500;
-`
-
-export const Secondary = styled.div`
-  color: ${th('colorTextPlaceholder')};
-`
-
-export const UserInfo = styled.div`
-  margin-left: ${grid(1)};
-`
-
-export const Caret = styled.svg`
-  ${props =>
-    props.active
-      ? css`
-          color: ${th('colorPrimary')};
-        `
-      : css`
-          color: ${th('colorSecondary')};
-        `}
-`
-
-export const Carets = styled.span`
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  vertical-align: middle;
-  margin-left: ${grid(0.5)};
-  svg {
-    height: ${grid(1.5)};
-  }
-  svg:nth-of-type(2) {
-    margin-top: ${grid(-0.5)};
-  }
-`
+// import styled, { css } from 'styled-components'
+// import { Action } from '@pubsweet/ui'
+// import { th, grid } from '@pubsweet/ui-toolkit'
+
+export {
+  Row,
+  Cell,
+  LastCell,
+  UserCombo,
+  Primary,
+  Secondary,
+  UserInfo,
+  Container,
+  Table,
+  Header,
+  Content,
+  PageHeading,
+  Carets,
+  CaretUp,
+  CaretDown,
+  Spinner,
+  Pagination,
+} from '../../shared'