modal x

src/components/Icons.tsx

@@ -35,7 +35,7 @@ export function SVGPlus({ height = "2em" }: IconProps) {
     )
 }
 
-export function SVGx({ height = "2em" }: IconProps) {
+export function SVGx({ height = "1em" }: IconProps) {
     return (
         <svg viewBox="0 0 128 128" height={height}>
             <path d="M8.882 23.024c-3.903-3.903-3.903-10.24 0-14.142 3.903-3.903 10.24-3.903 14.142 0l96.094 96.094c3.903 3.903 3.903 10.24 0 14.142-3.903 3.903-10.24 3.903-14.142 0L8.882 23.024Z" />

src/pages/Bots.tsx

@@ -1,7 +1,7 @@
 import { useMemo, useState } from "react"
 import { Link } from "react-router-dom"
 import { authFetch, useAuthFetchRepeat } from "../authorization"
-import { SVGPlus } from "../components/Icons"
+import { SVGPlus, SVGx } from "../components/Icons"
 import { Button, InputPassword } from "../components/Inputs"
 import { overrideTailwindClasses } from "../general"
 
@@ -112,15 +112,24 @@ function AddBotModal({ visible, onClose }: { visible: boolean, onClose: () => vo
                 z-0
             `)} onClick={() => onClose()} />
             <div className={`
+                relative
                 bg-gray-800
                 rounded-xl
                 p-4
                 z-10
             `}>
+                <Button
+                    className="absolute px-2 py-2 mx-6 my-3 top-0 right-0 fill-gray-300"
+                    onClick={(e) => {
+                        e.preventDefault()
+                        onClose()
+                    }}>
+                    <SVGx />
+                </Button>
                 <div className={`px-3 pb-3`}>
                     Bot Token
                 </div>
-                <InputPassword invalid={invalid} altColor className="shadow-none" onChange={e => setToken(e.target.value)} />
+                <InputPassword invalid={invalid} altColor className="shadow-none" value={token} onChange={e => setToken(e.target.value)} />
                 <Button>
                     Add
                 </Button>