zomo/discord-retokenizer-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

better styling and abstraction

Browse Source
This commit is contained in:
ashley zomo
2022-12-27 22:27:02 -06:00
parent d299ef727e
commit 8ee6abe99a
6 changed files with 161 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -23,6 +23,7 @@
"react-dom": "^18.2.0",
"react-router-dom": "^6.4.5",
"sass": "^1.56.2",
"tailwind-override": "^0.6.1",
"tailwindcss": "^3.2.4",
"typescript": "^4.9.4",
"vite": "^4.0.0"

36
src/components/Icons.tsx Normal file
View File

@@ -0,0 +1,36 @@
export function SVGRightArrow() {
return (
<svg viewBox="0 0 1000 1000" height="1rem">
<path d="M619.5,899.5l350-350c27.3-27.3,27.3-71.7,0-99l-350-350c-27.3-27.3-71.7-27.3-99,0c-27.3,27.3-27.3,71.7,0,99L751,430H80c-38.7,0-70,31.3-70,70c0,38.7,31.3,70,70,70h671L520.5,800.5C506.8,814.2,500,832.1,500,850c0,17.9,6.8,35.8,20.5,49.5C547.8,926.8,592.2,926.8,619.5,899.5z" />
</svg>
)
}
export function SVGEye() {
return (
<svg height="1.5rem" viewBox="0 0 128 128">
<g transform="matrix(1.75,0,0,1.75,-66.6667,-17.3333)">
<path d="M74.667,40.381C81.815,40.381 87.619,46.185 87.619,53.333C87.619,60.482 81.815,66.286 74.667,66.286C67.518,66.286 61.714,60.482 61.714,53.333C61.714,46.185 67.518,40.381 74.667,40.381ZM74.667,44.952C70.041,44.952 66.286,48.708 66.286,53.333C66.286,57.959 70.041,61.714 74.667,61.714C79.292,61.714 83.048,57.959 83.048,53.333C83.048,48.708 79.292,44.952 74.667,44.952Z" />
</g>
<g transform="matrix(1,0,0,1,0,12)">
<path d="M13.524,46.564C11.979,48.141 9.445,48.167 7.868,46.623C6.291,45.078 6.264,42.543 7.809,40.966C22.092,26.385 41.997,17.333 64,17.333C86.003,17.333 105.908,26.385 120.191,40.966C121.736,42.543 121.709,45.078 120.132,46.623C118.555,48.167 116.021,48.141 114.476,46.564C101.646,33.466 83.765,25.333 64,25.333C44.235,25.333 26.354,33.466 13.524,46.564Z" />
</g>
</svg>
)
}
export function SVGHamburger() {
return (
<svg height="1.5em" viewBox="0 0 3000 3000">
<g transform="matrix(1.50981,0,0,1.2859,-338.198,86.7981)">
<path d="M2211,435.5C2211,349.677 2151.66,280 2078.56,280L356.438,280C283.344,280 224,349.677 224,435.5C224,521.323 283.344,591 356.438,591L2078.56,591C2151.66,591 2211,521.323 2211,435.5Z" />
</g>
<g transform="matrix(1.50981,0,0,1.2859,-338.198,939.991)">
<path d="M2211,435.5C2211,349.677 2151.66,280 2078.56,280L356.438,280C283.344,280 224,349.677 224,435.5C224,521.323 283.344,591 356.438,591L2078.56,591C2151.66,591 2211,521.323 2211,435.5Z" />
</g>
<g transform="matrix(-1.50981,1.84899e-16,-1.57477e-16,-1.2859,3338.2,2913.2)">
<path d="M2211,435.5C2211,349.677 2151.66,280 2078.56,280L356.438,280C283.344,280 224,349.677 224,435.5C224,521.323 283.344,591 356.438,591L2078.56,591C2151.66,591 2211,521.323 2211,435.5Z" />
</g>
</svg>
)
}

76
src/components/Inputs.tsx Normal file
View File

@@ -0,0 +1,76 @@
import { createRef, InputHTMLAttributes, useState } from "react"
import { overrideTailwindClasses } from '../general'
import { SVGEye } from "./Icons"
interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
invalid?: boolean
}
export function InputText({ invalid, ...props }: InputProps) {
var inputRef = createRef<HTMLInputElement>()
return (
<input type="text" ref={inputRef} {...props}
className={overrideTailwindClasses(`
rounded-full
px-3 py-1 mx-2
w-64
bg-gray-800 focus:bg-gray-700
text-gray-400 focus:text-gray-200
shadow-glow
outline-none shadow-transparent
${invalid ? "outline-red-600 shadow-red-600" : ""}
focus:outline-blue-500 focus:shadow-blue-500
transition-all
`)} />
)
}
export function InputPassword({ invalid, ...props }: InputProps) {
var inputRef = createRef<HTMLInputElement>()
var [focused, setFocused] = useState(false)
var [showPassword, setShowPassword] = useState(false)
var toggleShowPassword = () => {
setShowPassword(!showPassword)
inputRef.current?.focus()
}
return (
<span
onFocus={() => setFocused(true)}
onBlur={() => setFocused(false)}
className={overrideTailwindClasses(`
flex
flex-row
rounded-full
px-3 py-1 mx-2
w-64
bg-gray-800
shadow-glow
outline-none shadow-transparent
${invalid ? "outline-red-600 shadow-red-600" : ""}
${focused ? "outline-blue-500 shadow-blue-500 bg-gray-700" : ""}
transition-all
`)}>
<input type={showPassword ? "text" : "password"}
ref={inputRef}
{...props}
className={`
w-1 flex-grow
bg-transparent
text-gray-400 focus:text-gray-200
outline-none
`} />
<span className={overrideTailwindClasses(`
h-full
pl-2
border-l border-gray-600
${focused ? "opacity-100" : "opacity-0"}
transition-all
${showPassword ? "fill-blue-500" : "fill-gray-400"}
`)} onClick={() => toggleShowPassword()}>
<SVGEye />
</span>
</span>
)
}

