add board admins list modal

src/components/views/Description.jsx

@@ -9,6 +9,7 @@ import { Container, NavBar, Header, Break, PostMenu, PostForm } from '../styled/
 import { TopBar, BoardForm, Footer, ReplyFormLink} from '../styled/views/Thread.styled';
 import { PostMenuCatalog } from '../styled/views/Catalog.styled';
 import ImageBanner from '../ImageBanner';
+import AdminListModal from '../modals/AdminListModal';
 import OfflineIndicator from '../OfflineIndicator';
 import SettingsModal from '../modals/SettingsModal';
 import getDate from '../../utils/getDate';
@@ -35,6 +36,7 @@ const Description = () => {
   const postMenuRef = useRef(null);
   const postMenuCatalogRef = useRef(null);
 
+  const [isAdminListOpen, setIsAdminListOpen] = useState(false);
   const [prevScrollPos, setPrevScrollPos] = useState(0);
   const [visible, setVisible] = useState(true);
   const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
@@ -123,6 +125,11 @@ const Description = () => {
           </title>
         </Helmet>
       <Container>
+        <AdminListModal
+        selectedStyle={selectedStyle}
+        isOpen={isAdminListOpen}
+        closeModal={() => setIsAdminListOpen(false)}
+        roles={subplebbit.roles} />
         <SettingsModal
         selectedStyle={selectedStyle}
         isOpen={isSettingsOpen}
@@ -295,7 +302,10 @@ const Description = () => {
                     <span className="name-block">
                       <span className="title">Welcome to {subplebbit.title || subplebbit.address}</span>
                       &nbsp;
-                      <span className="name capcode">## Board Admins</span>
+                      <span className="name capcode"
+                      style={{cursor: 'pointer'}}
+                      onClick={() => {setIsAdminListOpen(!isAdminListOpen)}}
+                      >## Board Admins</span>
                       &nbsp;
                       <span className="date-time">{getDate(subplebbit.createdAt)}</span>
                       &nbsp;
@@ -362,7 +372,10 @@ const Description = () => {
                     <button className="post-menu-button-mobile"
                     style={{ all: 'unset', cursor: 'pointer' }}>...</button>
                     <span className="name-block-mobile">
-                      <span className="name-mobile capcode">## Board Admins</span>
+                      <span className="name-mobile capcode"
+                      style={{cursor: 'pointer'}}
+                      onClick={() => {setIsAdminListOpen(!isAdminListOpen)}}
+                      >## Board Admins</span>
                       &nbsp;
                       <span className="thread-icons-mobile"
                       style={{float: "right", marginRight: "18px"}}>