v0.4.6

frontend/src/app/(auth)/forgot-password/page.tsx

@@ -80,7 +80,7 @@ export default function Page() {
               label="Email*"
               value={email}
               onChange={handleEmailChange}
-              outlined
+              style="outlined"
               error={errors.email || errors.api}
             />,
           ]}

frontend/src/app/(auth)/login/page.tsx

@@ -93,7 +93,7 @@ export default function Page() {
           label="Email*"
           value={email}
           onChange={handleEmailChange}
-          outlined
+          style="outlined"
           error={errors.email || errors.api}
         />,
 
@@ -105,7 +105,7 @@ export default function Page() {
           label="Password*"
           value={password}
           onChange={handlePasswordChange}
-          outlined
+          style="outlined"
           error={errors.password || errors.api}
         />,
       ]}

frontend/src/app/(auth)/register/page.tsx

@@ -104,7 +104,7 @@ export default function Page() {
           label="Email*"
           value={email}
           onChange={handleEmailChange}
-          outlined
+          style="outlined"
           error={errors.email || errors.api}
         />,
 
@@ -124,7 +124,7 @@ export default function Page() {
               setShowPasswordCriteria(false);
             }
           }}
-          outlined
+          style="outlined"
           error={errors.password || errors.api}
           showPasswordCriteria={showPasswordCriteria}
           passwordCriteria={passwordCriteria}
@@ -138,7 +138,7 @@ export default function Page() {
           label="Retype Password*"
           value={confirmPassword}
           onChange={handleConfirmPasswordChange}
-          outlined
+          style="outlined"
           error={errors.confirmPassword || errors.api}
         />,
       ]}

frontend/src/app/(auth)/reset-password/page.tsx

@@ -101,7 +101,7 @@ export default function Page() {
               setShowPasswordCriteria(false);
             }
           }}
-          outlined
+          style="outlined"
           error={errors.password || errors.api}
           showPasswordCriteria={showPasswordCriteria}
           passwordCriteria={passwordCriteria}
@@ -115,7 +115,7 @@ export default function Page() {
           label="Retype Password*"
           value={confirmPassword}
           onChange={handleConfirmPasswordChange}
-          outlined
+          style="outlined"
           error={errors.confirmPassword || errors.api}
         />,
       ]}

frontend/src/app/(event)/[event-code]/page-client.tsx

@@ -18,9 +18,8 @@ import {
   useResultsContext,
 } from "@/features/event/results/context";
 import { ResultsInformation } from "@/features/event/results/lib/types";
-import ShareMenu from "@/features/event/results/share-menu";
 import HeaderSpacer from "@/features/header/components/header-spacer";
