diff --git a/src/web/public/treylogo-navigation.svg b/src/web/public/treylogo-navigation.svg new file mode 100644 index 0000000..b34abf0 --- /dev/null +++ b/src/web/public/treylogo-navigation.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/src/web/src/App.tsx b/src/web/src/App.tsx index fc33708..dee2593 100644 --- a/src/web/src/App.tsx +++ b/src/web/src/App.tsx @@ -1,10 +1,22 @@ import { RouterProvider, createBrowserRouter } from "react-router-dom" -import { Container } from "@radix-ui/themes" import "./App.css" import { ProtectedRoute, GuestRoute } from "./api/router" import Dashboard from "./components/Dashboard" +import { Layout } from "./components/Layout/Layout" import Login from "./components/Login" +interface IProtectedRoutePage { + component: () => JSX.Element +} + +const ProtectedRoutePage: React.FC = ({ component }) => { + return ( + + + + ) +} + const router = createBrowserRouter([ { id: "App", @@ -12,7 +24,7 @@ const router = createBrowserRouter([ children: [ { index: true, - Component: () => , + Component: () => , }, { path: "/login", @@ -20,18 +32,14 @@ const router = createBrowserRouter([ }, { path: "/dashboard", - element: , + element: , }, ], }, ]) function App() { - return ( - - - - ) + return } export default App diff --git a/src/web/src/components/Dashboard.tsx b/src/web/src/components/Dashboard.tsx index a19f8f0..2527565 100644 --- a/src/web/src/components/Dashboard.tsx +++ b/src/web/src/components/Dashboard.tsx @@ -1,9 +1,5 @@ const Dashboard = () => { - return ( -
-

Dashboard

-
- ) + return

Dashboard

} export default Dashboard diff --git a/src/web/src/components/Header/Header.module.css b/src/web/src/components/Header/Header.module.css new file mode 100644 index 0000000..6717c9a --- /dev/null +++ b/src/web/src/components/Header/Header.module.css @@ -0,0 +1,14 @@ +.header { + display: flex; + background-color: var(--blue-9); + padding: 10px; +} + +.image-container { + display: flex; + align-items: center; +} + +.image-container img { + max-height: 30px; +} diff --git a/src/web/src/components/Header/Header.tsx b/src/web/src/components/Header/Header.tsx new file mode 100644 index 0000000..14079be --- /dev/null +++ b/src/web/src/components/Header/Header.tsx @@ -0,0 +1,15 @@ +import React from "react" +import treylogo from "../../../public/treylogo-navigation.svg" +import Navigation from "../Navigation/Navigation" +import styles from "./Header.module.css" + +export const Header: React.FC = () => { + return ( +
+
+ TREY-logo +
+ +
+ ) +} diff --git a/src/web/src/components/Layout/Layout.tsx b/src/web/src/components/Layout/Layout.tsx new file mode 100644 index 0000000..3217f15 --- /dev/null +++ b/src/web/src/components/Layout/Layout.tsx @@ -0,0 +1,16 @@ +import React from "react" +import { Container } from "@radix-ui/themes" +import { Header } from "../Header/Header" + +interface ILayout { + children: React.ReactNode +} + +export const Layout: React.FC = ({ children }) => { + return ( + <> +
+ {children} + + ) +} diff --git a/src/web/src/components/Login.tsx b/src/web/src/components/Login.tsx index 9282f95..22618e0 100644 --- a/src/web/src/components/Login.tsx +++ b/src/web/src/components/Login.tsx @@ -1,6 +1,6 @@ import { StytchLogin } from "@stytch/react" import { Callbacks, Products } from "@stytch/vanilla-js" -import { Container } from "@radix-ui/themes" +import { LoginContainer } from "../components/LoginContainer/LoginContainer" const Login = () => { const REDIRECT_URL = "/dashboard" @@ -19,8 +19,8 @@ const Login = () => { // TODO: add more event types as needed console.log(event) if ( - (event.type === "AUTHENTICATE_FLOW_COMPLETE" || event.type === "PASSWORD_AUTHENTICATE") && - event.data?.user + (event.type === "AUTHENTICATE_FLOW_COMPLETE" || event.type === "PASSWORD_AUTHENTICATE") && + event.data?.user ) { window.location.href = REDIRECT_URL } @@ -28,18 +28,18 @@ const Login = () => { } return ( - - - + + + ) } -export default Login \ No newline at end of file +export default Login diff --git a/src/web/src/components/LoginContainer/LoginContainer.tsx b/src/web/src/components/LoginContainer/LoginContainer.tsx new file mode 100644 index 0000000..d925e90 --- /dev/null +++ b/src/web/src/components/LoginContainer/LoginContainer.tsx @@ -0,0 +1,10 @@ +import React from "react" +import styles from "./Logincontainer.module.css" + +interface ILoginContainer { + children: React.ReactNode +} + +export const LoginContainer: React.FC = ({ children }) => { + return
{children}
+} diff --git a/src/web/src/components/LoginContainer/Logincontainer.module.css b/src/web/src/components/LoginContainer/Logincontainer.module.css new file mode 100644 index 0000000..f0cba81 --- /dev/null +++ b/src/web/src/components/LoginContainer/Logincontainer.module.css @@ -0,0 +1,5 @@ +.login-container { + display: flex; + align-items: center; + justify-content: center; +} diff --git a/src/web/src/components/Navigation/Navigation.module.css b/src/web/src/components/Navigation/Navigation.module.css new file mode 100644 index 0000000..4e190f7 --- /dev/null +++ b/src/web/src/components/Navigation/Navigation.module.css @@ -0,0 +1,56 @@ +/* reset */ +button, +p { + all: unset; +} + +.navigation { + position: relative; + display: flex; + width: 100%; + z-index: 1; + justify-content: space-between; + align-items: center; +} + +.navigation-menu-list { + display: flex; + list-style: none; + margin: 0; +} + +.navigation-menu-link { + display: block; + text-decoration: none; + font-size: 16px; +} +.navigation-menu-link[data-active="true"] { + text-decoration: underline; + color: var(--trey-yellow); +} + +.navigation-menu-trigger, +.navigation-menu-link { + padding: 8px 12px; + outline: none; + font-weight: 500; + border-radius: 4px; + color: var(--white); +} +.navigation-menu-trigger:hover, +.navigation-menu-link:hover { + text-decoration: underline; +} +.navigation-menu-trigger:focus, +.navigation-menu-link:focus { + outline: 2px solid var(--blue-focus); + color: var(--trey-yellow); +} + +.navigation-menu-trigger { + display: flex; + align-items: center; + justify-content: space-between; + gap: 2px; + cursor: pointer; +} diff --git a/src/web/src/components/Navigation/Navigation.tsx b/src/web/src/components/Navigation/Navigation.tsx new file mode 100644 index 0000000..83cb449 --- /dev/null +++ b/src/web/src/components/Navigation/Navigation.tsx @@ -0,0 +1,38 @@ +import { useLocation } from "react-router-dom" +import * as NavigationMenu from "@radix-ui/react-navigation-menu" +import styles from "./Navigation.module.css" + +const navigationRoutes = [{ name: "Dashboard", href: "/dashboard" }] + +const Navigation = () => { + const location = useLocation() + + return ( + + + {navigationRoutes.map((navigationRoute) => { + return ( + + + {navigationRoute.name} + + + ) + })} + + + + + {"käyttäjä tähän"} + + + + + ) +} + +export default Navigation diff --git a/src/web/src/index.css b/src/web/src/index.css index 9f5f664..6beb64a 100644 --- a/src/web/src/index.css +++ b/src/web/src/index.css @@ -2,11 +2,20 @@ --trey-blue: #006069; --blue-9: var(--trey-blue); --blue-a9: var(--trey-blue); + --trey-yellow: #ffcc00; + --white: #ffffff; + --blue-focus: #4d4aff; } body { background-image: url("https://trey.fi/content/themes/trey/svg/tausta_aalto.svg"); - background-color: #006069; + background-color: var(--trey-blue); background-size: cover; background-repeat: repeat; + margin: 0; + padding: 0; +} + +.rt-ContainerInner { + background-color: var(--white); }