Admin: restyle unapproved account, delete admin.scss

app/soapbox/features/admin/components/unapproved-account.tsx

@@ -4,7 +4,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import { approveUsers } from 'soapbox/actions/admin';
 import { rejectUserModal } from 'soapbox/actions/moderation';
 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 { makeGetAccount } from 'soapbox/selectors';
 
@@ -45,16 +45,31 @@ const UnapprovedAccount: React.FC<IUnapprovedAccount> = ({ accountId }) => {
   };
 
   return (
-    <div className='unapproved-account'>
-      <div className='unapproved-account__bio'>
-        <div className='unapproved-account__nickname'>@{account.get('acct')}</div>
-        <blockquote className='md'>{adminAccount?.invite_request || ''}</blockquote>
-      </div>
-      <div className='unapproved-account__actions'>
-        <IconButton src={require('@tabler/icons/check.svg')} onClick={handleApprove} />
-        <IconButton src={require('@tabler/icons/x.svg')} onClick={handleReject} />
-      </div>
-    </div>
+    <HStack space={4} justifyContent='between'>
+      <Stack space={1}>
+        <Text weight='semibold'>
+          @{account.get('acct')}
+        </Text>
+        <Text tag='blockquote' size='sm'>
+          {adminAccount?.invite_request || ''}
+        </Text>
+      </Stack>
+
+      <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>
   );
 };
 

app/soapbox/features/admin/tabs/awaiting-approval.tsx

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

app/styles/application.scss

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

app/styles/components/admin.scss

@@ -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;
-    }
-  }
-}