Merge branch 'edit-group-fixes' into 'develop'

Edit group fixes

See merge request soapbox-pub/soapbox!2372

app/soapbox/features/group/manage-group.tsx

@@ -5,7 +5,7 @@ import { useHistory } from 'react-router-dom';
 import { deleteGroup, editGroup } from 'soapbox/actions/groups';
 import { openModal } from 'soapbox/actions/modals';
 import List, { ListItem } from 'soapbox/components/list';
-import { CardBody, Column, Spinner } from 'soapbox/components/ui';
+import { CardBody, CardHeader, CardTitle, Column, Spinner, Text } from 'soapbox/components/ui';
 import { useAppDispatch, useGroup } from 'soapbox/hooks';
 
 import ColumnForbidden from '../ui/components/column-forbidden';
@@ -16,11 +16,13 @@ const messages = defineMessages({
   heading: { id: 'column.manage_group', defaultMessage: 'Manage group' },
   editGroup: { id: 'manage_group.edit_group', defaultMessage: 'Edit group' },
   pendingRequests: { id: 'manage_group.pending_requests', defaultMessage: 'Pending requests' },
-  blockedMembers: { id: 'manage_group.blocked_members', defaultMessage: 'Blocked members' },
+  blockedMembers: { id: 'manage_group.blocked_members', defaultMessage: 'Banned members' },
   deleteGroup: { id: 'manage_group.delete_group', defaultMessage: 'Delete group' },
   deleteConfirm: { id: 'confirmations.delete_group.confirm', defaultMessage: 'Delete' },
   deleteHeading: { id: 'confirmations.delete_group.heading', defaultMessage: 'Delete group' },
   deleteMessage: { id: 'confirmations.delete_group.message', defaultMessage: 'Are you sure you want to delete this group? This is a permanent action that cannot be undone.' },
+  members: { id: 'group.tabs.members', defaultMessage: 'Members' },
+  other: { id: 'settings.other', defaultMessage: 'Other options' },
 });
 
 interface IManageGroup {
@@ -66,20 +68,38 @@ const ManageGroup: React.FC<IManageGroup> = ({ params }) => {
     <Column label={intl.formatMessage(messages.heading)} backHref={`/groups/${id}`}>
       <CardBody className='space-y-4'>
         {group.relationship.role === 'owner' && (
-          <List>
-            <ListItem label={intl.formatMessage(messages.editGroup)} onClick={onEditGroup}>
-              <span dangerouslySetInnerHTML={{ __html: group.display_name_html }} />
-            </ListItem>
-          </List>
+          <>
+            <CardHeader>
+              <CardTitle title={intl.formatMessage(messages.editGroup)} />
+            </CardHeader>
+
+            <List>
+              <ListItem label={intl.formatMessage(messages.editGroup)} onClick={onEditGroup}>
+                <span dangerouslySetInnerHTML={{ __html: group.display_name_html }} />
+              </ListItem>
+            </List>
+          </>
         )}
+
+        <CardHeader>
+          <CardTitle title={intl.formatMessage(messages.members)} />
+        </CardHeader>
+
         <List>
           <ListItem label={intl.formatMessage(messages.pendingRequests)} onClick={navigateToPending} />
           <ListItem label={intl.formatMessage(messages.blockedMembers)} onClick={navigateToBlocks} />
         </List>
+
         {group.relationship.role === 'owner' && (
-          <List>
-            <ListItem label={intl.formatMessage(messages.deleteGroup)} onClick={onDeleteGroup} />
-          </List>
+          <>
+            <CardHeader>
+              <CardTitle title={intl.formatMessage(messages.other)} />
+            </CardHeader>
+
+            <List>
+              <ListItem label={<Text theme='danger'>{intl.formatMessage(messages.deleteGroup)}</Text>} onClick={onDeleteGroup} />
+            </List>
+          </>
         )}
       </CardBody>
     </Column>

app/soapbox/features/settings/index.tsx

@@ -4,7 +4,7 @@ import { useHistory } from 'react-router-dom';
 
 import { fetchMfa } from 'soapbox/actions/mfa';
 import List, { ListItem } from 'soapbox/components/list';
-import { Card, CardBody, CardHeader, CardTitle, Column } from 'soapbox/components/ui';
+import { Card, CardBody, CardHeader, CardTitle, Column, Text } from 'soapbox/components/ui';
 import { useAppDispatch, useAppSelector, useFeatures, useOwnAccount } from 'soapbox/hooks';
 
 import Preferences from '../preferences';
@@ -155,7 +155,7 @@ const Settings = () => {
                 ))}
 
                 {features.security && (
-                  <ListItem label={intl.formatMessage(messages.deleteAccount)} onClick={navigateToDeleteAccount} />
+                  <ListItem label={<Text theme='danger'>{intl.formatMessage(messages.deleteAccount)}</Text>} onClick={navigateToDeleteAccount} />
                 )}
               </List>
             </CardBody>

app/soapbox/locales/en.json

@@ -927,7 +927,7 @@
   "login_external.errors.instance_fail": "The instance returned an error.",
   "login_external.errors.network_fail": "Connection failed. Is a browser extension blocking it?",
   "login_form.header": "Sign In",
-  "manage_group.blocked_members": "Blocked members",
+  "manage_group.blocked_members": "Banned members",
   "manage_group.confirmation.copy": "Copy link",
   "manage_group.confirmation.info_1": "As the owner of this group, you can assign staff, delete posts and much more.",
   "manage_group.confirmation.info_2": "Post the group's first post and get the conversation started.",