Move banned users to a separate admin tab. (#2057)

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">
+                    <div className="col-12 col-md-6">{this.admins()}</div>
-                      {this.admins()}
-                      <hr />
-                      {this.bannedUsers()}
-                    </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">