style(AdminListModal): differentiate mod and admin role

src/components/modals/AdminListModal.jsx

@@ -3,23 +3,15 @@ import Modal from 'react-modal';
 import Draggable from 'react-draggable';
 import { StyledModal } from '../styled/modals/ReplyModal.styled';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
-import { BoardForm } from '../styled/views/Board.styled'
+import { BoardForm } from '../styled/views/Board.styled';
 import { Link } from 'react-router-dom';
 
-
-
 const AdminListModal = ({ isOpen, closeModal, roles }) => {
-  const {
-    selectedAddress,
-    selectedStyle,
-    selectedTitle,
-  } = useGeneralStore(state => state);
+  const { selectedStyle } = useGeneralStore((state) => state);
 
   const [isMobile, setIsMobile] = useState(window.innerWidth <= 480);
   const nodeRef = useRef(null);
-  const rolesList = roles 
-    ? Object.entries(roles).map(([address, { role }]) => ({ address, role })) 
-    : [];
+  const rolesList = roles ? Object.entries(roles).map(([address, { role }]) => ({ address, role })) : [];
 
   useEffect(() => {
     const handleResize = () => setIsMobile(window.innerWidth <= 480);
@@ -30,45 +22,53 @@ const AdminListModal = ({ isOpen, closeModal, roles }) => {
       window.removeEventListener('resize', handleResize);
     };
   }, [setIsMobile]);
-  
 
   return (
     <StyledModal
-    isOpen={isOpen}
-    onRequestClose={closeModal}
-    contentLabel="Reply Modal"
-    shouldCloseOnEsc={true}
-    shouldCloseOnOverlayClick={isMobile}
-    selectedStyle={selectedStyle}
-    overlayClassName="overlay"
-    style={isMobile ? ({ overlay: { backgroundColor: "rgba(0,0,0,.25)" }}) : ({ overlay: { backgroundColor: "rgba(0,0,0,0)" }})
-    }
-  >
-      <Draggable handle=".modal-header" nodeRef={nodeRef} disabled={isMobile}>
-        <div className="modal-content" ref={nodeRef} 
-        style={{
-          maxWidth: '300px',
-          maxHeight: '250px',
-        }}>
-          <div className="modal-header">
-            Admins for {selectedTitle ?? selectedAddress}
-            <button className="icon" onClick={() => closeModal()} title="close" />
-          </div>
-          <div className='list' style={{
-            padding: '10px',
-            maxHeight: '200px',
+      isOpen={isOpen}
+      onRequestClose={closeModal}
+      contentLabel='Reply Modal'
+      shouldCloseOnEsc={true}
+      shouldCloseOnOverlayClick={isMobile}
+      selectedStyle={selectedStyle}
+      overlayClassName='overlay'
+      style={isMobile ? { overlay: { backgroundColor: 'rgba(0,0,0,.25)' } } : { overlay: { backgroundColor: 'rgba(0,0,0,0)' } }}
+    >
+      <Draggable handle='.modal-header' nodeRef={nodeRef} disabled={isMobile}>
+        <div
+          className='modal-content'
+          ref={nodeRef}
+          style={{
             maxWidth: '300px',
-            overflowY: 'auto',
-            overflowX: 'hidden',
-            wordWrap: 'break-word',
-            wordBreak: 'break-all',
-          }}>
-            <BoardForm selectedStyle={selectedStyle} style={{all: 'unset'}}>
-            {rolesList.map(({ address, role }, index) => (
-              <p key={index}>
-                  • <Link to={() => {}} className="quote-link">u/{address}</Link>: {role}
-              </p>
-            ))}
+            maxHeight: '250px',
+          }}
+        >
+          <button className='icon' onClick={() => closeModal()} title='close' />
+          <div className='modal-header' style={{ margin: '10px 10px 0px 10px' }}>
+            Moderators
+          </div>
+          <div
+            className='list'
+            style={{
+              padding: '10px',
+              maxHeight: '200px',
+              maxWidth: '300px',
+              overflowY: 'auto',
+              overflowX: 'hidden',
+              wordWrap: 'break-word',
+              wordBreak: 'break-all',
+            }}
+          >
+            <BoardForm selectedStyle={selectedStyle} style={{ all: 'unset' }}>
+              {rolesList.map(({ address, role }, index) => (
+                <p key={index}>
+                  •{' '}
+                  <Link to={() => {}} className='quote-link'>
+                    u/{address}
+                  </Link>
+                  : {role}
+                </p>
+              ))}
             </BoardForm>
           </div>
         </div>
@@ -79,4 +79,4 @@ const AdminListModal = ({ isOpen, closeModal, roles }) => {
 
 Modal.setAppElement('#root');
 
-export default AdminListModal;
+export default AdminListModal;