From da4fd7e39e288dd9885466452498a0366aec5b9d Mon Sep 17 00:00:00 2001
From: cmp <camporter1@gmail.com>
Date: Sat, 12 Aug 2023 04:25:29 -0500
Subject: [PATCH] Move banned users to a separate admin tab. (#2057)

---
 src/shared/components/home/admin-settings.tsx | 23 ++++++++++++++-----
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/shared/components/home/admin-settings.tsx b/src/shared/components/home/admin-settings.tsx
index d3c998d9..4924508f 100644
--- a/src/shared/components/home/admin-settings.tsx
+++ b/src/shared/components/home/admin-settings.tsx
@@ -150,15 +150,26 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
                         loading={this.state.loading}
                       />
                     </div>
-                    <div className="col-12 col-md-6">
-                      {this.admins()}
-                      <hr />
-                      {this.bannedUsers()}
-                    </div>
+                    <div className="col-12 col-md-6">{this.admins()}</div>
                   </div>
                 </div>
               ),
             },
+            {
+              key: "banned_users",
+              label: I18NextService.i18n.t("banned_users"),
+              getNode: isSelected => (
+                <div
+                  className={classNames("tab-pane", {
+                    active: isSelected,
+                  })}
+                  role="tabpanel"
+                  id="banned_users-tab-pane"
+                >
+                  {this.bannedUsers()}
+                </div>
+              ),
+            },
             {
               key: "rate_limiting",
               label: "Rate Limiting",
@@ -295,7 +306,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
         const bans = this.state.bannedRes.data.banned;
         return (
           <>
-            <h2 className="h5">{I18NextService.i18n.t("banned_users")}</h2>
+            <h1 className="h4 mb-4">{I18NextService.i18n.t("banned_users")}</h1>
             <ul className="list-unstyled">
               {bans.map(banned => (
                 <li key={banned.person.id} className="list-inline-item">