diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/index.css | 93 | ||||
| -rw-r--r-- | src/index.tsx | 3 | ||||
| -rw-r--r-- | src/pages/ProjectsList.tsx | 20 |
3 files changed, 65 insertions, 51 deletions
diff --git a/src/index.css b/src/index.css index 301b6c2..370f29b 100644 --- a/src/index.css +++ b/src/index.css @@ -8,7 +8,7 @@ --text: #ffffff; --subtext: #dddddd; - font-family: 'Inter', Helvetica, sans-serif; + font-family: 'Inter Variable', Helvetica, sans-serif; box-sizing: border-box; } @@ -22,48 +22,9 @@ 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; + margin-bottom: 1rem; padding: 0; } @@ -101,12 +62,49 @@ a { color: color-mix(in srgb, var(--text) 40%, var(--primary)); } +a.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); + } +} + article { background-color: var(--surface); border-radius: 1rem; padding: 1rem; } +ul.contained { + list-style: none; + padding: 0; + display: flex; + flex-direction: column; + + li { + --border: 2px solid var(--surface); + border-top: var(--border); + &:last-child { + border-bottom: var(--border); + } + height: 3rem; + display: flex; + > * { + flex-grow: 1; + } + } +} + form { display: flex; flex-direction: column; @@ -114,6 +112,19 @@ form { max-width: 26rem; } +fieldset.group { + border: none; + display: flex; + flex-direction: row; + align-items: baseline; + padding: 0; + + button, input[type="submit"] { + height: calc(2.5rem + 2px); + background-image: none; + } +} + label { display: flex; flex-direction: column; diff --git a/src/index.tsx b/src/index.tsx index b49ee66..bed8b66 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -8,12 +8,13 @@ import { NodeEditor } from './NodeEditor.tsx'; import './index.css'; export const App = () => { - const pb = useMemo(() => new PocketBase(`https://${window.location.hostname}:8080/`)); + const pb = useMemo(() => new PocketBase(`/`)); return ( <Pb.Provider value={pb}> <header> <a class="title action" href="/">DataNodes</a> <nav> + < a class="action" href="/play">Try Now</a> <a class="action" href="/login">Log In</a> <a class="action" href="/signup">Sign Up</a> </nav> diff --git a/src/pages/ProjectsList.tsx b/src/pages/ProjectsList.tsx index b30c73e..820c457 100644 --- a/src/pages/ProjectsList.tsx +++ b/src/pages/ProjectsList.tsx @@ -30,18 +30,20 @@ export const ProjectsList = ({ user }) => { ); } return ( - <main> - <h1>{user}</h1> + <main class="container"> + <h1>{user}'s Projects</h1> <form onSubmit={onCreateProject}> - <label> - Name: - <input type="text" value={projectName} onInput={e => projectName.value = e.target.value} /> - </label> - <button>Create roject</button> + <fieldset class="group"> + <label> + Name + <input type="text" placeholder="Project name" value={projectName} onInput={e => projectName.value = e.target.value} /> + </label> + <input type="submit" value="Create project" /> + </fieldset> </form> - <ul> + <ul class="contained"> {projects.value.items.map(p => ( - <li><a href={`/${user}/${p.name}`}>{p.name}</a></li> + <li><a class="action" href={`/${user}/${p.name}`}>{p.name}</a></li> ))} </ul> </main> |