update AuthLayout

src/assets/Logo.tsx

@@ -20,14 +20,49 @@ export default function Logo({ size = 1.5, ...props }: ILogoProps) {
     >
       <title id="rowy-logo-title">Rowy</title>
 
+      <defs>
+        <linearGradient x1="83.349%" y1="50%" x2="0%" y2="50%" id="b">
+          <stop stop-color="#F0A" offset="0%" />
+          <stop stop-color="#FA0" offset="100%" />
+        </linearGradient>
+        <linearGradient x1="50%" y1="16.276%" x2="50%" y2="100%" id="c">
+          <stop stop-color="#4200FF" offset="0%" />
+          <stop stop-color="#F0A" offset="100%" />
+        </linearGradient>
+        <linearGradient x1="83.052%" y1="50%" x2="0%" y2="50%" id="d">
+          <stop stop-color="#0AF" offset="0%" />
+          <stop stop-color="#0FA" offset="100%" />
+        </linearGradient>
+        <linearGradient x1="100%" y1="50%" x2="16.614%" y2="50%" id="e">
+          <stop stop-color="#0AF" offset="0%" />
+          <stop stop-color="#4200FF" offset="100%" />
+        </linearGradient>
+      </defs>
+
+      <path
+        d="M6 10v6H3a3 3 0 010-6h3zm-1 5v-4H3a2 2 0 00-1.995 1.85L1 13a2 2 0 001.85 1.995L3 15h2z"
+        fill="url(#b)"
+        transform="rotate(-90 3 13)"
+      />
+      <path
+        d="M6 6H0V3a3 3 0 116 0v3zM1 5h4V3a2 2 0 00-1.85-1.995L3 1a2 2 0 00-1.995 1.85L1 3v2z"
+        fill="#4200FF"
+      />
+      <path d="M6 5v6H0V5h6zM5 6H1v4h4V6z" fill="url(#c)" />
+      <path
+        d="M16 0v6h-3a3 3 0 010-6h3zm-1.001 5V1H13a2 2 0 00-1.995 1.85L11 3a2 2 0 001.85 1.995L13 5h1.999z"
+        fill="url(#d)"
+        transform="rotate(-180 13 3)"
+      />
+      <path
+        d="M11 0v6H5V3a3 3 0 013-3h3zm-1 1H8a2 2 0 00-1.995 1.85L6 3v2h4V1z"
+        fill="url(#e)"
+      />
+
       <path
         d="M58 3l4 9 4-9h2l-7 16h-2l2-4.5L56 3h2zm-26-.25a6.25 6.25 0 110 12.5 6.25 6.25 0 010-12.5zM26 3v2h-4v10h-2V3h6zm14 0l3 9 3-9h2l3 9 3-9h2l-4 12h-2l-3-9-3 9h-2L38 3h2zm-8 1.75a4.25 4.25 0 100 8.5 4.25 4.25 0 000-8.5z"
         fill={theme.palette.text.primary}
       />
-      <path
-        d="M13 0a3 3 0 010 6l-2-.001V6H6v7a3 3 0 01-6 0V3a3 3 0 015.501-1.657A2.989 2.989 0 018 0h5zM5 11H1v2a2 2 0 001.85 1.995L3 15a2 2 0 001.995-1.85L5 13v-2zm0-5H1v4h4V6zM3 1a2 2 0 00-1.995 1.85L1 3v2h4V3a2 2 0 00-1.85-1.995L3 1zm8.001 0v4H13a2 2 0 001.995-1.85L15 3a2 2 0 00-1.85-1.995L13 1h-1.999zM10 1H8a2 2 0 00-1.995 1.85L6 3v2h4V1z"
-        fill={theme.palette.primary.main}
-      />
     </svg>
   );
 }

src/layouts/AuthLayout.tsx

