Rename MembershipLayout and create ViewerLayout for identity context pages

Signed-off-by: Émile Ré <emile@getprobo.com>

packages/ui/src/Layouts/CenteredLayout.tsx

@@ -3,22 +3,22 @@ import { Outlet } from "react-router";
 import { Skeleton } from "../Atoms/Skeleton/Skeleton";
 
 export function CenteredLayout({ children }: PropsWithChildren) {
-    return (
-        <div className="grid place-items-center min-h-screen text-txt-primary bg-level-0">
-            <div className="w-full max-w-2xl flex flex-col items-center">
-                {children ?? <Outlet />}
-            </div>
-        </div>
-    );
+  return (
+    <div className="grid place-items-center min-h-[calc(100vh-48px-(2*48px))] text-txt-primary bg-level-0">
+      <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>
-    );
+  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

@@ -13,17 +13,24 @@ import { Toasts } from "../Atoms/Toasts/Toasts.tsx";
 import { createPortal } from "react-dom";
 import clsx from "clsx";
 import { ConfirmDialog } from "../Molecules/Dialog/ConfirmDialog.tsx";
+import { Link } from "react-router";
 
 type Props = PropsWithChildren<{
-  header: ReactNode;
-  sidebar: ReactNode;
+  headerLeading?: ReactNode;
+  headerTrailing: ReactNode;
+  sidebar?: ReactNode;
 }>;
 
 const LayoutContext = createContext({
   setDrawer: (() => {}) as (v: boolean) => void,
 });
 
-export function Layout({ header, sidebar, children }: Props) {
+export function Layout({
+  headerLeading,
+  headerTrailing,
+  sidebar,
+  children,
+}: Props) {
   const [hasDrawer, setDrawer] = useState(false);
   const layoutContext = useMemo(
     () => ({
@@ -35,18 +42,25 @@ export function Layout({ header, sidebar, children }: Props) {
     <LayoutContext value={layoutContext}>
       <div className="text-txt-primary bg-level-0">
         <header className="absolute z-2 left-0 right-0 px-4 flex items-center border-b border-border-solid h-12 bg-level-0">
-          <Logo className="w-12 h-5" />
-          <svg
-            className="mx-3 text-txt-tertiary"
-            width="8"
-            height="18"
-            viewBox="0 0 8 18"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path d="M1 17L7 1" stroke="currentColor" />
-          </svg>
-          {header}
+          <Link to="/">
+            <Logo className="w-12 h-5" />
+          </Link>
+          {headerLeading && (
+            <>
+              <svg
+                className="mx-3 text-txt-tertiary"
+                width="8"
+                height="18"
+                viewBox="0 0 8 18"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path d="M1 17L7 1" stroke="currentColor" />
+              </svg>
+              {headerLeading}
+            </>
+          )}
+          <div className="ml-auto">{headerTrailing}</div>
         </header>
         <div className="flex h-screen" id="main">
           {sidebar && <Sidebar>{sidebar}</Sidebar>}