Make the linter happy.

src/components/ui/Modal.tsx

@@ -1,6 +1,7 @@
+/* eslint-disable react-hooks/rules-of-hooks */
 import styled, { css, keyframes } from "styled-components";
 
-import { createPortal, useEffect, useState } from "preact/compat";
+import { createPortal, useCallback, useEffect, useState } from "preact/compat";
 
 import { internalSubscribe } from "../../lib/eventEmitter";
 
@@ -134,7 +135,7 @@ interface Props {
     dontModal?: boolean;
     padding?: boolean;
 
-    onClose: () => void;
+    onClose?: () => void;
     actions?: Action[];
     disabled?: boolean;
     border?: boolean;
@@ -163,12 +164,12 @@ export default function Modal(props: Props) {
 
     const [animateClose, setAnimateClose] = useState(false);
     isModalClosing = animateClose;
-    function onClose() {
+    const onClose = useCallback(() => {
         setAnimateClose(true);
-        setTimeout(() => props.onClose(), 2e2);
-    }
+        setTimeout(() => props.onClose?.(), 2e2);
+    }, [setAnimateClose, props]);
 
-    useEffect(() => internalSubscribe("Modal", "close", onClose), []);
+    useEffect(() => internalSubscribe("Modal", "close", onClose), [onClose]);
 
     useEffect(() => {
         if (props.disallowClosing) return;
@@ -181,7 +182,7 @@ export default function Modal(props: Props) {
 
         document.body.addEventListener("keydown", keyDown);
         return () => document.body.removeEventListener("keydown", keyDown);
-    }, [props.disallowClosing, props.onClose]);
+    }, [props.disallowClosing, onClose]);
 
     const confirmationAction = props.actions?.find(
         (action) => action.confirmation,
@@ -211,8 +212,12 @@ export default function Modal(props: Props) {
                 {content}
                 {props.actions && (
                     <ModalActions>
-                        {props.actions.map((x) => (
-                            <Button {...x} disabled={props.disabled} />
+                        {props.actions.map((x, index) => (
+                            <Button
+                                key={index}
+                                {...x}
+                                disabled={props.disabled}
+                            />
                         ))}
                     </ModalActions>
                 )}

src/components/ui/Tip.tsx

@@ -64,7 +64,7 @@ export default function Tip(
             {!hideSeparator && <Separator />}
             <TipBase {...tipProps}>
                 <InfoCircle size={20} />
-                <span>{props.children}</span>
+                <span>{children}</span>
             </TipBase>
         </>
     );

src/components/ui/fluent/CategoryButton.tsx

@@ -4,6 +4,7 @@ import styled, { css } from "styled-components";
 import { Children } from "../../../types/Preact";
 
 interface BaseProps {
+    readonly hover?: boolean;
     readonly account?: boolean;
     readonly disabled?: boolean;
     readonly largeDescription?: boolean;
@@ -25,8 +26,6 @@ const CategoryBase = styled.div<BaseProps>`
         flex-shrink: 0;
     }
 
-    
-
     .content {
         display: flex;
         flex-grow: 1;
@@ -41,8 +40,6 @@ const CategoryBase = styled.div<BaseProps>`
             overflow: hidden;
         }
 
-        
-
         .description {
             ${(props) =>
                 props.largeDescription
@@ -66,7 +63,7 @@ const CategoryBase = styled.div<BaseProps>`
     }
 
     ${(props) =>
-        typeof props.onClick !== "undefined" &&
+        props.hover &&
         css`
             cursor: pointer;
             opacity: 1;
@@ -80,7 +77,7 @@ const CategoryBase = styled.div<BaseProps>`
     ${(props) =>
         props.disabled &&
         css`
-            opacity: .4;
+            opacity: 0.4;
             /*.content,
             .action {
                 color: var(--tertiary-foreground);
@@ -133,17 +130,19 @@ export default function CategoryButton({
     account,
     disabled,
     onClick,
+    hover,
     action,
 }: Props) {
     return (
         <CategoryBase
+            hover={hover || typeof onClick !== "undefined"}
             onClick={onClick}
             disabled={disabled}
             account={account}>
             {icon}
             <div class="content">
                 <div className="title">{children}</div>
-                
+
                 <div className="description">{description}</div>
             </div>
             <div class="action">
@@ -159,4 +158,4 @@ export default function CategoryButton({
             </div>
         </CategoryBase>
     );
-}
+}