add edit user button

#69

src/components/Admin/Users/ListWithFilter.js

@@ -37,6 +37,7 @@ export default function ListWithFilter({ dataSource, renderItem, ...props }) {
         dataSource={filteredSource}
         renderItem={renderItem}
         itemLayout={isSmallScreen ? 'vertical' : 'horizontal'}
+        bordered
         {...props}
       />
     </div>

src/components/Admin/Users/UserListItem.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import { List, Tag, Button } from 'antd';
-import { UserTitle } from './Users.style';
+import { List, Tag, Button, Icon } from 'antd';
 import { renderUserDetails } from '../../../constants/users';
 import { userRoleColor } from '../../../constants/colors';
 
@@ -22,29 +21,18 @@ const Title = ({ name, status, role }) => {
   );
 };
 
-const UserActions = () => (
-  <div className="flex items-center justify-start">
-    <Button
-      style={{ color: '#219653', borderColor: '#219653' }}
-      className="mr1"
-      ghost
-    >
-      Approve
-    </Button>
-    <Button ghost style={{ color: '#EB5757', borderColor: '#EB5757' }}>
-      Reject
-    </Button>
-  </div>
-);
-
 const UserListItem = ({ _id, name, email, role, status }) => {
   return (
     <List.Item key={_id}>
       <List.Item.Meta
         title={<Title name={name} status={status} role={role} />}
         description={email}
       />
-      <UserActions />
+      {role !== 'admin' && (
+        <Button>
+          <Icon type="form" />
+        </Button>
+      )}
     </List.Item>
   );
 };

src/components/Admin/Users/Users.style.js

@@ -1,17 +1,21 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
+import { Button } from 'antd';
 
-export const RoleTile = styled.span`
-  background: #333333;
-  color: #ffffff;
-  padding: 0.2rem 0.4rem;
-  font-size: 0.7rem;
-  border-radius: 10%;
+const verify = css`
+  color: green !important;
+  border-color: green !important;
 `;
 
-export const UserTitle = styled.div`
-  display: flex;
-  flex-direction: column;
-  @media all and (min-width: 600px) {
-    flex-direction: row;
-  }
+const reject = css`
+  color: red !important;
+  border-color: red !important;
+`;
+
+export const UserButton = styled(Button).attrs({
+  className: 'mr-1',
+  size: 'small',
+  ghost: true,
+})`
+  ${props => props.verify && verify}
+  ${props => props.reject && reject}
 `;