[docs] Polish Sign in to your account joy demo (#37498)

Co-authored-by: siriwatknp <[email protected]>
mui · Jun 11, 2023 · 90d9d13 · 90d9d13
1 parent 37ba151
commit 90d9d13
Showing 1 changed file with 9 additions and 8 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
@@ -40,6 +40,7 @@ function ColorSchemeToggle({ onClick, ...props }: IconButtonProps) {
       size="sm"
       variant="plain"
       color="neutral"
+      aria-label="toggle light/dark mode"
       {...props}
       onClick={(event) => {
         if (mode === 'light') {
@@ -159,11 +160,11 @@ export default function JoySignInSideTemplate() {
             }}
           >
             <div>
-              <Typography component="h2" fontSize="xl2" fontWeight="lg">
-                Welcome back
+              <Typography component="h1" fontSize="xl2" fontWeight="lg">
+                Sign in to your account
               </Typography>
               <Typography level="body2" sx={{ my: 1, mb: 3 }}>
-                Let&apos;s get started! Please enter your details.
+                Welcome back
               </Typography>
             </div>
             <form
@@ -180,11 +181,11 @@ export default function JoySignInSideTemplate() {
             >
               <FormControl required>
                 <FormLabel>Email</FormLabel>
-                <Input placeholder="Enter your email" type="email" name="email" />
+                <Input type="email" name="email" />
               </FormControl>
               <FormControl required>
                 <FormLabel>Password</FormLabel>
-                <Input placeholder="•••••••" type="password" name="password" />
+                <Input type="password" name="password" />
               </FormControl>
               <Box
                 sx={{
@@ -195,7 +196,7 @@ export default function JoySignInSideTemplate() {
               >
                 <Checkbox size="sm" label="Remember for 30 days" name="persistent" />
                 <Link fontSize="sm" href="#replace-with-a-link" fontWeight="lg">
-                  Forgot password
+                  Forgot your password?
                 </Link>
               </Box>
               <Button type="submit" fullWidth>
@@ -234,10 +235,10 @@ export default function JoySignInSideTemplate() {
           backgroundPosition: 'center',
           backgroundRepeat: 'no-repeat',
           backgroundImage:
-            'url(https://images.unsplash.com/photo-1527181152855-fc03fc7949c8)',
+            'url(https://images.unsplash.com/photo-1527181152855-fc03fc7949c8?auto=format&w=1000&dpr=2)',
           [theme.getColorSchemeSelector('dark')]: {
             backgroundImage:
-              'url(https://images.unsplash.com/photo-1572072393749-3ca9c8ea0831)',
+              'url(https://images.unsplash.com/photo-1572072393749-3ca9c8ea0831?auto=format&w=1000&dpr=2)',
           },
         })}
       />