feat(www): Finish up on the onboarding (#210)

Merging this prematurely to make sure the team is on the same boat... like dang! We need to find a better way to do this. 

Plus it has become too big
This commit is contained in:
Wanjohi
2025-03-26 02:21:53 +03:00
committed by GitHub
parent 957eca7794
commit f62fc1fb4b
106 changed files with 6329 additions and 866 deletions

View File

@@ -6,13 +6,18 @@ import '@fontsource/geist-sans/600.css';
import '@fontsource/geist-sans/700.css';
import '@fontsource/geist-sans/800.css';
import '@fontsource/geist-sans/900.css';
import { Text } from '@nestri/www/ui/text';
import { styled } from "@macaron-css/solid";
import { useStorage } from './providers/account';
import { CreateTeamComponent } from './pages/new';
import { darkClass, lightClass, theme } from './ui/theme';
import { AuthProvider, useAuth } from './providers/auth';
import { Screen as FullScreen } from '@nestri/www/ui/layout';
import { TeamRoute } from '@nestri/www/pages/team';
import { OpenAuthProvider } from "@openauthjs/solid";
import { NotFound } from '@nestri/www/pages/not-found';
import { Navigate, Route, Router } from "@solidjs/router";
import { globalStyle, macaron$ } from "@macaron-css/core";
import { useStorage } from '@nestri/www/providers/account';
import { CreateTeamComponent } from '@nestri/www/pages/new';
import { darkClass, lightClass, theme } from '@nestri/www/ui/theme';
import { AccountProvider, useAccount } from '@nestri/www/providers/account';
import { Component, createSignal, Match, onCleanup, Switch } from 'solid-js';
const Root = styled("div", {
@@ -34,14 +39,19 @@ globalStyle("html", {
// Hardcode colors
"@media": {
"(prefers-color-scheme: light)": {
backgroundColor: "#f5f5f5",
backgroundColor: "rgba(255,255,255,0.8)",
},
"(prefers-color-scheme: dark)": {
backgroundColor: "#1e1e1e",
backgroundColor: "rgb(19,21,23)",
},
},
});
globalStyle("dialog:modal", {
maxHeight: "unset",
maxWidth: "unset"
})
globalStyle("h1, h2, h3, h4, h5, h6, p", {
margin: 0,
});
@@ -82,44 +92,54 @@ export const App: Component = () => {
const storage = useStorage();
return (
<Root class={theme() === "light" ? lightClass : darkClass} id="styled">
<Router>
<Route
path="*"
component={(props) => (
<AuthProvider>
{props.children}
</AuthProvider>
// props.children
)}
>
<Route path="new" component={CreateTeamComponent} />
<OpenAuthProvider
issuer={import.meta.env.VITE_AUTH_URL}
clientID="web"
>
<Root class={theme() === "light" ? lightClass : darkClass} id="styled">
<Router>
<Route
path="/"
component={() => {
const auth = useAuth();
return (
<Switch>
<Match when={auth.current.teams.length > 0}>
<Navigate
href={`/${(
auth.current.teams.find(
(w) => w.id === storage.value.team,
) || auth.current.teams[0]
).slug
}`}
/>
</Match>
<Match when={true}>
<Navigate href={`/new`} />
</Match>
</Switch>
);
}}
/>
{/* <Route path="*" component={() => <NotFound />} /> */}
</Route>
</Router>
</Root>
path="*"
component={(props) => (
<AccountProvider
loadingUI={
<FullScreen>
<Text weight='semibold' spacing='xs' size="3xl" font="heading" >Confirming your identity&hellip;</Text>
</FullScreen>
}>
{props.children}
</AccountProvider>
)}
>
<Route path=":teamSlug">{TeamRoute}</Route>
<Route path="new" component={CreateTeamComponent} />
<Route
path="/"
component={() => {
const account = useAccount();
return (
<Switch>
<Match when={account.current.teams.length > 0}>
<Navigate
href={`/${(
account.current.teams.find(
(w) => w.id === storage.value.team,
) || account.current.teams[0]
).slug
}`}
/>
</Match>
<Match when={true}>
<Navigate href={`/new`} />
</Match>
</Switch>
);
}}
/>
<Route path="*" component={() => <NotFound />} />
</Route>
</Router>
</Root>
</OpenAuthProvider>
)
}