From b4632941303ffaca0aef1da8f8d7865806fba333 Mon Sep 17 00:00:00 2001
From: araujobarret <araujobarret@gmail.com>
Date: Fri, 5 Dec 2025 17:45:10 +0100
Subject: [PATCH 1/3] feat: add new layout for signup modal

---
 src/Components/AuthDialog/AuthDialog.tsx      |  47 ++---
 .../AuthDialog/AuthDialogLeftPanel.tsx        | 195 ++++++++++++++++++
 2 files changed, 214 insertions(+), 28 deletions(-)
 create mode 100644 src/Components/AuthDialog/AuthDialogLeftPanel.tsx

diff --git a/src/Components/AuthDialog/AuthDialog.tsx b/src/Components/AuthDialog/AuthDialog.tsx
index d54c2882792..8e17ae4c9f8 100644
--- a/src/Components/AuthDialog/AuthDialog.tsx
+++ b/src/Components/AuthDialog/AuthDialog.tsx
@@ -1,8 +1,10 @@
-import { Box, Image, ModalDialog } from "@artsy/palette"
+import { ModalDialog } from "@artsy/palette"
+import { useFlag } from "@unleash/proxy-client-react"
 import {
   type AuthDialogMode,
   useAuthDialogContext,
 } from "Components/AuthDialog/AuthDialogContext"
+import { AuthDialogLeftPanel } from "Components/AuthDialog/AuthDialogLeftPanel"
 import { AuthDialogTitle } from "Components/AuthDialog/AuthDialogTitle"
 import { useAuthDialogTracking } from "Components/AuthDialog/Hooks/useAuthDialogTracking"
 import { AuthDialogForgotPassword } from "Components/AuthDialog/Views/AuthDialogForgotPassword"
@@ -10,9 +12,10 @@ import { AuthDialogLogin } from "Components/AuthDialog/Views/AuthDialogLogin"
 import { AuthDialogSignUp } from "Components/AuthDialog/Views/AuthDialogSignUp"
 import { AuthDialogWelcome } from "Components/AuthDialog/Views/AuthDialogWelcome"
 import { useRecaptcha } from "Utils/EnableRecaptcha"
-import { resized } from "Utils/resized"
 import { type FC, useEffect } from "react"
 
+export const MODAL_WIDTH = 900
+
 export interface AuthDialogProps {
   onClose: () => void
 }
