simplifying

src/app.css

@@ -280,7 +280,7 @@ body {
 .input-group,
 .textarea-group {
   position: relative;
-  margin-top: 45px;
+  margin-top: 30px;
 }
 
 input.underlinedInput,
@@ -343,10 +343,10 @@ textarea.underlinedInput:not(:placeholder-shown) ~ label {
   color: var(--color-blue);
 }
 
-.delete input.underlinedInput:focus ~ label,
+.delete > input.underlinedInput:focus ~ label,
-.delete input.underlinedInput:not(:placeholder-shown) ~ label,
+.delete > input.underlinedInput:not(:placeholder-shown) ~ label,
-.delete textarea.underlinedInput:focus ~ label,
+.delete > textarea.underlinedInput:focus ~ label,
-.delete textarea.underlinedInput:not(:placeholder-shown) ~ label {
+.delete > textarea.underlinedInput:not(:placeholder-shown) ~ label {
   color: var(--color-red);
 }
 

src/components/ui/Input.tsx

@@ -4,7 +4,6 @@ export interface InputProps extends JSX.InputHTMLAttributes<HTMLInputElement> {
   label?: string;
   error?: string;
   helperText?: string;
-  containerClass?: string;
   ref?: HTMLInputElement | ((el: HTMLInputElement) => void);
 }
 
@@ -13,18 +12,16 @@ export default function Input(props: InputProps) {
     "label",
     "error",
     "helperText",
-    "class",
-    "containerClass",
     "ref"
   ]);
 
   return (
-    <div class={local.containerClass || "input-group"}>
+    <div class="input-group">
       <input
         {...others}
         ref={local.ref}
         placeholder=" "
-        class={`underlinedInput bg-transparent ${local.class || ""}`}
+        class={`underlinedInput w-full bg-transparent pr-10`}
         aria-invalid={!!local.error}
         aria-describedby={local.error ? `${others.id}-error` : undefined}
       />

src/components/ui/PasswordInput.tsx

@@ -14,9 +14,7 @@ export default function PasswordInput(props: PasswordInputProps) {
   const [local, inputProps] = splitProps(props, [
     "showStrength",
     "defaultVisible",
-    "passwordValue",
+    "passwordValue"
-    "class",
-    "containerClass"
   ]);
 
   const [showPassword, setShowPassword] = createSignal(
@@ -24,13 +22,12 @@ export default function PasswordInput(props: PasswordInputProps) {
   );
 
   return (
-    <div class="flex flex-col items-center gap-2">
+    <div class="flex flex-col gap-2">
-      <div class={local.containerClass || "input-group relative mx-4 mb-2"}>
+      <div class={"input-group relative"}>
         <Input
           {...inputProps}
           type={showPassword() ? "text" : "password"}
-          class={`w-full pr-10 ${local.class || ""}`}
+          class={``}
-          containerClass=""
         />
 
         <button

src/routes/account.tsx

@@ -784,7 +784,6 @@ export default function AccountPage() {
                         disabled={passwordChangeLoading()}
                         title="Password must be at least 8 characters"
                         label="Old Password"
-                        containerClass="input-group relative mx-4 mb-6"
                       />
                     </Show>
 
@@ -799,7 +798,6 @@ export default function AccountPage() {
                       label="New Password"
                       showStrength
                       passwordValue={newPassword()}
-                      containerClass="input-group relative mx-4 mb-2"
                     />
                     <PasswordInput
                       ref={newPasswordConfRef}
@@ -808,8 +806,7 @@ export default function AccountPage() {
                       onInput={handlePasswordConfChange}
                       disabled={passwordChangeLoading()}
                       title="Password must be at least 8 characters"
-                      label="New Password Confirmation"
+                      label="New Password Conf."
-                      containerClass="input-group relative mx-4 mb-2"
                     />
 
                     <Show
@@ -907,7 +904,7 @@ export default function AccountPage() {
                       }
                     >
                       <form onSubmit={deleteAccountTrigger}>
-                        <div class="flex w-full justify-center">
+                        <div class="delete flex w-full justify-center">
                           <PasswordInput
                             ref={deleteAccountPasswordRef}
                             required
@@ -915,7 +912,6 @@ export default function AccountPage() {
                             disabled={deleteAccountButtonLoading()}
                             title="Enter your password to confirm account deletion"
                             label="Enter Password"
-                            containerClass="input-group delete mx-4"
                           />
                         </div>
 

src/routes/login/index.tsx

@@ -11,7 +11,6 @@ import { getEvent } from "vinxi/http";
 import GoogleLogo from "~/components/icons/GoogleLogo";
 import GitHub from "~/components/icons/GitHub";
 import CountdownCircleTimer from "~/components/CountdownCircleTimer";
-import PasswordStrengthMeter from "~/components/PasswordStrengthMeter";
 import { isValidEmail, validatePassword } from "~/lib/validation";
 import { getClientCookie } from "~/lib/cookies.client";
 import { env } from "~/env/client";
@@ -399,45 +398,36 @@ export default function LoginPage() {
           </Show>
 
           <form onSubmit={formHandler} class="flex flex-col px-2 py-4">
-            <div class="flex justify-center">
+            <Input
-              <Input
+              type="email"
-                type="email"
+              required
-                required
+              ref={emailRef}
-                ref={emailRef}
+              title="Please enter a valid email address"
-                title="Please enter a valid email address"
+              label="Email"
-                label="Email"
+            />
-                containerClass="input-group mx-4"
-              />
-            </div>
 
             <Show when={usePassword() || register()}>
-              <div class="-mt-4 flex justify-center">
+              <PasswordInput
-                <PasswordInput
+                required
-                  required
+                minLength={8}
-                  minLength={8}
+                ref={passwordRef}
-                  ref={passwordRef}
+                onInput={register() ? handlePasswordChange : undefined}
-                  onInput={register() ? handlePasswordChange : undefined}
+                title="Password must be at least 8 characters"
-                  title="Password must be at least 8 characters"
+                label="Password"
-                  label="Password"
+                showStrength={register()}
-                  containerClass="input-group mx-4 flex"
+                passwordValue={register() ? password() : undefined}
-                  showStrength={register()}
+              />
-                  passwordValue={register() ? password() : undefined}
-                />
-              </div>
             </Show>
 
             <Show when={register()}>
-              <div class="flex justify-center">
+              <PasswordInput
-                <PasswordInput
+                required
-                  required
+                minLength={8}
-                  minLength={8}
+                ref={passwordConfRef}
-                  ref={passwordConfRef}
+                onInput={handlePasswordConfChange}
-                  onInput={handlePasswordConfChange}
+                title="Password must be at least 8 characters and match the password above"
-                  title="Password must be at least 8 characters and match the password above"
+                label="Confirm Password"
-                  label="Confirm Password"
+              />
-                  containerClass="input-group mx-4"
-                />
-              </div>
             </Show>
 
             <Show when={register()}>