Admin X Tiers refinements (#17344)

refs. https://github.com/TryGhost/Product/issues/3580

- The Tiers list had an unnecessary extra separator on top
- Spacing was a bit off in the benefits list in the Tier detail modal

apps/admin-x-settings/src/admin-x-ds/assets/icons/money-bags.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5"><defs></defs><title>money-bags</title><path d="M14.045 7.988C16.091 9.4 18.75 12.8 18.75 15.863c0 3.107-3.361 5.625-6.75 5.625s-6.75-2.518-6.75-5.625c0-3.063 2.659-6.463 4.705-7.875L8.4 4.281a.9.9 0 0 1 .416-1.27 10.2 10.2 0 0 1 6.363 0 .9.9 0 0 1 .421 1.27Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M9.955 7.988h4.09"></path><path d="M4.5 20.738c-3 0-3.75-3-3.75-5.114a7.512 7.512 0 0 1 3.58-6.136L3.066 7.665a.75.75 0 0 1 .616-1.177H6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M10.329 17.332a2.225 2.225 0 0 0 1.858.876c1.139 0 2.063-.693 2.063-1.548s-.924-1.546-2.063-1.546-2.062-.693-2.062-1.548.924-1.547 2.062-1.547a2.221 2.221 0 0 1 1.858.875" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.187 18.208v1.03"></path><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.187 10.988v1.031"></path><path d="M19.5 20.738c3 0 3.75-3 3.75-5.114a7.512 7.512 0 0 0-3.58-6.136l1.264-1.823a.75.75 0 0 0-.616-1.177H18" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg>

apps/admin-x-settings/src/admin-x-ds/global/List.tsx

@@ -38,7 +38,7 @@ const List: React.FC<ListProps> = ({title, titleSeparator, children, actions, hi
         <>
             {pageTitle && <Heading>{pageTitle}</Heading>}
             <section className={listClasses}>
-                <ListHeading actions={actions} title={title} titleSeparator={!pageTitle && titleSeparator} />
+                <ListHeading actions={actions} title={title} titleSeparator={!pageTitle && titleSeparator && borderTop} />
                 <div className='flex flex-col'>
                     {children}
                 </div>

apps/admin-x-settings/src/components/settings/membership/tiers/TierDetailModal.tsx

@@ -155,7 +155,7 @@ const TierDetailModal: React.FC<TierDetailModalProps> = ({tier}) => {
                         </div>}
                         onMove={benefits.moveItem}
                     />
-                    <div className="relative flex items-center gap-3">
+                    <div className="relative mt-0.5 flex items-center gap-3">
                         <Icon name='check' size='sm' />
                         <TextField
                             className='grow'

apps/admin-x-settings/src/components/settings/membership/tiers/TiersList.tsx

@@ -2,6 +2,7 @@ import Button from '../../../../admin-x-ds/global/Button';
 import List from '../../../../admin-x-ds/global/List';
 import ListItem from '../../../../admin-x-ds/global/ListItem';
 import NiceModal from '@ebay/nice-modal-react';
+import NoValueLabel from '../../../../admin-x-ds/global/NoValueLabel';
 import React from 'react';
 import TierDetailModal from './TierDetailModal';
 import {Tier} from '../../../../types/api';
@@ -20,7 +21,7 @@ interface TierActionsProps {
 const TierActions: React.FC<TierActionsProps> = ({tier, updateTier}) => {
     if (tier.active) {
         return (
-            <Button color='green' label='Archive' link onClick={() => {
+            <Button color='red' label='Archive' link onClick={() => {
                 updateTier({...tier, active: false});
             }} />
         );
@@ -34,11 +35,20 @@ const TierActions: React.FC<TierActionsProps> = ({tier, updateTier}) => {
 };
 
 const TiersList: React.FC<TiersListProps> = ({
+    tab,
     tiers,
     updateTier
 }) => {
+    if (!tiers.length) {
+        return (
+            <NoValueLabel icon='money-bags'>
+                No {tab === 'active-tiers' ? 'active' : 'archived'} tiers found.
+            </NoValueLabel>
+        );
+    }
+
     return (
-        <List>
+        <List borderTop={false}>
             {tiers.map((tier) => {
                 return (
                     <ListItem