mirror of
https://github.com/Unleash/unleash.git
synced 2025-01-31 00:16:47 +01:00
feat: users ui adjustments (#3249)
This commit is contained in:
parent
b47b2b2642
commit
2672e7386d
@ -1,11 +1,13 @@
|
|||||||
import { MonetizationOn } from '@mui/icons-material';
|
import { AttachMoneyRounded, MonetizationOn } from '@mui/icons-material';
|
||||||
import { styled, Tooltip } from '@mui/material';
|
import { styled, Tooltip } from '@mui/material';
|
||||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||||
import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
|
import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
|
||||||
|
|
||||||
const StyledMonetizationOn = styled(MonetizationOn)(({ theme }) => ({
|
const StyledMonetizationOn = styled(AttachMoneyRounded)(({ theme }) => ({
|
||||||
color: theme.palette.primary.light,
|
color: theme.palette.primary.light,
|
||||||
fontSize: '1.75rem',
|
fontSize: '1.5rem',
|
||||||
|
backgroundColor: '#F1F0FC',
|
||||||
|
borderRadius: theme.shape.borderRadiusLarge,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
interface IUserTypeCellProps {
|
interface IUserTypeCellProps {
|
||||||
@ -22,7 +24,7 @@ export const UserTypeCell = ({ value }: IUserTypeCellProps) => {
|
|||||||
<StyledMonetizationOn />
|
<StyledMonetizationOn />
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
}
|
}
|
||||||
elseShow="Free"
|
elseShow="Included"
|
||||||
/>
|
/>
|
||||||
</TextCell>
|
</TextCell>
|
||||||
);
|
);
|
||||||
|
@ -96,16 +96,6 @@ const UsersList = () => {
|
|||||||
|
|
||||||
const columns = useMemo(
|
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',
|
Header: 'Avatar',
|
||||||
accessor: 'imageUrl',
|
accessor: 'imageUrl',
|
||||||
@ -163,6 +153,17 @@ const UsersList = () => {
|
|||||||
sortType: 'date',
|
sortType: 'date',
|
||||||
maxWidth: 150,
|
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',
|
Header: 'Actions',
|
||||||
id: 'Actions',
|
id: 'Actions',
|
||||||
|
Loading…
Reference in New Issue
Block a user