Admin: restyle unapproved account, delete admin.scss

This commit is contained in:
Alex Gleason 2022-12-17 15:48:45 -06:00
parent 6c232d70a8
commit dc7aea6466
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
4 changed files with 30 additions and 35 deletions

View File

@ -4,7 +4,7 @@ import { defineMessages, useIntl } from 'react-intl';
import { approveUsers } from 'soapbox/actions/admin'; import { approveUsers } from 'soapbox/actions/admin';
import { rejectUserModal } from 'soapbox/actions/moderation'; import { rejectUserModal } from 'soapbox/actions/moderation';
import snackbar from 'soapbox/actions/snackbar'; import snackbar from 'soapbox/actions/snackbar';
import IconButton from 'soapbox/components/icon-button'; import { Stack, HStack, Text, IconButton } from 'soapbox/components/ui';
import { useAppSelector, useAppDispatch } from 'soapbox/hooks'; import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
import { makeGetAccount } from 'soapbox/selectors'; import { makeGetAccount } from 'soapbox/selectors';
@ -45,16 +45,31 @@ const UnapprovedAccount: React.FC<IUnapprovedAccount> = ({ accountId }) => {
}; };
return ( return (
<div className='unapproved-account'> <HStack space={4} justifyContent='between'>
<div className='unapproved-account__bio'> <Stack space={1}>
<div className='unapproved-account__nickname'>@{account.get('acct')}</div> <Text weight='semibold'>
<blockquote className='md'>{adminAccount?.invite_request || ''}</blockquote> @{account.get('acct')}
</div> </Text>
<div className='unapproved-account__actions'> <Text tag='blockquote' size='sm'>
<IconButton src={require('@tabler/icons/check.svg')} onClick={handleApprove} /> {adminAccount?.invite_request || ''}
<IconButton src={require('@tabler/icons/x.svg')} onClick={handleReject} /> </Text>
</div> </Stack>
</div>
<HStack space={2} alignItems='center'>
<IconButton
src={require('@tabler/icons/check.svg')}
onClick={handleApprove}
theme='outlined'
iconClassName='p-1 text-gray-600 dark:text-gray-400'
/>
<IconButton
src={require('@tabler/icons/x.svg')}
onClick={handleReject}
theme='outlined'
iconClassName='p-1 text-gray-600 dark:text-gray-400'
/>
</HStack>
</HStack>
); );
}; };

View File

@ -33,9 +33,12 @@ const AwaitingApproval: React.FC = () => {
showLoading={showLoading} showLoading={showLoading}
scrollKey='awaiting-approval' scrollKey='awaiting-approval'
emptyMessage={intl.formatMessage(messages.emptyMessage)} emptyMessage={intl.formatMessage(messages.emptyMessage)}
className='divide-y divide-solid divide-gray-200 dark:divide-gray-800'
> >
{accountIds.map(id => ( {accountIds.map(id => (
<UnapprovedAccount accountId={id} key={id} /> <div key={id} className='py-4 px-5'>
<UnapprovedAccount accountId={id} />
</div>
))} ))}
</ScrollableList> </ScrollableList>
); );

View File

@ -50,7 +50,6 @@
@import 'components/profile-hover-card'; @import 'components/profile-hover-card';
@import 'components/filters'; @import 'components/filters';
@import 'components/snackbar'; @import 'components/snackbar';
@import 'components/admin';
@import 'components/backups'; @import 'components/backups';
@import 'components/crypto-donate'; @import 'components/crypto-donate';
@import 'components/aliases'; @import 'components/aliases';

View File

@ -1,22 +0,0 @@
.unapproved-account {
padding: 15px 20px;
font-size: 14px;
display: flex;
&__nickname {
font-weight: bold;
}
&__actions {
margin-left: auto;
display: flex;
flex-wrap: nowrap;
column-gap: 10px;
padding-left: 20px;
.svg-icon {
height: 24px;
width: 24px;
}
}
}