@@ -21,6 +24,7 @@ export const AuthDialog: FC<React.PropsWithChildren<AuthDialogProps>> = ({
   onClose,
 }) => {
   useRecaptcha()
+  const newSignupEnabled = useFlag("onyx_new-signup-modal")
 
   const {
     state: { mode, options },
@@ -43,6 +47,7 @@ export const AuthDialog: FC<React.PropsWithChildren<AuthDialogProps>> = ({
   }
 
   const isCloseable = options.isCloseable ?? true
+  let modalProps = getModalProps(!!options.image, newSignupEnabled)
 
   return (
     <ModalDialog
@@ -56,12 +61,8 @@ export const AuthDialog: FC<React.PropsWithChildren<AuthDialogProps>> = ({
       }
       hasLogo
       m={[1, 2]}
-      {...(options.image
-        ? {
-            width: ["100%", 900],
-            leftPanel: <AuthDialogLeftPanel />,
-          }
-        : { width: ["100%", 450] })}
+      height={[400, "auto"]}
+      {...modalProps}
     >
       <AuthDialogView />
     </ModalDialog>
@@ -90,25 +91,15 @@ export const DEFAULT_TITLES: Record<AuthDialogMode, string> = {
   Welcome: "Sign up or log in",
 }
 
-const IMAGE = {
-  width: 900,
-  height: 2030,
-  src: "https://files.artsy.net/images/2x_Evergreen-Artist-Page-Sign-Up-Modal.jpg",
-}
-
-const AuthDialogLeftPanel: FC<React.PropsWithChildren<unknown>> = () => {
-  const img = resized(IMAGE.src, { width: 450 })
+const getModalProps = (hasImage: boolean, newSignupEnabled: boolean) => {
+  if (hasImage || newSignupEnabled) {
+    return {
+      width: ["100%", MODAL_WIDTH],
+      leftPanel: <AuthDialogLeftPanel />,
+    }
+  }
 
-  return (
-    <Box display={["none", "block"]} width="100%">
-      <Image
-        {...img}
-        width="100%"
-        height="100%"
-        lazyLoad
-        alt=""
-        style={{ objectFit: "cover" }}
-      />
-    </Box>
-  )
+  return {
+    width: ["100%", 450],
+  }
 }
diff --git a/src/Components/AuthDialog/AuthDialogLeftPanel.tsx b/src/Components/AuthDialog/AuthDialogLeftPanel.tsx
new file mode 100644
index 00000000000..9a0a7391d87
--- /dev/null
+++ b/src/Components/AuthDialog/AuthDialogLeftPanel.tsx
@@ -0,0 +1,195 @@
+import {
+  Box,
+  Carousel,
+  CarouselCell,
+  CarouselCellProps,
+  CarouselRail,
+  CarouselRailProps,
+  Flex,
+  Image,
+} from "@artsy/palette"
+import { useFlag } from "@unleash/proxy-client-react"
+import {
+  FC,
+  forwardRef,
+  ForwardRefExoticComponent,
+  useEffect,
+  useRef,
+} from "react"
+import styled from "styled-components"
+import { useCursor } from "use-cursor"
+import { resized } from "Utils/resized"
+
+const MODAL_WIDTH = 900
+
+export const AuthDialogLeftPanel: FC<React.PropsWithChildren> = () => {
+  const img = resized(IMAGE.src, { width: MODAL_WIDTH / 2 })
+
+  const newSignupEnabled = useFlag("onyx_new-signup-modal")
+
+  if (!newSignupEnabled) {
+    return (
+      <Box display={["none", "block"]} width="100%">
+        <Image
+          {...img}
+          width="100%"
+          height="100%"
+          lazyLoad
+          alt=""
+          style={{ objectFit: "cover" }}
+        />
+      </Box>
+    )
+  }
+
+  return (
+    <Box display={["none", "block"]} width="100%" overflow="hidden">
+      <ImageSlider />
+    </Box>
+  )
+}
+
+const ImageSlider: FC = () => {
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null)
+
+  const { index, setCursor } = useCursor({ max: DEFAULT_IMAGES.length })
+
+  const stopAutoPlay = () => {
+    intervalRef.current && clearInterval(intervalRef.current)
+  }
+
+  useEffect(() => {
+    intervalRef.current = setInterval(
+      () => setCursor(prevCursor => prevCursor + 1),
+      5000,
+    )
+
+    return stopAutoPlay
+  }, [setCursor])
+
+  const handleClick = (index: number) => {
+    setCursor(index)
+    stopAutoPlay()
+  }
+
+  return (
+    <Flex width={COLUMN_WIDTH} height="100%" position="relative">
+      <Carousel
+        Cell={Cell}
+        Rail={Rail}
+        initialIndex={index}
+        height="100%"
+        display="flex"
+      >
+        {DEFAULT_IMAGES.map((img, index) => (
+          <Box width={COLUMN_WIDTH} height="100%" key={`signup-img-${img.src}`}>
+            <Image
+              {...img}
+              width="100%"
+              height="100%"
+              lazyLoad={index !== 0}
+              fetchPriority={index === 0 ? "high" : "auto"}
+              alt=""
+              style={{
+                objectFit: "cover",
+              }}
+            />
+          </Box>
+        ))}
+      </Carousel>
+
+      <Flex
+        position="absolute"
+        p={2}
+        bottom={0}
+        left={0}
+        gap={1}
+        flexDirection="column"
+      >
+        <DotIndicators data-active-index={index}>
+          {DEFAULT_IMAGES.map((_, dotIndex) => (
+            <Dot
+              key={dotIndex}
+              data-index={dotIndex}
+              backgroundColor="mono0"
+              onClick={() => handleClick(dotIndex)}
+            />
+          ))}
+        </DotIndicators>
+      </Flex>
+    </Flex>
+  )
+}
+
+const Cell: ForwardRefExoticComponent<CarouselCellProps> = forwardRef(
+  (props, ref) => {
+    return (
+      <CarouselCell
+        {...props}
+        id="cell"
+        ref={ref as any}
+        display="inline-flex"
+        flex={1}
+        width="100%"
+        height="100%"
+        verticalAlign="top"
+        pr={0}
+      />
+    )
+  },
+)
+
+const Rail: FC<React.PropsWithChildren<CarouselRailProps>> = props => {
+  return (
+    <CarouselRail
+      {...props}
+      display="flex"
+      height="100%"
+      width="100%"
+      id="carousel-rail"
+    />
+  )
+}
+
+const DotIndicators = styled(Flex)`
+  gap: 8px;
+  align-items: center;
+`
+
+const Dot = styled(Box)`
+  border-radius: 4px;
+  cursor: pointer;
+  height: 8px;
+  transition: width 0.3s ease;
+  width: 8px;
+
+  ${DotIndicators}[data-active-index="0"] &[data-index="0"],
+  ${DotIndicators}[data-active-index="1"] &[data-index="1"],
+  ${DotIndicators}[data-active-index="2"] &[data-index="2"] {
+    width: 24px;
+  }
+`
+
+const COLUMN_WIDTH = MODAL_WIDTH / 2 - 20
+const IMAGE = {
+  width: MODAL_WIDTH,
+  height: 2030,
+  src: "https://d/images/2x_Evergreen-Artist-Page-Sign-Up-Modal.jpg",
+}
+const DEFAULT_IMAGES = [
+  {
+    width: MODAL_WIDTH,
+    height: 2030,
+    src: "https://files.artsy.net/images/signup01.webp",
+  },
+  {
+    width: MODAL_WIDTH,
+    height: 2030,
+    src: "https://files.artsy.net/images/signup02.webp",
+  },
+  {
+    width: MODAL_WIDTH,
+    height: 2030,
+    src: "https://files.artsy.net/images/signup03.webp",
+  },
+]

From 085beed02bad0b17d307a2cd584d12000a658122 Mon Sep 17 00:00:00 2001
From: araujobarret <araujobarret@gmail.com>
Date: Fri, 5 Dec 2025 18:01:16 +0100
Subject: [PATCH 2/3] fix: wrong url and linting errors

---
 .../AuthDialog/AuthDialogLeftPanel.tsx          | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/Components/AuthDialog/AuthDialogLeftPanel.tsx b/src/Components/AuthDialog/AuthDialogLeftPanel.tsx
index 9a0a7391d87..3178469caff 100644
--- a/src/Components/AuthDialog/AuthDialogLeftPanel.tsx
+++ b/src/Components/AuthDialog/AuthDialogLeftPanel.tsx
@@ -2,17 +2,18 @@ import {
   Box,
   Carousel,
   CarouselCell,
-  CarouselCellProps,
+  type CarouselCellProps,
   CarouselRail,
-  CarouselRailProps,
+  type CarouselRailProps,
   Flex,
   Image,
 } from "@artsy/palette"
 import { useFlag } from "@unleash/proxy-client-react"
 import {
-  FC,
+  type FC,
   forwardRef,
-  ForwardRefExoticComponent,
+  type ForwardRefExoticComponent,
+  useCallback,
   useEffect,
   useRef,
 } from "react"
@@ -54,9 +55,9 @@ const ImageSlider: FC = () => {
 
   const { index, setCursor } = useCursor({ max: DEFAULT_IMAGES.length })
 
-  const stopAutoPlay = () => {
+  const stopAutoPlay = useCallback(() => {
     intervalRef.current && clearInterval(intervalRef.current)
-  }
+  }, [])
 
   useEffect(() => {
     intervalRef.current = setInterval(
@@ -65,7 +66,7 @@ const ImageSlider: FC = () => {
     )
 
     return stopAutoPlay
-  }, [setCursor])
+  }, [setCursor, stopAutoPlay])
 
   const handleClick = (index: number) => {
     setCursor(index)
@@ -174,7 +175,7 @@ const COLUMN_WIDTH = MODAL_WIDTH / 2 - 20
 const IMAGE = {
   width: MODAL_WIDTH,
   height: 2030,
-  src: "https://d/images/2x_Evergreen-Artist-Page-Sign-Up-Modal.jpg",
+  src: "https://files.artsy.net/images/2x_Evergreen-Artist-Page-Sign-Up-Modal.jpg",
 }
 const DEFAULT_IMAGES = [
   {

From 4bb95a5f0124b050952d47da6b53a8a31dfa4886 Mon Sep 17 00:00:00 2001
From: araujobarret <araujobarret@gmail.com>
Date: Mon, 8 Dec 2025 10:08:53 +0100
Subject: [PATCH 3/3] feat: add higher res assets and address requests

---
 src/Components/AuthDialog/AuthDialog.tsx      |  5 ++--
 .../AuthDialog/AuthDialogLeftPanel.tsx        | 25 +++++++++++--------
 src/Components/AuthDialog/Utils/utils.ts      |  1 +
 3 files changed, 17 insertions(+), 14 deletions(-)
 create mode 100644 src/Components/AuthDialog/Utils/utils.ts

diff --git a/src/Components/AuthDialog/AuthDialog.tsx b/src/Components/AuthDialog/AuthDialog.tsx
index 8e17ae4c9f8..7779dd4d89b 100644
--- a/src/Components/AuthDialog/AuthDialog.tsx
+++ b/src/Components/AuthDialog/AuthDialog.tsx
@@ -7,6 +7,7 @@ import {
 import { AuthDialogLeftPanel } from "Components/AuthDialog/AuthDialogLeftPanel"
 import { AuthDialogTitle } from "Components/AuthDialog/AuthDialogTitle"
 import { useAuthDialogTracking } from "Components/AuthDialog/Hooks/useAuthDialogTracking"
+import { MODAL_WIDTH } from "Components/AuthDialog/Utils/utils"
 import { AuthDialogForgotPassword } from "Components/AuthDialog/Views/AuthDialogForgotPassword"
 import { AuthDialogLogin } from "Components/AuthDialog/Views/AuthDialogLogin"
 import { AuthDialogSignUp } from "Components/AuthDialog/Views/AuthDialogSignUp"
@@ -14,8 +15,6 @@ import { AuthDialogWelcome } from "Components/AuthDialog/Views/AuthDialogWelcome
 import { useRecaptcha } from "Utils/EnableRecaptcha"
 import { type FC, useEffect } from "react"
 
-export const MODAL_WIDTH = 900
-
 export interface AuthDialogProps {
   onClose: () => void
 }
@@ -47,7 +46,7 @@ export const AuthDialog: FC<React.PropsWithChildren<AuthDialogProps>> = ({
   }
 
   const isCloseable = options.isCloseable ?? true
-  let modalProps = getModalProps(!!options.image, newSignupEnabled)
+  const modalProps = getModalProps(!!options.image, newSignupEnabled)
 
   return (
     <ModalDialog
diff --git a/src/Components/AuthDialog/AuthDialogLeftPanel.tsx b/src/Components/AuthDialog/AuthDialogLeftPanel.tsx
index 3178469caff..055f0566c71 100644
--- a/src/Components/AuthDialog/AuthDialogLeftPanel.tsx
+++ b/src/Components/AuthDialog/AuthDialogLeftPanel.tsx
@@ -7,8 +7,10 @@ import {
   type CarouselRailProps,
   Flex,
   Image,
+  THEME,
 } from "@artsy/palette"
 import { useFlag } from "@unleash/proxy-client-react"
+import { MODAL_WIDTH } from "Components/AuthDialog/Utils/utils"
 import {
   type FC,
   forwardRef,
@@ -21,8 +23,6 @@ import styled from "styled-components"
 import { useCursor } from "use-cursor"
 import { resized } from "Utils/resized"
 
-const MODAL_WIDTH = 900
-
 export const AuthDialogLeftPanel: FC<React.PropsWithChildren> = () => {
   const img = resized(IMAGE.src, { width: MODAL_WIDTH / 2 })
 
@@ -62,7 +62,7 @@ const ImageSlider: FC = () => {
   useEffect(() => {
     intervalRef.current = setInterval(
       () => setCursor(prevCursor => prevCursor + 1),
-      5000,
+      CAROUSEL_INTERVAL,
     )
 
     return stopAutoPlay
@@ -171,26 +171,29 @@ const Dot = styled(Box)`
   }
 `
 
-const COLUMN_WIDTH = MODAL_WIDTH / 2 - 20
+const CAROUSEL_INTERVAL = 5000
+const COLUMN_WIDTH =
+  MODAL_WIDTH / 2 - Number.parseInt(THEME.space["2"].replace("px", ""))
+const IMAGE_HEIGHT = 2030
 const IMAGE = {
   width: MODAL_WIDTH,
-  height: 2030,
+  height: IMAGE_HEIGHT,
   src: "https://files.artsy.net/images/2x_Evergreen-Artist-Page-Sign-Up-Modal.jpg",
 }
 const DEFAULT_IMAGES = [
   {
     width: MODAL_WIDTH,
-    height: 2030,
-    src: "https://files.artsy.net/images/signup01.webp",
+    height: IMAGE_HEIGHT,
+    src: "https://files.artsy.net/images/signup-01.png",
   },
   {
     width: MODAL_WIDTH,
-    height: 2030,
-    src: "https://files.artsy.net/images/signup02.webp",
+    height: IMAGE_HEIGHT,
+    src: "https://files.artsy.net/images/signup-02.png",
   },
   {
     width: MODAL_WIDTH,
-    height: 2030,
-    src: "https://files.artsy.net/images/signup03.webp",
+    height: IMAGE_HEIGHT,
+    src: "https://files.artsy.net/images/signup-03.png",
   },
 ]
diff --git a/src/Components/AuthDialog/Utils/utils.ts b/src/Components/AuthDialog/Utils/utils.ts
new file mode 100644
index 00000000000..7e20f60676f
--- /dev/null
+++ b/src/Components/AuthDialog/Utils/utils.ts
@@ -0,0 +1 @@
+export const MODAL_WIDTH = 900