mirror of
				https://github.com/Unleash/unleash.git
				synced 2025-10-27 11:02:16 +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