@@ -1,6 +1,8 @@
-import { useAtom } from "jotai";
+import { use100vh } from "react-div-100vh";
 
 import {
+  alpha,
+  Box,
   Paper,
   Typography,
   LinearProgress,
@@ -8,12 +10,11 @@ import {
   Link,
   LinkProps,
 } from "@mui/material";
-import { alpha, Theme } from "@mui/material/styles";
-import BrandedBackground, { Wrapper } from "@src/assets/BrandedBackground";
 import Logo from "@src/assets/Logo";
+import bgTableLight from "@src/assets/bg-table-light.webp";
+import bgTableDark from "@src/assets/bg-table-dark.webp";
 
 import { EXTERNAL_LINKS } from "@src/constants/externalLinks";
-import { globalScope, projectIdAtom } from "@src/atoms/globalScope";
 
 export interface IAuthLayoutProps {
   hideLogo?: boolean;
@@ -34,7 +35,7 @@ export default function AuthLayout({
   children,
   loading,
 }: IAuthLayoutProps) {
-  const [projectId] = useAtom(projectIdAtom, globalScope);
+  const fullScreenHeight = use100vh() ?? 0;
 
   const linkProps: LinkProps = {
     variant: "caption",
@@ -45,9 +46,30 @@ export default function AuthLayout({
   };
 
   return (
-    <Wrapper sx={hideLogo ? { gap: (theme) => theme.spacing(2) } : {}}>
-      <BrandedBackground />
+    <Box
+      sx={{
+        backgroundImage: (theme) =>
+          `linear-gradient(to bottom,
+            ${alpha(theme.palette.background.default, 0.6)},
+            ${alpha(theme.palette.background.default, 0.6)}),
+            url(${theme.palette.mode === "dark" ? bgTableDark : bgTableLight})`,
+        backgroundSize: { xs: "1920px 1080px", md: "cover" },
+        backgroundRepeat: "no-repeat",
+        backgroundPosition: "top left",
 
+        display: "grid",
+        placeItems: "center",
+        alignContent: "center",
+        gap: 2,
+        gridAutoRows: "max-content",
+        minHeight: fullScreenHeight > 0 ? `${fullScreenHeight}px` : "100vh",
+
+        pt: (theme) => `max(env(safe-area-inset-top), ${theme.spacing(1)})`,
+        pb: (theme) => `max(env(safe-area-inset-bottom), ${theme.spacing(1)})`,
+        pl: (theme) => `max(env(safe-area-inset-left), ${theme.spacing(1)})`,
+        pr: (theme) => `max(env(safe-area-inset-right), ${theme.spacing(1)})`,
+      }}
+    >
       <div
         style={{
           textAlign: "center",
@@ -75,24 +97,19 @@ export default function AuthLayout({
 
             maxWidth: 360,
             width: "100%",
-            px: 4,
-            py: 3,
+            p: 4,
             minHeight: 300,
 
-            backgroundColor: (theme: Theme) =>
-              alpha(theme.palette.background.paper, 0.5),
-            backdropFilter: "blur(20px) saturate(150%)",
-
             display: "flex",
             flexDirection: "column",
             textAlign: "center",
 
-            "& > :not(style) + :not(style)": { mt: 6 },
+            "& > :not(style) + :not(style)": { mt: 4 },
           } as any
         }
       >
         {title && (
-          <Typography component="h1" variant="h4">
+          <Typography component="h1" variant="h4" sx={{ mt: -1 }}>
             {title}
           </Typography>
         )}
@@ -123,13 +140,13 @@ export default function AuthLayout({
           />
         )}
 
-        <Typography
+        {/* <Typography
           variant="caption"
           color="text.secondary"
           sx={{ pt: 1, display: hideProject ? "none" : "block" }}
         >
           Project: <span style={{ userSelect: "all" }}>{projectId}</span>
-        </Typography>
+        </Typography> */}
       </Paper>
 
       <Stack
@@ -167,6 +184,6 @@ export default function AuthLayout({
           Terms
         </Link>
       </Stack>
-    </Wrapper>
+    </Box>
   );
 }

src/layouts/MarketingPanel.tsx

@@ -1,5 +1,4 @@
 import { Stack, Paper, Typography, Button } from "@mui/material";
-import { alpha } from "@mui/material/styles";
 import { Discord as DiscordIcon } from "@src/assets/icons";
 import TwitterIcon from "@mui/icons-material/Twitter";
 
@@ -9,7 +8,7 @@ import { EXTERNAL_LINKS } from "@src/constants/externalLinks";
 export default function Marketing() {
   return (
     <Paper
-      elevation={4}
+      elevation={0}
       square
       sx={{
         display: { xs: "none", md: "block" },
@@ -18,8 +17,7 @@ export default function Marketing() {
         gridColumn: 1,
         gridRow: "1 / 4",
 
-        backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.5),
-        backdropFilter: "blur(20px) saturate(150%)",
+        bgcolor: "background.default",
 
         pt: (theme) => `max(env(safe-area-inset-top), ${theme.spacing(8)})`,
         pb: (theme) => `max(env(safe-area-inset-bottom), ${theme.spacing(8)})`,