From a7745106baaf8f50d6e109146a92a2e18c7b6b1e Mon Sep 17 00:00:00 2001
From: Nedal <73669345+cipherlogs@users.noreply.github.com>
Date: Fri, 8 Mar 2024 14:28:52 +0100
Subject: [PATCH] [joy-ui][docs] Remove wrong CSS prop from the Sign-in-side
 template (#41383)

Signed-off-by: Nedal <73669345+cipherlogs@users.noreply.github.com>
Co-authored-by: cipherlogs <73669345+0x78logs@users.noreply.github.com>
Co-authored-by: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
---
 .../templates/sign-in-side/App.tsx            | 42 ++++++-------------
 1 file changed, 12 insertions(+), 30 deletions(-)

diff --git a/docs/data/joy/getting-started/templates/sign-in-side/App.tsx b/docs/data/joy/getting-started/templates/sign-in-side/App.tsx
index ea764cec4e5a77..5e87d8cca28c47 100644
--- a/docs/data/joy/getting-started/templates/sign-in-side/App.tsx
+++ b/docs/data/joy/getting-started/templates/sign-in-side/App.tsx
@@ -7,7 +7,7 @@ import Button from '@mui/joy/Button';
 import Checkbox from '@mui/joy/Checkbox';
 import Divider from '@mui/joy/Divider';
 import FormControl from '@mui/joy/FormControl';
-import FormLabel, { formLabelClasses } from '@mui/joy/FormLabel';
+import FormLabel from '@mui/joy/FormLabel';
 import IconButton, { IconButtonProps } from '@mui/joy/IconButton';
 import Link from '@mui/joy/Link';
 import Input from '@mui/joy/Input';
@@ -31,28 +31,20 @@ function ColorSchemeToggle(props: IconButtonProps) {
   const { onClick, ...other } = props;
   const { mode, setMode } = useColorScheme();
   const [mounted, setMounted] = React.useState(false);
-  React.useEffect(() => {
-    setMounted(true);
-  }, []);
-  if (!mounted) {
-    return <IconButton size="sm" variant="outlined" color="neutral" disabled />;
-  }
+
+  React.useEffect(() => setMounted(true), []);
+
   return (
     <IconButton
-      id="toggle-mode"
+      aria-label="toggle light/dark mode"
       size="sm"
       variant="outlined"
-      color="neutral"
-      aria-label="toggle light/dark mode"
-      {...other}
+      disabled={!mounted}
       onClick={(event) => {
-        if (mode === 'light') {
-          setMode('dark');
-        } else {
-          setMode('light');
-        }
+        setMode(mode === 'light' ? 'dark' : 'light');
         onClick?.(event);
       }}
+      {...other}
     >
       {mode === 'light' ? <DarkModeRoundedIcon /> : <LightModeRoundedIcon />}
     </IconButton>
@@ -66,8 +58,6 @@ export default function JoySignInSideTemplate() {
       <GlobalStyles
         styles={{
           ':root': {
-            '--Collapsed-breakpoint': '769px', // form will stretch when viewport is below `769px`
-            '--Cover-width': '50vw', // must be `vw` only
             '--Form-maxWidth': '800px',
             '--Transition-duration': '0.4s', // set to `none` to disable transition
           },
@@ -75,8 +65,7 @@ export default function JoySignInSideTemplate() {
       />
       <Box
         sx={(theme) => ({
-          width:
-            'clamp(100vw - var(--Cover-width), (var(--Collapsed-breakpoint) - 100vw) * 999, 100vw)',
+          width: { xs: '100%', md: '50vw' },
           transition: 'width var(--Transition-duration)',
           transitionDelay: 'calc(var(--Transition-duration) + 0.1s)',
           position: 'relative',
@@ -95,9 +84,7 @@ export default function JoySignInSideTemplate() {
             display: 'flex',
             flexDirection: 'column',
             minHeight: '100dvh',
-            width:
-              'clamp(var(--Form-maxWidth), (var(--Collapsed-breakpoint) - 100vw) * 999, 100%)',
-            maxWidth: '100%',
+            width: '100%',
             px: 2,
           }}
         >
@@ -106,7 +93,6 @@ export default function JoySignInSideTemplate() {
             sx={{
               py: 3,
               display: 'flex',
-              alignItems: 'left',
               justifyContent: 'space-between',
             }}
           >
@@ -136,7 +122,7 @@ export default function JoySignInSideTemplate() {
                 flexDirection: 'column',
                 gap: 2,
               },
-              [`& .${formLabelClasses.asterisk}`]: {
+              [`& .MuiFormLabel-asterisk`]: {
                 visibility: 'hidden',
               },
             }}
@@ -166,10 +152,6 @@ export default function JoySignInSideTemplate() {
               sx={(theme) => ({
                 [theme.getColorSchemeSelector('light')]: {
                   color: { xs: '#FFF', md: 'text.tertiary' },
-                  '--Divider-lineColor': {
-                    xs: '#FFF',
-                    md: 'var(--joy-palette-divider)',
-                  },
                 },
               })}
             >
@@ -230,7 +212,7 @@ export default function JoySignInSideTemplate() {
           right: 0,
           top: 0,
           bottom: 0,
-          left: 'clamp(0px, (100vw - var(--Collapsed-breakpoint)) * 999, 100vw - var(--Cover-width))',
+          left: { xs: 0, md: '50vw' },
           transition:
             'background-image var(--Transition-duration), left var(--Transition-duration) !important',
           transitionDelay: 'calc(var(--Transition-duration) + 0.1s)',