Merge pull request 'fixed a few issues with the new modlog' (#39) from feature/better-modlog into main

Reviewed-on: https://git.chapo.chat/chapo-collective/hexbear-frontend/pulls/39

src/components/modlog.tsx

@@ -74,7 +74,8 @@ export function Modlog(props) {
   const [selectedUser, setSelectedUser] = useState(0);
 
   const actionFilterDropdownRef = useRef(null);
-  useClickOutsideHandler(actionFilterDropdownRef, 'action-checkboxes');
+  const actionFilterWindowRef = useRef(null);
+  useClickOutsideHandler(actionFilterDropdownRef, actionFilterWindowRef);
 
   const modlogQuery = useSWR(
     () =>
@@ -136,7 +137,7 @@ export function Modlog(props) {
             <div ref={actionFilterDropdownRef} className="modlog-filter-input">
               <div
                 onClick={() => {
-                  let checkboxes = document.getElementById('action-checkboxes');
+                  let checkboxes = actionFilterWindowRef.current;
                   if (checkboxes.style.display == 'none') {
                     checkboxes.style.display = 'block';
                   } else {
@@ -154,7 +155,7 @@ export function Modlog(props) {
               </div>
               <Box
                 className="modlog-dropdown"
-                id="action-checkboxes"
+                ref={actionFilterWindowRef}
                 sx={{ bg: darken('background', 0.03) }}
               >
                 {filterNamesUI.map((filter, index) => (
@@ -260,16 +261,16 @@ function UserFilter(props) {
         className="modlog-dropdown"
         sx={{ bg: darken('background', 0.03) }}
       >
-        <div style={{ display: 'flex', height: '30px', alignItems: 'center' }}>
+        <div style={{ height: '30px' }}>
           <p style={{ color: '#999', fontSize: '14px', paddingRight: '8px' }}>
             Show banned users
+            <input
+              type="checkbox"
+              checked={showBanned}
+              style={{ scale: '0.8', marginLeft: '5px' }}
+              onChange={() => setShowBanned(!showBanned)}
+            />
           </p>
-          <input
-            type="checkbox"
-            checked={showBanned}
-            style={{ marginTop: '-5px', scale: '0.8' }}
-            onChange={() => setShowBanned(!showBanned)}
-          />
         </div>
         {searchList.filter(
           user =>