Starting to fix helper error text

NYPL · Nov 26, 2024 · 2863e93 · 2863e93
1 parent f1e65a6
commit 2863e93
Showing 1 changed file with 12 additions and 11 deletions.
diff --git a/src/components/MyAccount/NewSettings/UsernameForm.tsx b/src/components/MyAccount/NewSettings/UsernameForm.tsx
@@ -114,21 +114,22 @@ const UsernameForm = ({ patron, usernameState }: UsernameFormProps) => {
           sx={{
             width: { base: "87%", md: "300px" },
             display: "flex",
-            flexDirection: "column-reverse",
-            label: {
-              paddingTop: "xxs",
-              fontWeight: "400",
-              fontSize: "12px",
-              lineHeight: "150%",
-              color: error ? "ui.error.primary" : "ui.black",
-            },
+            flexDirection: "column",
+            // label: {
+            //   paddingTop: "xxs",
+            //   fontWeight: "400",
+            //   fontSize: "12px",
+            //   lineHeight: "150%",
+            //   color: error ? "ui.error.primary" : "ui.black",
+            // },
           }}
           value={tempUsername}
           id="username-input"
-          labelText="Must be 5-15 characters and use only letters (a-z) and numbers (0-9)"
-          showLabel
+          labelText="Username"
+          showLabel={false}
+          invalidText="Must be 5-15 characters and use only letters (a-z) and numbers (0-9)"
           isInvalid={error && !validateUsername(tempUsername)}
-          showHelperInvalidText={false}
+          showHelperInvalidText={true}
           onChange={handleInputChange}
           isClearable
           isClearableCallback={() => setError(true)}