update admin for bs5

- panel became card
- fix alignment of filter checkbox
- make all buttons consistently buttons

jsx/src/components/AddUser/AddUser.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { Link, useNavigate } from "react-router-dom";
+import { Button } from "react-bootstrap";
 import PropTypes from "prop-types";
 
 const AddUser = (props) => {
@@ -47,11 +48,11 @@ const AddUser = (props) => {
         )}
         <div className="row">
           <div className="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
-            <div className="panel panel-default">
-              <div className="panel-heading">
+            <div className="card">
+              <div className="card-header">
                 <h4>Add Users</h4>
               </div>
-              <div className="panel-body">
+              <div className="card-body">
                 <form>
                   <div className="form-group">
                     <textarea
@@ -82,10 +83,12 @@ const AddUser = (props) => {
                   </div>
                 </form>
               </div>
-              <div className="panel-footer">
-                <button id="return" className="btn btn-light">
-                  <Link to="/">Back</Link>
-                </button>
+              <div className="card-footer">
+                <Link to="/">
+                  <Button variant="light" id="return">
+                    Back
+                  </Button>
+                </Link>
                 <span> </span>
                 <button
                   id="submit"

jsx/src/components/CreateGroup/CreateGroup.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { Link, useNavigate } from "react-router-dom";
+import { Button, Card } from "react-bootstrap";
 import PropTypes from "prop-types";
 
 const CreateGroup = (props) => {
@@ -46,11 +47,11 @@ const CreateGroup = (props) => {
         )}
         <div className="row">
           <div className="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
-            <div className="panel panel-default">
-              <div className="panel-heading">
+            <div className="card">
+              <div className="card-header">
                 <h4>Create Group</h4>
               </div>
-              <div className="panel-body">
+              <div className="card-body">
                 <div className="input-group">
                   <input
                     className="group-name-input"
@@ -65,15 +66,17 @@ const CreateGroup = (props) => {
                   ></input>
                 </div>
               </div>
-              <div className="panel-footer">
-                <button id="return" className="btn btn-light">
-                  <Link to="/">Back</Link>
-                </button>
+              <div className="card-footer">
+                <Link to="/groups">
+                  <Button variant="light" id="return">
+                    Back
+                  </Button>
+                </Link>
                 <span> </span>
-                <button
+                <Button
                   id="submit"
                   data-testid="submit"
-                  className="btn btn-primary"
+                  variant="primary"
                   onClick={() => {
                     createGroup(groupName)
                       .then((data) => {
@@ -96,7 +99,7 @@ const CreateGroup = (props) => {
                   }}
                 >
                   Create
-                </button>
+                </Button>
               </div>
             </div>
           </div>

jsx/src/components/EditUser/EditUser.jsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import PropTypes from "prop-types";
 import { Link, useLocation, useNavigate } from "react-router-dom";
+import { Button } from "react-bootstrap";
 
 const EditUser = (props) => {
   const limit = useSelector((state) => state.limit),
@@ -61,11 +62,11 @@ const EditUser = (props) => {
         )}
         <div className="row">
           <div className="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
-            <div className="panel panel-default">
-              <div className="panel-heading">
+            <div className="card">
+              <div className="card-header">
                 <h4>Editing user {username}</h4>
               </div>
-              <div className="panel-body">
+              <div className="card-body">
                 <form>
                   <div className="form-group">
                     <textarea
@@ -118,10 +119,10 @@ const EditUser = (props) => {
                   </div>
                 </form>
               </div>
-              <div className="panel-footer">
-                <button className="btn btn-light">
-                  <Link to="/">Back</Link>
-                </button>
+              <div className="card-footer">
+                <Link to="/">
+                  <Button variant="light">Back</Button>
+                </Link>
                 <span> </span>
                 <button
                   id="submit"

jsx/src/components/GroupEdit/GroupEdit.jsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { Link, useNavigate, useLocation } from "react-router-dom";
 import PropTypes from "prop-types";
+import { Button } from "react-bootstrap";
 import GroupSelect from "../GroupSelect/GroupSelect";
 import DynamicTable from "../DynamicTable/DynamicTable";
 
@@ -103,9 +104,11 @@ const GroupEdit = (props) => {
 
       <div className="row">
         <div className="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
-          <button id="return" className="btn btn-light">
-            <Link to="/groups">Back</Link>
-          </button>
+          <Link to="/groups">
+            <Button variant="light" id="return">
+              Back
+            </Button>
+          </Link>
           <span> </span>
           <button
             id="submit"

jsx/src/components/Groups/Groups.jsx

@@ -2,6 +2,7 @@ import React, { useEffect } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import PropTypes from "prop-types";
 
+import { Button } from "react-bootstrap";
 import { Link, useNavigate } from "react-router-dom";
 import { usePaginationParams } from "../../util/paginationParams";
 import PaginationFooter from "../PaginationFooter/PaginationFooter";
@@ -44,11 +45,11 @@ const Groups = (props) => {
     <div className="container" data-testid="container">
       <div className="row">
         <div className="col-md-12 col-lg-10 col-lg-offset-1">
-          <div className="panel panel-default">
-            <div className="panel-heading">
+          <div className="card">
+            <div className="card-header">
               <h4>Groups</h4>
             </div>
-            <div className="panel-body">
+            <div className="card-body">
               <ul className="list-group">
                 {groups_data.length > 0 ? (
                   groups_data.map((e, i) => (
@@ -77,18 +78,16 @@ const Groups = (props) => {
                 handleLimit={handleLimit}
               />
             </div>
-            <div className="panel-footer">
-              <button className="btn btn-light adjacent-span-spacing">
-                <Link to="/">Back</Link>
-              </button>
-              <button
-                className="btn btn-primary adjacent-span-spacing"
-                onClick={() => {
-                  navigate("/create-group");
-                }}
-              >
-                New Group
-              </button>
+            <div className="card-footer">
+              <Link to="/">
+                <Button variant="light" id="return">
+                  Back
+                </Button>
+              </Link>
+              <span> </span>
+              <Link to="/create-group">
+                <Button variant="primary">New Group</Button>
+              </Link>
             </div>
           </div>
         </div>

jsx/src/components/ServerDashboard/ServerDashboard.jsx

@@ -421,7 +421,7 @@ const ServerDashboard = (props) => {
         <></>
       )}
       <div className="server-dashboard-container">
-        <Row>
+        <Row className="rows-cols-lg-auto g-3 mb-3 align-items-center">
           <Col md={4}>
             <FormControl
               type="text"
@@ -432,27 +432,30 @@ const ServerDashboard = (props) => {
               onChange={handleSearch}
             />
           </Col>
-          <Col md={3}>
-            {/* div.checkbox required for BS3 CSS */}
-            <div className="checkbox">
-              <label title="check to only show running servers, otherwise show all">
-                <Form.Check
-                  inline
-                  type="checkbox"
-                  name="active_servers"
-                  id="active-servers-filter"
-                  checked={state_filter == "active"}
-                  onChange={(event) => {
-                    setStateFilter(event.target.checked ? "active" : null);
-                  }}
-                />
-                {"only active servers"}
-              </label>
-            </div>
+          <Col md={4}>
+            <Form.Check
+              inline
+              title="check to only show running servers, otherwise show all"
+            >
+              <Form.Check.Input
+                type="checkbox"
+                name="active_servers"
+                id="active-servers-filter"
+                checked={state_filter == "active"}
+                onChange={(event) => {
+                  setStateFilter(event.target.checked ? "active" : null);
+                }}
+              />
+              <Form.Check.Label>{"only active servers"}</Form.Check.Label>
+            </Form.Check>
           </Col>
 
-          <Col md="auto" style={{ float: "right", margin: 15 }}>
-            <Link to="/groups">{"> Manage Groups"}</Link>
+          <Col md={{ span: 3, offset: 1 }}>
+            <Link to="/groups">
+              <Button variant="light" className="form-control">
+                {"Manage Groups"}
+              </Button>
+            </Link>
           </Col>
         </Row>
         <table className="table table-bordered table-hover">

jsx/src/components/ServerDashboard/server-dashboard.css

@@ -73,7 +73,7 @@ goals:
   min-width: 180px;
 }
 .admin-table-head #actions-header {
-  width: 350px;
+  width: 410px;
 }
 
 /* vertical stack server buttons on small windows */