From ef28973b0683823d2f3e1cee128055b18530d522 Mon Sep 17 00:00:00 2001 From: Sam Nystrom Date: Tue, 12 Mar 2024 18:58:36 +0000 Subject: Style login and signup pages --- src/NodeEditor.module.css | 11 +++ src/assets/down-arrow.svg | 3 - src/assets/right-arrow.svg | 3 - src/icons/arrow-right.svg | 3 + src/icons/chevron-down.svg | 3 + src/icons/chevron-right.svg | 3 + src/index.css | 164 ++++++++++++++++++++++++++++++++++++++++---- src/index.tsx | 9 ++- src/node.module.css | 4 +- src/pages/LogIn.tsx | 17 +++-- src/pages/SignUp.tsx | 27 ++++---- 11 files changed, 208 insertions(+), 39 deletions(-) delete mode 100644 src/assets/down-arrow.svg delete mode 100644 src/assets/right-arrow.svg create mode 100644 src/icons/arrow-right.svg create mode 100644 src/icons/chevron-down.svg create mode 100644 src/icons/chevron-right.svg (limited to 'src') 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/assets/down-arrow.svg b/src/assets/down-arrow.svg deleted file mode 100644 index eefe5ef..0000000 --- a/src/assets/down-arrow.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/src/assets/right-arrow.svg b/src/assets/right-arrow.svg deleted file mode 100644 index 7ac9997..0000000 --- a/src/assets/right-arrow.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file 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 @@ + + + \ No newline at end of file diff --git a/src/icons/chevron-down.svg b/src/icons/chevron-down.svg new file mode 100644 index 0000000..eefe5ef --- /dev/null +++ b/src/icons/chevron-down.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/icons/chevron-right.svg b/src/icons/chevron-right.svg new file mode 100644 index 0000000..7ac9997 --- /dev/null +++ b/src/icons/chevron-right.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file 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 ( +
+ DataNodes + +
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 ( +
+

Log In

+

+ Don't have an account? Sign up +

+
- +
+
); }; \ 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 ( -
-
+
+

Sign Up

+

+ Already have an account? Log in +

+
- +
-
); }; \ No newline at end of file -- cgit v1.2.3