move labels outside form

cypress-io · Feb 23, 2025 · 2519bb1 · 2519bb1
1 parent a2ffa13
commit 2519bb1
Showing 1 changed file with 20 additions and 2 deletions.
diff --git a/src/components/SignInForm.tsx b/src/components/SignInForm.tsx
@@ -106,14 +106,23 @@ const SignInForm: React.FC<Props> = ({ authService }) => {
         >
           {({ isValid, isSubmitting }) => (
             <Form className={classes.form}>
+              <label
+                style={{
+                  display: "block",
+                  marginBottom: "-10px",
+                  marginTop: "20px",
+                  fontSize: "1.4em",
+                }}
+              >
+                Username
+              </label>
               <Field name="username">
                 {({ field, meta: { error, value, initialValue, touched } }: FieldProps) => (
                   <TextField
                     variant="outlined"
                     margin="normal"
                     fullWidth
                     id="username"
-                    label="Username"
                     type="text"
                     autoFocus
                     data-test="signin-username"
@@ -123,13 +132,22 @@ const SignInForm: React.FC<Props> = ({ authService }) => {
                   />
                 )}
               </Field>
+              <label
+                style={{
+                  display: "block",
+                  marginBottom: "-10px",
+                  marginTop: "20px",
+                  fontSize: "1.4em",
+                }}
+              >
+                Password
+              </label>
               <Field name="password">
                 {({ field, meta: { error, value, initialValue, touched } }: FieldProps) => (
                   <TextField
                     variant="outlined"
                     margin="normal"
                     fullWidth
-                    label="Password"
                     type="password"
                     id="password"
                     data-test="signin-password"