lint extravaganza

src/components/layout/FullscreenModal.tsx

@@ -15,8 +15,13 @@ type FullscreenModalProps = {
 }
 
 export function FullscreenModal(props: FullscreenModalProps) {
+
+    const onNice = () => {
+        props.onConfirm ? props.onConfirm() : props.setOpen(false)
+    }
+
     return (
-        <Dialog.Root open={props.open} onOpenChange={(isOpen) => props.setOpen(isOpen)}>
+        <Dialog.Root open={props.open} onOpenChange={props.setOpen}>
             <Dialog.Portal>
                 <div class={DIALOG_POSITIONER}>
                     <Dialog.Content class={DIALOG_CONTENT}>
@@ -34,7 +39,7 @@ export function FullscreenModal(props: FullscreenModalProps) {
                             {props.children}
                         </Dialog.Description>
                         <div class="w-full flex">
-                            <Button onClick={(_) => props.onConfirm ? props.onConfirm() : props.setOpen(false)}>{props.confirmText ?? "Nice"}</Button>
+                            <Button onClick={onNice}>{props.confirmText ?? "Nice"}</Button>
                         </div>
                     </Dialog.Content>
                 </div>

src/components/layout/Linkify.tsx

@@ -23,7 +23,7 @@ export default function Linkify(props: LinkifyProps): JSX.Element {
             links.push(beforeLink);
         }
 
-        links.push(<a href={href} target="_blank" rel="noopener noreferrer">{link}</a>);
+        links.push(<a href={href} class="break-all" target="_blank" rel="noopener noreferrer">{link}</a>);
     }
 
     const remainingText = text.slice(lastIndex);

src/components/layout/Radio.tsx

@@ -7,7 +7,7 @@ type Choices = { value: string, label: string, caption: string }[]
 export function StyledRadioGroup(props: { value: string, choices: Choices, onValueChange: (value: string) => void, small?: boolean, accent?: "red" | "white" }) {
     return (
         // TODO: rewrite this with CVA, props are bad for tailwind
-        <RadioGroup.Root value={props.value} onChange={(e) => props.onValueChange(e)}
+        <RadioGroup.Root value={props.value} onChange={props.onValueChange}
             class={"grid w-full gap-4"}
             classList={{ "grid-cols-2": props.choices.length === 2, "grid-cols-3": props.choices.length === 3, "gap-2": props.small }}
         >

src/components/layout/index.tsx

@@ -1,4 +1,4 @@
-import { JSX, ParentComponent, Show, Suspense, createResource, createSignal } from "solid-js"
+import { JSX, ParentComponent, Show, Suspense, createResource } from "solid-js"
 import Linkify from "./Linkify"
 import { Button, ButtonLink } from "./Button"
 import { Checkbox as KCheckbox, Separator } from "@kobalte/core"
@@ -6,6 +6,7 @@ import { useMegaStore } from "~/state/megaStore"
 import check from "~/assets/icons/check.svg"
 import { MutinyTagItem } from "~/utils/tags"
 import { generateGradient } from "~/utils/gradientHash"
+import close from "~/assets/icons/close.svg"
 
 export {
     Button,
@@ -128,8 +129,8 @@ export const NiceP: ParentComponent = (props) => {
 
 export const TinyButton: ParentComponent<{ onClick: () => void, tag?: MutinyTagItem }> = (props) => {
     // TODO: don't need to run this if it's not a contact
-    const [gradient] = createResource(props.tag?.name, async (name: string) => {
-        return generateGradient(name || "?")
+    const [gradient] = createResource(async () => {
+        return generateGradient(props.tag?.name || "?")
     })
 
     const bg = () => (props.tag?.name && props.tag?.kind === "Contact") ? gradient() : "rgb(255 255 255 / 0.1)"
@@ -161,4 +162,12 @@ export function Checkbox(props: { label: string, checked: boolean, onChange: (ch
             <KCheckbox.Label class="flex-1 text-xl font-light">{props.label}</KCheckbox.Label>
         </KCheckbox.Root>
     )
+}
+
+export function ModalCloseButton() {
+    return (<button
+    class="self-center justify-self-center hover:bg-white/10 rounded-lg active:bg-m-blue"
+>
+  <img src={close} alt="Close" class="w-8 h-8" />
+</button>)
 }