Add risks

Signed-off-by: Bryan Frimin <bryan@getprobo.com>
Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>

packages/ui/src/Layouts/AuthLayout.tsx

@@ -1,13 +1,12 @@
 import logo from "../assets/android-chrome-512x512.png";
 import { useTranslate } from "@probo/i18n";
 import { Outlet } from "react-router";
-import { Toasts } from "../Atoms/Toasts/Toasts";
 
 export function AuthLayout() {
     const { __ } = useTranslate();
     return (
         <div className="grid grid-cols-1 lg:grid-cols-2 min-h-screen">
-            <div className="bg-surface-0 flex flex-col items-center justify-center">
+            <div className="bg-level-0 flex flex-col items-center justify-center">
                 <div className="max-w-112">
                     <Outlet />
                 </div>
@@ -21,7 +20,6 @@ export function AuthLayout() {
                     </span>
                 </div>
             </div>
-            <Toasts />
         </div>
     );
 }

packages/ui/src/Layouts/CenteredLayout.stories.tsx

@@ -0,0 +1,16 @@
+import { CenteredLayout } from "./CenteredLayout";
+import type { Meta, StoryObj } from "@storybook/react";
+
+export default {
+    title: "Layouts/CenteredLayout",
+    component: CenteredLayout,
+    argTypes: {},
+} satisfies Meta<typeof CenteredLayout>;
+
+type Story = StoryObj<typeof CenteredLayout>;
+
+export const Default: Story = {
+    args: {
+        children: "lorem ipsum",
+    },
+};

packages/ui/src/Layouts/CenteredLayout.tsx

@@ -0,0 +1,24 @@
+import type { PropsWithChildren } from "react";
+import { Outlet } from "react-router";
+import { Skeleton } from "../Atoms/Skeleton/Skeleton";
+
+export function CenteredLayout({ children }: PropsWithChildren) {
+    return (
+        <div className="grid place-items-center h-screen">
+            <div className="w-full max-w-2xl flex flex-col items-center">
+                {children ?? <Outlet />}
+            </div>
+        </div>
+    );
+}
+
+export function CenteredLayoutSkeleton() {
+    return (
+        <CenteredLayout>
+            <div className="w-full max-w-2xl flex flex-col items-center space-y-6">
+                <Skeleton className="w-77 h-9" />
+                <Skeleton className="w-full h-20" />
+            </div>
+        </CenteredLayout>
+    );
+}

packages/ui/src/Layouts/Layout.tsx

@@ -11,8 +11,18 @@ type Props = PropsWithChildren<{
 export function Layout({ header, sidebar, children }: Props) {
     return (
         <div>
-            <header className="absolute left-0 right-0 px-4 flex items-center border-b border-border-solid h-12">
+            <header className="absolute z-2 left-0 right-0 px-4 flex items-center border-b border-border-solid h-12 bg-level-1">
                 <Logo className="w-12 h-5" />
+                <svg
+                    className="mx-3"
+                    width="8"
+                    height="18"
+                    viewBox="0 0 8 18"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                >
+                    <path d="M1 17L7 1" stroke="#C3C8C2" />
+                </svg>
                 {header}
             </header>
             <div className="flex h-screen">