Button

src/components/Inputs.tsx

@@ -1,4 +1,4 @@
-import { createRef, InputHTMLAttributes, useState } from "react"
+import { createRef, HTMLAttributes, InputHTMLAttributes, useState } from "react"
 import { overrideTailwindClasses } from '../general'
 import { SVGEye } from "./Icons"
 
@@ -74,3 +74,23 @@ export function InputPassword({ invalid, ...props }: InputProps) {
         </span>
     )
 }
+
+interface ButtonProps extends HTMLAttributes<HTMLButtonElement> { }
+
+export function Button({ children, ...props }: ButtonProps) {
+    return (
+        <button className={`
+            rounded-full outline-none
+            bg-gray-800 focus:bg-gray-700
+            hover:bg-gray-700 active:bg-gray-800
+            fill-gray-400 focus:fill-gray-200
+            px-3 py-2
+            shadow-glow shadow-transparent
+            focus:outline-blue-500 focus:shadow-blue-500
+            transition-all
+        `}
+            {...props}>
+            {children}
+        </button>
+    )
+}

src/pages/Layout.tsx

@@ -1,6 +1,7 @@
 import { Outlet, Navigate, NavLink } from 'react-router-dom'
 import { isLoggedIn, LoginState, usePersistentState } from '../authorization'
 import { SVGHamburger } from '../components/Icons'
+import { Button } from '../components/Inputs'
 
 function SLink({ to, children, important }: {
     to: string,
@@ -40,20 +41,9 @@ export function Layout() {
                     bg-gray-700 text-gray-400
                     ${collapsed ? "w-14" : "w-48"}
                 `}>
-                <label className={`
+                <Button onClick={() => setCollapsed(!collapsed)}>
-                    inline-block
-                    rounded-full
-                    focus:bg-gray-700 hover:bg-gray-700 active:bg-gray-800
-                    fill-gray-400 focus:fill-gray-200
-                    px-3 py-2 mx-2
-                    shadow-glow
-                    outline-none shadow-transparent
-                    focus:outline-blue-500 focus:shadow-blue-500
-                    transition-all
-                `}>
-                    <input className="hidden" type="checkbox" checked={collapsed} onChange={e => setCollapsed(e.target.checked)} />
                     <SVGHamburger />
-                </label>
+                </Button>
                 <div className="menu">
                     <SLink to="/">Dashboard</SLink>
                     <SLink to="/bots">Bots</SLink>

src/pages/Login.tsx

@@ -2,7 +2,7 @@ import { useMemo, useState } from "react"
 import { Navigate } from "react-router-dom"
 import { authorizeLogin, isLoggedIn, LoginState, useClearToken } from "../authorization"
 import { SVGRightArrow } from "../components/Icons"
-import { InputPassword, InputText } from "../components/Inputs"
+import { Button, InputPassword, InputText } from "../components/Inputs"
 
 export function Login() {
     var [username, setUsername] = useState("")
@@ -36,18 +36,9 @@ export function Login() {
                         onChange={e => setPassword(e.target.value)} />
                 </div>
                 <div className="flex justify-center items-center align-middle my-2">
-                    <button className={`
+                    <Button>
-                        rounded-full outline-none
-                        bg-gray-800 focus:bg-gray-700
-                        hover:bg-gray-700 active:bg-gray-800
-                        fill-gray-400 focus:fill-gray-200
-                        px-3 py-2
-                        shadow-glow shadow-transparent
-                        focus:outline-blue-500 focus:shadow-blue-500
-                        transition-all
-                    `}>
                         <SVGRightArrow />
-                    </button>
+                    </Button>
                 </div>
             </form>
             {