diff options
| -rw-r--r-- | src/NodeEditor.module.css | 11 | ||||
| -rw-r--r-- | src/icons/arrow-right.svg | 3 | ||||
| -rw-r--r-- | src/icons/chevron-down.svg (renamed from src/assets/down-arrow.svg) | 0 | ||||
| -rw-r--r-- | src/icons/chevron-right.svg (renamed from src/assets/right-arrow.svg) | 0 | ||||
| -rw-r--r-- | src/index.css | 164 | ||||
| -rw-r--r-- | src/index.tsx | 9 | ||||
| -rw-r--r-- | src/node.module.css | 4 | ||||
| -rw-r--r-- | src/pages/LogIn.tsx | 17 | ||||
| -rw-r--r-- | src/pages/SignUp.tsx | 27 |
9 files changed, 202 insertions, 33 deletions
diff --git a/src/NodeEditor.module.css b/src/NodeEditor.module.css index caa549e..10cedc3 100644 --- a/src/NodeEditor.module.css +++ b/src/NodeEditor.module.css @@ -1,3 +1,14 @@ +:global(:root) { + --base: #122236; + --surface: #242424; + --overlay: #484848; + --primary: #1c4c87; + + --data-any: #36c965; + --data-float: #a0a0a0; + --data-vector: #5e29d9; +} + .link { fill: none; stroke: var(--data-float); diff --git a/src/icons/arrow-right.svg b/src/icons/arrow-right.svg new file mode 100644 index 0000000..4c6dc1f --- /dev/null +++ b/src/icons/arrow-right.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="2.0" width="20" height="20" viewBox="0 0 20 20"> + <path fill="none" stroke="white" stroke-width="2" stroke-linecap="square" d="M 0 10 h 17.5 m -6 -7 l 7 7 l -7 7" /> +</svg>
\ No newline at end of file diff --git a/src/assets/down-arrow.svg b/src/icons/chevron-down.svg index eefe5ef..eefe5ef 100644 --- a/src/assets/down-arrow.svg +++ b/src/icons/chevron-down.svg diff --git a/src/assets/right-arrow.svg b/src/icons/chevron-right.svg index 7ac9997..7ac9997 100644 --- a/src/assets/right-arrow.svg +++ b/src/icons/chevron-right.svg diff --git a/src/index.css b/src/index.css index aac86b5..19f1e8b 100644 --- a/src/index.css +++ b/src/index.css @@ -1,18 +1,15 @@ -/*@font-face { +@font-face { font-family: 'Inter'; src: url('Inter.ttf'); -}*/ +} :root { - --base: #121212; - --surface: #242424; - --overlay: #484848; + --base: hsl(0, 0%, 10%); + --surface: hsl(0, 0%, 15%); + --overlay: hsl(0, 0%, 20%); + --primary: hsl(220, 100%, 50%); --text: #ffffff; - --primary: #1c4c87; - - --data-any: #36c965; - --data-float: #a0a0a0; - --data-vector: #5e29d9; + --subtext: #dddddd; font-family: 'Inter', Helvetica, sans-serif; box-sizing: border-box; @@ -22,7 +19,148 @@ body { background-color: var(--base); color: var(--text); margin: 0; - width: 100vw; - height: 100vh; - overflow: hidden; +} + +main { + margin: 2rem; +} + +header { + height: 3rem; + border-bottom: 1px solid var(--overlay); + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + + > .title { + padding-left: 1rem; + font-size: 1rem; + font-weight: 500; + text-decoration: none; + color: var(--text); + } + + nav { + height: 100%; + display: flex; + flex-direction: row; + } + + .action { + color: var(--text); + text-decoration: none; + padding: 0 1rem; + height: 100%; + display: flex; + align-items: center; + + &:hover { + background-color: var(--surface); + } + + &:focus { + outline: 2px solid var(--primary); + } + } +} + +h1 { + margin: 0; + padding: 0; +} + +h1, h2 { + font-weight: 500; +} + +.container { + width: 50%; + margin: 1rem auto; +} + +.grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 2rem; + grid-auto-rows: minmax(100px, auto); +} + +.row { + display: flex; + flex-direction: row; +} + +hr { + border: 1px solid var(--overlay); + width: 100%; +} + +p { + margin: 0; +} + +a { + color: color-mix(in srgb, var(--text) 40%, var(--primary)); +} + +article { + background-color: var(--surface); + border-radius: 1rem; + padding: 1rem; +} + +form { + display: flex; + flex-direction: column; + gap: 1rem; + max-width: 26rem; +} + +label { + display: flex; + flex-direction: column; + gap: 0.5rem; + color: var(--subtext); +} + +input { + background-color: var(--surface); + color: var(--text); + height: 2.5rem; + padding: 0 0.5rem; + border: none; + border-bottom: 2px solid color-mix(in srgb, white 20%, var(--surface)); + font-size: 1rem; + + &:focus { + outline: 2px solid var(--primary); + border-bottom: none; + margin-bottom: 2px; + } +} + +button, input[type="submit"] { + background-color: var(--primary); + color: var(--text); + width: 100%; + height: 3rem; + font-size: 1rem; + border: 1px solid var(--primary); + cursor: pointer; + + &:focus { + border-color: var(--base); + outline: 2px solid var(--primary); + } +} + +input[type="submit"] { + margin-top: 1rem; + padding: 0 1rem; + text-align: left; + align-self: flex-end; + background-image: url('icons/arrow-right.svg'); + background-position: right 1rem center; + background-repeat: no-repeat; }
\ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index 610fb70..b49ee66 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,5 +1,5 @@ import { render } from 'preact'; -import { useMemo } from 'preact/hooks'; +import { useEffect, useMemo } from 'preact/hooks'; import { Router } from 'preact-router'; import PocketBase from 'pocketbase'; import { Pb } from './pb.ts'; @@ -11,6 +11,13 @@ export const App = () => { const pb = useMemo(() => new PocketBase(`https://${window.location.hostname}:8080/`)); return ( <Pb.Provider value={pb}> + <header> + <a class="title action" href="/">DataNodes</a> + <nav> + <a class="action" href="/login">Log In</a> + <a class="action" href="/signup">Sign Up</a> + </nav> + </header> <Router> <Home path="/" /> <SignUp path="/signup" /> diff --git a/src/node.module.css b/src/node.module.css index 76ef2df..2a65c56 100644 --- a/src/node.module.css +++ b/src/node.module.css @@ -46,10 +46,10 @@ padding-left: 6px; margin-bottom: 4px; border-radius: 6px 6px 0 0; - list-style-image: url('assets/down-arrow.svg'); + list-style-image: url('icons/chevron-down.svg'); } &:not([open]) summary { - list-style-image: url('assets/right-arrow.svg'); + list-style-image: url('icons/chevron-right.svg'); } ul { diff --git a/src/pages/LogIn.tsx b/src/pages/LogIn.tsx index c787dce..55b2109 100644 --- a/src/pages/LogIn.tsx +++ b/src/pages/LogIn.tsx @@ -18,16 +18,23 @@ export const LogIn = () => { }; return ( + <main> <form onSubmit={onSubmit}> + <h1>Log In</h1> + <p> + Don't have an account? <a href="/signup">Sign up</a> + </p> + <hr /> <label> - Email: - <input type="text" value={email} onInput={e => email.value = e.target.value} /> + Email + <input type="text" placeholder="Email" value={email} onInput={e => email.value = e.target.value} /> </label> <label> - Password: - <input type="password" value={password} onInput={e => password.value = e.target.value} /> + Password + <input type="password" placeholder="Password" value={password} onInput={e => password.value = e.target.value} /> </label> - <button>Log In</button> + <input type="submit" value="Continue" /> </form> + </main> ); };
\ No newline at end of file diff --git a/src/pages/SignUp.tsx b/src/pages/SignUp.tsx index 99cc7d6..b707b7d 100644 --- a/src/pages/SignUp.tsx +++ b/src/pages/SignUp.tsx @@ -26,28 +26,31 @@ export const SignUp = () => { }; return ( - <main class="container"> - <article> + <main> <form onSubmit={onSubmit}> + <h1>Sign Up</h1> + <p> + Already have an account? <a href="/login">Log in</a> + </p> + <hr /> <label> - Username: - <input type="text" value={username} onInput={e => username.value = e.target.value} /> + Username + <input type="text" placeholder="Username" value={username} onInput={e => username.value = e.target.value} /> </label> <label> - Email: - <input type="text" value={email} onInput={e => email.value = e.target.value} /> + Email + <input type="text" placeholder="Email" value={email} onInput={e => email.value = e.target.value} /> </label> <label> - Password: - <input type="password" value={password} onInput={e => password.value = e.target.value} /> + Password + <input type="password" placeholder="Password" value={password} onInput={e => password.value = e.target.value} /> </label> <label> - Confirm Password: - <input type="password" value={confirm} onInput={e => confirm.value = e.target.value} /> + Confirm password + <input type="password" placeholder="Confirm password" value={confirm} onInput={e => confirm.value = e.target.value} /> </label> - <button>Sign Up</button> + <input type="submit" value="Continue" /> </form> - </article> </main> ); };
\ No newline at end of file |
