From 2672e7386dd3f352d1c934f009f41ab20a16c262 Mon Sep 17 00:00:00 2001
From: Jaanus Sellin <sellinjaanus@gmail.com>
Date: Fri, 3 Mar 2023 14:05:45 +0200
Subject: [PATCH] feat: users ui adjustments (#3249)

---
 .../UsersList/UserTypeCell/UserTypeCell.tsx   | 10 +++++----
 .../admin/users/UsersList/UsersList.tsx       | 21 ++++++++++---------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/frontend/src/component/admin/users/UsersList/UserTypeCell/UserTypeCell.tsx b/frontend/src/component/admin/users/UsersList/UserTypeCell/UserTypeCell.tsx
index d27d5b205d..9760d71287 100644
--- a/frontend/src/component/admin/users/UsersList/UserTypeCell/UserTypeCell.tsx
+++ b/frontend/src/component/admin/users/UsersList/UserTypeCell/UserTypeCell.tsx
@@ -1,11 +1,13 @@
-import { MonetizationOn } from '@mui/icons-material';
+import { AttachMoneyRounded, MonetizationOn } from '@mui/icons-material';
 import { styled, Tooltip } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
 
-const StyledMonetizationOn = styled(MonetizationOn)(({ theme }) => ({
+const StyledMonetizationOn = styled(AttachMoneyRounded)(({ theme }) => ({
     color: theme.palette.primary.light,
-    fontSize: '1.75rem',
+    fontSize: '1.5rem',
+    backgroundColor: '#F1F0FC',
+    borderRadius: theme.shape.borderRadiusLarge,
 }));
 
 interface IUserTypeCellProps {
@@ -22,7 +24,7 @@ export const UserTypeCell = ({ value }: IUserTypeCellProps) => {
                         <StyledMonetizationOn />
                     </Tooltip>
                 }
-                elseShow="Free"
+                elseShow="Included"
             />
         </TextCell>
     );
diff --git a/frontend/src/component/admin/users/UsersList/UsersList.tsx b/frontend/src/component/admin/users/UsersList/UsersList.tsx
index d3be3537fc..85ba9dc3b2 100644
--- a/frontend/src/component/admin/users/UsersList/UsersList.tsx
+++ b/frontend/src/component/admin/users/UsersList/UsersList.tsx
@@ -96,16 +96,6 @@ const UsersList = () => {
 
     const columns = useMemo(
         () => [
-            {
-                id: 'type',
-                Header: 'Type',
-                accessor: 'paid',
-                Cell: ({ row: { original: user } }: any) => (
-                    <UserTypeCell value={isBillingUsers && user.paid} />
-                ),
-                disableGlobalFilter: true,
-                sortType: 'boolean',
-            },
             {
                 Header: 'Avatar',
                 accessor: 'imageUrl',
@@ -163,6 +153,17 @@ const UsersList = () => {
                 sortType: 'date',
                 maxWidth: 150,
             },
+            {
+                id: 'type',
+                Header: 'Type',
+                accessor: 'paid',
+                maxWidth: 100,
+                Cell: ({ row: { original: user } }: any) => (
+                    <UserTypeCell value={isBillingUsers && user.paid} />
+                ),
+                disableGlobalFilter: true,
+                sortType: 'boolean',
+            },
             {
                 Header: 'Actions',
                 id: 'Actions',