8
src/general.ts Normal file
View File

@@ -0,0 +1,8 @@
import { overrideTailwindClasses as otc, Options } from 'tailwind-override'
export function overrideTailwindClasses(
classNamesString: string,
optionsArgs?: Partial<Options>
) {
return otc(classNamesString, optionsArgs).trim()
}

38
src/pages/Layout.tsx
View File

@@ -1,5 +1,6 @@
import { Outlet, Navigate, NavLink } from 'react-router-dom'
import { isLoggedIn, LoginState, usePersistentState } from '../authorization'
import { SVGHamburger } from '../components/Icons'
function SLink({ to, children, important }: {
to: string,
@@ -31,24 +32,27 @@ export function Layout() {
isLoggedIn() === LoginState.No && <Navigate to="/login" replace={true} />
}
<div
className={
"fixed top-0 left-0 h-full overflow-hidden bg-gray-700 text-gray-400 "
+ (collapsed ? "w-14" : "w-48")
}>
<label className="inline-block rounded-full outline-none 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 shadow-transparent invalid:outline-red-600 invalid:shadow-red-600 focus:outline-blue-500 focus:shadow-blue-500 transition-all">
{/* TODO I COPIED THE ABOVE FROM LOGIN */}
className={`
fixed
top-0 left-0
h-full
overflow-hidden
bg-gray-700 text-gray-400
${collapsed ? "w-14" : "w-48"}
`}>
<label className={`
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)} />
<svg height="24px" viewBox="0 0 3000 3000">
<g transform="matrix(1.50981,0,0,1.2859,-338.198,86.7981)">
<path d="M2211,435.5C2211,349.677 2151.66,280 2078.56,280L356.438,280C283.344,280 224,349.677 224,435.5C224,521.323 283.344,591 356.438,591L2078.56,591C2151.66,591 2211,521.323 2211,435.5Z" />
</g>
<g transform="matrix(1.50981,0,0,1.2859,-338.198,939.991)">
<path d="M2211,435.5C2211,349.677 2151.66,280 2078.56,280L356.438,280C283.344,280 224,349.677 224,435.5C224,521.323 283.344,591 356.438,591L2078.56,591C2151.66,591 2211,521.323 2211,435.5Z" />
</g>
<g transform="matrix(-1.50981,1.84899e-16,-1.57477e-16,-1.2859,3338.2,2913.2)">
<path d="M2211,435.5C2211,349.677 2151.66,280 2078.56,280L356.438,280C283.344,280 224,349.677 224,435.5C224,521.323 283.344,591 356.438,591L2078.56,591C2151.66,591 2211,521.323 2211,435.5Z" />
</g>
</svg>
<SVGHamburger />
</label>
<div className="menu">
<SLink to="/">Dashboard</SLink>

37
src/pages/Login.tsx
View File

@@ -1,6 +1,8 @@
import { createRef, useEffect, 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"
export function Login() {
var [username, setUsername] = useState("")
@@ -25,30 +27,29 @@ export function Login() {
}
}, [username, password])
useEffect(() => {
if (loginState === LoginState.Invalid) {
usernameRef.current?.setCustomValidity("Invalid username or password")
passwordRef.current?.setCustomValidity("Invalid username or password")
} else {
usernameRef.current?.setCustomValidity("")
passwordRef.current?.setCustomValidity("")
}
}, [loginState])
return (
<div className="flex w-full h-full justify-center items-center align-middle">
<form onSubmit={login}>
<div className="flex justify-center items-center align-middle my-2">
<input type="text" ref={usernameRef} onChange={e => setUsername(e.target.value)}
className="rounded-full outline-none bg-gray-800 focus:bg-gray-700 text-gray-400 focus:text-gray-200 px-3 py-1 mx-2 shadow-glow shadow-transparent invalid:outline-red-600 invalid:shadow-red-600 focus:outline-blue-500 focus:shadow-blue-500 transition-all" />
<input type="password" ref={passwordRef} onChange={e => setPassword(e.target.value)}
className="rounded-full outline-none bg-gray-800 focus:bg-gray-700 text-gray-400 focus:text-gray-200 px-3 py-1 mx-2 shadow-glow shadow-transparent invalid:outline-red-600 invalid:shadow-red-600 focus:outline-blue-500 focus:shadow-blue-500 transition-all" />
<InputText
invalid={loginState === LoginState.Invalid}
onChange={e => setUsername(e.target.value)} />
<InputPassword
invalid={loginState === LoginState.Invalid}
onChange={e => setPassword(e.target.value)} />
</div>
<div className="flex justify-center items-center align-middle my-2">
<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 invalid:outline-red-600 invalid:shadow-red-600 focus:outline-blue-500 focus:shadow-blue-500 transition-all">
<svg viewBox="0 0 1000 1000" height="16px">
<path d="M619.5,899.5l350-350c27.3-27.3,27.3-71.7,0-99l-350-350c-27.3-27.3-71.7-27.3-99,0c-27.3,27.3-27.3,71.7,0,99L751,430H80c-38.7,0-70,31.3-70,70c0,38.7,31.3,70,70,70h671L520.5,800.5C506.8,814.2,500,832.1,500,850c0,17.9,6.8,35.8,20.5,49.5C547.8,926.8,592.2,926.8,619.5,899.5z" />
</svg>
<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
`}>
<SVGRightArrow />
</button>
</div>
</form>