-import BaseDialog from "@/features/system-feedback/dialog/components/base";
+import ShareMenu from "@/features/share-menu/menu";
 import { cn } from "@/lib/utils/classname";
 
 export default function ClientPage({
@@ -107,20 +106,17 @@ function EventResults({ eventData }: { eventData: EventInformation }) {
   );
 
   const shareButton = (
-    <BaseDialog
-      title="Share Event"
-      description="Share this event with others"
+    <ShareMenu
+      eventTitle={eventTitle}
+      eventCode={eventCode}
       trigger={
         <EmptyButton
           buttonStyle="secondary"
           icon={<ShareIcon />}
           label="Share Event"
         />
       }
-      showCloseButton
-    >
-      <ShareMenu eventTitle={eventTitle} eventCode={eventCode} />
-    </BaseDialog>
+    />
   );
 
   return (

frontend/src/app/(event)/[event-code]/painting/page-client.tsx

@@ -8,10 +8,12 @@ import { useDebouncedCallback } from "use-debounce";
 
 import Checkbox from "@/components/checkbox";
 import MobileFooterIsland from "@/components/mobile-footer-island";
+import TextInputField from "@/components/text-input-field";
 import { useAvailability } from "@/core/availability/use-availability";
 import { EventRange } from "@/core/event/types";
 import ActionButton from "@/features/button/components/action";
 import LinkButton from "@/features/button/components/link";
+import { MAX_DISPLAY_NAME_LENGTH } from "@/features/event/availability/constants";
 import { validateAvailabilityData } from "@/features/event/availability/validate-data";
 import TimeZoneSelector from "@/features/event/components/selectors/timezone";
 import { ScheduleGrid } from "@/features/event/grid";
@@ -87,23 +89,12 @@ export default function ClientPage({
   //   return () => removeToast(toastId);
   // }, [addToast, removeToast]);
 
-  const handleNameChange = useDebouncedCallback(async (displayName) => {
-    if (errors.displayName) setErrors((prev) => ({ ...prev, displayName: "" }));
-
-    if (displayName === "") {
-      setErrors((prev) => ({
-        ...prev,
-        displayName: MESSAGES.ERROR_NAME_MISSING,
-      }));
-      return;
-    }
-
+  const checkNameAvailability = useDebouncedCallback(async (displayName) => {
     try {
       await clientPost(ROUTES.availability.checkDisplayName, {
         event_code: eventCode,
         display_name: displayName,
       });
-      setErrors((prev) => ({ ...prev, displayName: "" }));
     } catch (e) {
       const error = e as ApiErrorResponse;
       if (error.badRequest) {
@@ -117,6 +108,26 @@ export default function ClientPage({
     }
   }, 300);
 
+  const handleNameChange = (value: string) => {
+    setDisplayName(value);
+    if (value === "") {
+      checkNameAvailability.cancel();
+      setErrors((prev) => ({
+        ...prev,
+        displayName: MESSAGES.ERROR_NAME_MISSING,
+      }));
+    } else if (value.length > MAX_DISPLAY_NAME_LENGTH) {
+      checkNameAvailability.cancel();
+      setErrors((prev) => ({
+        ...prev,
+        displayName: MESSAGES.ERROR_NAME_LENGTH,
+      }));
+    } else {
+      setErrors((prev) => ({ ...prev, displayName: "" }));
+      checkNameAvailability(value);
+    }
+  };
+
   // DEFAULT NAME SETTING
   const [saveDefaultName, setSaveDefaultName] = useState(false);
 
@@ -138,12 +149,12 @@ export default function ClientPage({
     // If the user has a default name, use it to autofill the name field
     const newName = session.user.defaultName;
     setDisplayName(newName);
-    handleNameChange(newName);
+    checkNameAvailability(newName);
     addToast("success", MESSAGES.INFO_NAME_AUTOFILLED, {
       title: "NAME AUTOFILLED",
     });
     nameInitialized.current = true;
-  }, [session, setDisplayName, addToast, handleNameChange]);
+  }, [session, setDisplayName, addToast, checkNameAvailability]);
 
   // SUBMIT AVAILABILITY
   const handleSubmitAvailability = async () => {
@@ -266,7 +277,6 @@ export default function ClientPage({
             errors={errors}
             session={session}
             displayName={displayName}
-            setDisplayName={setDisplayName}
             handleNameChange={handleNameChange}
             saveDefaultName={saveDefaultName}
             setSaveDefaultName={setSaveDefaultName}
@@ -319,7 +329,6 @@ export default function ClientPage({
               errors={errors}
               session={session}
               displayName={displayName}
-              setDisplayName={setDisplayName}
               handleNameChange={handleNameChange}
               saveDefaultName={saveDefaultName}
               setSaveDefaultName={setSaveDefaultName}
@@ -362,15 +371,13 @@ function DisplayNameInput({
   errors,
   session,
   displayName,
-  setDisplayName,
   handleNameChange,
   saveDefaultName,
   setSaveDefaultName,
 }: {
   errors: Record<string, string>;
   session: Session;
   displayName: string;
-  setDisplayName: (name: string) => void;
   handleNameChange: (name: string) => void;
   saveDefaultName: boolean;
   setSaveDefaultName: (save: boolean) => void;
@@ -379,26 +386,20 @@ function DisplayNameInput({
     <div className="h-fit w-full shrink-0 space-y-4 overflow-y-auto md:w-80">
       <div className="space-y-2">
         <div className="w-fit">
-          <p
-            className={`text-error text-right text-xs ${errors.displayName ? "visible" : "invisible"}`}
-          >
-            {errors.displayName ? errors.displayName : "Error Placeholder"}
-          </p>
           Hi,{" "}
-          <input
-            required
+          <TextInputField
+            id="displayName"
             type="text"
+            label="Display name"
+            style="inline"
             value={displayName}
-            onChange={(e) => {
-              setDisplayName(e.target.value);
-              handleNameChange(e.target.value);
-            }}
+            onChange={handleNameChange}
             placeholder="add your name"
-            className={`inline-block w-auto border-b bg-transparent px-1 focus:outline-none ${
-              errors.displayName
-                ? "border-error placeholder:text-error"
-                : "border-gray-400"
-            }`}
+            error={errors.displayName}
+            maxLength={{
+              length: MAX_DISPLAY_NAME_LENGTH,
+              error: MESSAGES.ERROR_NAME_LENGTH,
+            }}
           />
           <br />
           add your availabilities here

frontend/src/app/settings/(submenus)/page.tsx

@@ -62,11 +62,11 @@ export default function Page() {
   };
 
   const handleDefaultNameChange = (value: string) => {
+    setDefaultName(value);
     if (value.length > MAX_DEFAULT_NAME_LENGTH) {
       setDefaultNameError(MESSAGES.ERROR_DEFAULT_NAME_LENGTH);
     } else {
       setDefaultNameError("");
-      setDefaultName(value);
     }
   };
 
@@ -100,7 +100,11 @@ export default function Page() {
                 type="text"
                 onChange={handleDefaultNameChange}
                 error={defaultNameError}
-                outlined
+                style="outlined"
+                maxLength={{
+                  length: MAX_DEFAULT_NAME_LENGTH,
+                  error: MESSAGES.ERROR_DEFAULT_NAME_LENGTH,
+                }}
               />
             </div>
             <div