Admin: refactor email list downloads into List, get rid of .dashwidget css

app/soapbox/features/admin/components/dashcounter.tsx

@@ -45,7 +45,7 @@ interface IDashCounters {
 /** Wrapper container for dash counters. */
 const DashCounters: React.FC<IDashCounters> = ({ children }) => {
   return (
-    <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 mb-4 mt-8'>
+    <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2'>
       {children}
     </div>
   );

app/soapbox/features/admin/tabs/dashboard.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { getSubscribersCsv, getUnsubscribersCsv, getCombinedCsv } from 'soapbox/actions/email-list';
+import List, { ListItem } from 'soapbox/components/list';
+import { CardTitle, IconButton, Stack } from 'soapbox/components/ui';
 import { useAppDispatch, useOwnAccount, useFeatures, useInstance } from 'soapbox/hooks';
 import sourceCode from 'soapbox/utils/code';
 import { download } from 'soapbox/utils/download';
@@ -49,7 +51,7 @@ const Dashboard: React.FC = () => {
   if (!account) return null;
 
   return (
-    <>
+    <Stack space={6} className='mt-4'>
       <DashCounters>
         <DashCounter
           count={mau}
@@ -78,26 +80,54 @@ const Dashboard: React.FC = () => {
 
       {account.admin && <RegistrationModePicker />}
 
-      <div className='dashwidgets'>
+      <CardTitle
-        <div className='dashwidget'>
+        title={<FormattedMessage id='admin.dashwidgets.software_header' defaultMessage='Software' />}
-          <h4><FormattedMessage id='admin.dashwidgets.software_header' defaultMessage='Software' /></h4>
+      />
-          <ul>
+
-            <li>{sourceCode.displayName} <span className='pull-right'>{sourceCode.version}</span></li>
+      <List>
-            <li>{v.software + (v.build ? `+${v.build}` : '')} <span className='pull-right'>{v.version}</span></li>
+        <ListItem label={<FormattedMessage id='admin.software.frontend' defaultMessage='Frontend' />}>
-          </ul>
+          <span>{sourceCode.displayName} {sourceCode.version}</span>
-        </div>
+        </ListItem>
-        {features.emailList && account.admin && (
+
-          <div className='dashwidget'>
+        <ListItem label={<FormattedMessage id='admin.software.backend' defaultMessage='Backend' />}>
-            <h4><FormattedMessage id='admin.dashwidgets.email_list_header' defaultMessage='Email list' /></h4>
+          <span>{v.software + (v.build ? `+${v.build}` : '')} {v.version}</span>
-            <ul>
+        </ListItem>
-              <li><a href='#' onClick={handleSubscribersClick} target='_blank'>subscribers.csv</a></li>
+      </List>
-              <li><a href='#' onClick={handleUnsubscribersClick} target='_blank'>unsubscribers.csv</a></li>
+
-              <li><a href='#' onClick={handleCombinedClick} target='_blank'>combined.csv</a></li>
+      {(features.emailList && account.admin) && (
-            </ul>
+        <>
-          </div>
+          <CardTitle
-        )}
+            title={<FormattedMessage id='admin.dashwidgets.email_list_header' defaultMessage='Email list' />}
-      </div>
+          />
+
+          <List>
+            <ListItem label='subscribers.csv'>
+              <IconButton
+                src={require('@tabler/icons/download.svg')}
+                onClick={handleSubscribersClick}
+                iconClassName='w-5 h-5'
+              />
+            </ListItem>
+
+            <ListItem label='unsubscribers.csv'>
+              <IconButton
+                src={require('@tabler/icons/download.svg')}
+                onClick={handleUnsubscribersClick}
+                iconClassName='w-5 h-5'
+              />
+            </ListItem>
+
+            <ListItem label='combined.csv'>
+              <IconButton
+                src={require('@tabler/icons/download.svg')}
+                onClick={handleCombinedClick}
+                iconClassName='w-5 h-5'
+              />
+            </ListItem>
+          </List>
         </>
+      )}
+    </Stack>
   );
 };
 

app/styles/components/admin.scss

@@ -1,30 +1,3 @@
-.dashwidgets {
-  display: flex;
-  flex-wrap: wrap;
-  margin: 0 -5px;
-  padding: 0 20px 20px 20px;
-}
-
-.dashwidget {
-  flex: 1;
-  margin-bottom: 20px;
-  padding: 0 5px;
-
-  h4 {
-    text-transform: uppercase;
-    font-size: 13px;
-    font-weight: 700;
-    color: hsla(var(--primary-text-color_hsl), 0.6);
-    padding-bottom: 8px;
-    margin-bottom: 8px;
-    border-bottom: 1px solid var(--accent-color--med);
-  }
-
-  a {
-    color: var(--brand-color);
-  }
-}
-
 .unapproved-account {
   padding: 15px 20px;
   font-size: 14px;