use constants for user role colors

#69
yalla-coop · Oct 5, 2019 · 858181f · 858181f
1 parent 79c186a
commit 858181f
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/src/components/Admin/Users/UserListItem.js b/src/components/Admin/Users/UserListItem.js
@@ -1,14 +1,15 @@
 import React from 'react';
-import { List, Icon } from 'antd';
+import { List, Icon, Tag } from 'antd';
 import { RoleTile, UserTitle } from './Users.style';
 import { renderUserDetails } from '../../../constants/users';
+import { userRoleColor } from '../../../constants/colors';
 
 const Title = ({ name, status, role }) => {
   return (
     <UserTitle>
       <div style={{ marginRight: '0.4rem' }}>{name}</div>
       <div>
-        <RoleTile>{renderUserDetails[role]}</RoleTile>
+        <Tag color={userRoleColor[role]}>{renderUserDetails[role]}</Tag>
         {status !== 'unverified' ? (
           <Icon type="check" style={{ marginLeft: '0.5rem', color: 'green' }} />
         ) : (

diff --git a/src/constants/colors.js b/src/constants/colors.js
@@ -37,3 +37,9 @@ export const useClassColor = {
   D2: appColors.ORANGE,
   Other: appColors.WHITE,
 };
+
+export const userRoleColor = {
+  user: appColors.GREEN,
+  superUser: appColors.PINK,
+  admin: appColors.GOLD,
+};