💄 Optimized styles

pkg/view/src/layouts/RootLayout.tsx

@@ -1,8 +1,8 @@
 import Navbar from "./shared/Navbar.tsx";
 import { readProfiles, useUserinfo } from "../stores/userinfo.tsx";
-import { createEffect, createSignal, Show } from "solid-js";
+import { createEffect, createMemo, createSignal, Show } from "solid-js";
 import { readWellKnown } from "../stores/wellKnown.tsx";
-import { BeforeLeaveEventArgs, useLocation, useNavigate } from "@solidjs/router";
+import { BeforeLeaveEventArgs, useLocation, useNavigate, useSearchParams } from "@solidjs/router";
 
 export default function RootLayout(props: any) {
   const [ready, setReady] = createSignal(false);
@@ -13,6 +13,7 @@ export default function RootLayout(props: any) {
   const userinfo = useUserinfo();
 
   const location = useLocation();
+  const [searchParams] = useSearchParams();
 
   createEffect(() => {
     if (ready()) {
@@ -30,6 +31,14 @@ export default function RootLayout(props: any) {
     }
   }
 
+  const mainContentStyles = createMemo(() => {
+    if (searchParams["embedded"]) {
+      return "h-screen";
+    } else {
+      return "h-[calc(100vh-64px)] mt-[64px]";
+    }
+  });
+
   return (
     <Show when={ready()} fallback={
       <div class="h-screen w-screen flex justify-center items-center">
@@ -38,8 +47,11 @@ export default function RootLayout(props: any) {
         </div>
       </div>
     }>
+      <Show when={!searchParams["embedded"]}>
         <Navbar />
-      <main class="h-[calc(100vh-68px)] mt-[68px]">{props.children}</main>
+      </Show>
+
+      <main class={`${mainContentStyles()} px-5`}>{props.children}</main>
     </Show>
   );
 }

pkg/view/src/pages/auth/callback.tsx

@@ -4,8 +4,8 @@ export default function DefaultCallbackPage() {
   const [searchParams] = useSearchParams();
 
   return (
-    <div class="w-full h-full flex justify-center items-center">
+    <div class="h-full flex justify-center items-center mx-5">
-      <div class="card w-[480px] max-w-screen shadow-xl">
+      <div class="card w-screen max-w-[480px] shadow-xl">
         <div class="card-body">
           <div id="header" class="text-center mb-5">
             {/* Just Kidding */}

pkg/view/src/pages/auth/connect.tsx

@@ -79,8 +79,8 @@ export default function OauthConnectPage() {
   preConnect();
 
   return (
-    <div class="w-full h-full flex justify-center items-center">
+    <div class="h-full flex justify-center items-center mx-5">
-      <div class="card w-[480px] max-w-screen shadow-xl">
+      <div class="card w-screen max-w-[480px] shadow-xl">
         <div class="card-body">
           <div id="header" class="text-center mb-5">
             <h1 class="text-xl font-bold">{title()}</h1>

pkg/view/src/pages/auth/login.tsx

@@ -140,9 +140,9 @@ export default function LoginPage() {
   }
 
   return (
-    <div class="w-full h-full flex justify-center items-center">
+    <div class="h-full flex justify-center items-center mx-5">
       <div>
-        <div class="card w-[480px] max-w-screen shadow-xl">
+        <div class="card w-screen max-w-[480px] shadow-xl">
           <div class="card-body">
             <div id="header" class="text-center mb-5">
               <h1 class="text-xl font-bold">{title()}</h1>
@@ -210,21 +210,30 @@ export default function LoginPage() {
               </button>
             </form>
           </div>
-        </div>
 
-        <Show when={searchParams["redirect_uri"]}>
+          <div id="tips" class="flex flex-col gap-4">
-          <div id="redirect-info" class="mt-3">
+            <Show when={challenge()}>
-            <div role="alert" class="alert shadow">
+              <div class="px-7 py-5 text-center bg-base-200">
-              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                <progress
-                   class="stroke-info shrink-0 w-6 h-6">
+                  class="progress w-2/3"
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  value={challenge().progress / challenge().requirements * 100}
-                      d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                  max="100"
-              </svg>
+                />
-              <span>You need to login before access that.</span>
+                <div class="mt-3 flex justify-center gap-2">
+                  <span>Risk <b>{challenge().risk_level}</b></span>
+                  <span>Progress <b>{challenge().progress}/{challenge().requirements}</b></span>
                 </div>
               </div>
             </Show>
 
+            <Show when={searchParams["redirect_uri"]}>
+              <div role="alert" class="px-7 py-5 text-center bg-base-200">
+                <span>You need to login before access that.</span>
+              </div>
+            </Show>
+          </div>
+        </div>
+
         <div class="text-sm text-center mt-3">
           <a target="_blank" href="/auth/register?closable=yes" class="link">Haven't an account? Click here to create
             one!</a>

pkg/view/src/pages/auth/register.tsx

@@ -47,9 +47,9 @@ export default function RegisterPage() {
   }
 
   return (
-    <div class="w-full h-full flex justify-center items-center">
+    <div class="h-full flex justify-center items-center mx-5">
       <div>
-        <div class="card w-[480px] max-w-screen shadow-xl">
+        <div class="card w-screen max-w-[480px] shadow-xl">
           <div class="card-body">
             <div id="header" class="text-center mb-5">
               <h1 class="text-xl font-bold">{title()}</h1>

pkg/view/src/pages/users/confirm.tsx

@@ -34,8 +34,8 @@ export default function ConfirmRegistrationPage() {
   doConfirm();
 
   return (
-    <div class="w-full h-full flex justify-center items-center">
+    <div class="h-full flex justify-center items-center mx-5">
-      <div class="card w-[480px] max-w-screen shadow-xl">
+      <div class="card w-screen max-w-[480px] shadow-xl">
         <div class="card-body">
           <div id="header" class="text-center mb-5">
             <h1 class="text-xl font-bold">Confirm your account</h1>