Fixed heading, dimension, and password input

compass/app/auth/forgot_password/page.tsx

@@ -40,15 +40,14 @@ export default function Page()  {
         <>
             <Paper>
                 <form
-                className="mb-0 mt-6 mb-6 space-y-4 rounded-lg p-4 shadow-lg sm:p-6 lg:p-8 bg-white">
-                    <h1 className="text-2xl font-bold text-purple-700 sm:text-3xl">Forgot password</h1>
+                className="mb-0 m-auto mt-6 space-y-4 rounded-lg p-4 shadow-lg sm:p-6 lg:p-8 bg-white max-w-xl">
+                    <h1 className="font-bold text-xl text-purple-800">Forgot password</h1>
                     <div className="mb-4">
                         <Input type='email'
                         title="Enter your email address"
                         placeholder="janedoe@gmail.com"
                         //setting a placeholder in the email input box
                         value={confirmEmail}
-                        icon={'EmailInputIcon'}
                         onChange={(e) => {
                             setconfirmEmail(e.target.value);
                         }}/>

compass/app/auth/login/page.tsx

@@ -55,7 +55,7 @@ export default function Page() {
                     <h1 className='font-bold text-xl text-purple-800'>Login</h1>
 
                     <div className="mb-4">
-                        <Input type='email' title="Email" placeholder="janedoe@gmail.com" icon={'EmailInputIcon'} onChange={handleEmailChange} required />
+                        <Input type='email' title="Email" placeholder="janedoe@gmail.com" onChange={handleEmailChange} required />
                     </div>
 
                     <div className="mb-6">

compass/app/auth/new_password/page.tsx

@@ -7,6 +7,7 @@ import Input from '@/components/Input';
 import Button from '@/components/Button';
 
 import Paper from '@/components/auth/Paper';
+import PasswordInput from '@/components/auth/PasswordInput';
 
 
 function isStrongPassword(password: string): boolean {
@@ -37,13 +38,13 @@ export default function Page() {
                console.log('Passwords do not match. Please try again.');
              }
          }}
-         className="mb-0 mt-6 mb-6 space-y-4 rounded-lg p-4 shadow-lg sm:p-6 lg:p-8 bg-white"
+         className="mb-0 m-auto mt-6 space-y-4 rounded-lg p-4 shadow-lg sm:p-6 lg:p-8 bg-white max-w-xl"
        >
          <div className="text-center sm:text-left">
-           <h1 className="text-2xl font-bold text-blue-900 sm:text-3xl">New Password</h1>
+           <h1 className="font-bold text-xl text-purple-800">New Password</h1>
          </div>
          <div className="mb-4">
-           <Input
+           <PasswordInput
                type="password"
                title="Enter New Password"
                value={newPassword}
@@ -60,7 +61,7 @@ export default function Page() {
                               </p>
                             </div>}
          <div className="mb-6">
-           <Input
+           <PasswordInput
                type="password"
                title="Confirm Password"
                value={confirmPassword}

compass/components/Input.tsx

@@ -14,18 +14,21 @@ const Input: FunctionComponent<InputProps> = ({ icon, type, title, placeholder,
     <div>
       <label
   htmlFor={title}
-  // this class name should be simplified, was just having problems with it
   className={valid ? "block overflow-hidden rounded-md border border-gray-200 px-3 py-2 shadow-sm focus-within:border-purple-600 focus-within:ring-1 focus-within:ring-purple-600" : "block overflow-hidden rounded-md border border-gray-200 px-3 py-2 shadow-sm focus-within:border-red-600 focus-within:ring-1 focus-within:ring-red-600"}
 >
   <span className="text-xs font-semibold text-gray-700"> {title} </span>
-
+  <div className="mt-1 flex items-center">
   <input
     type={type}
     id={title}
     placeholder={placeholder}
     onChange={onChange}
-    className="mt-1 w-full border-none p-0 focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm"
+    className="w-full border-none p-0 focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm"
   />
+  <span className="inline-flex items-center px-3 text-gray-500">
+          {icon}
+  </span>
+  </div>
 </label>
 </div>
   );

compass/components/auth/EmailInput.tsx

@@ -1,17 +0,0 @@
-import React, { useState } from 'react';
-import Input from '@/components/Input'
-import { InputProps } from '@/utils/classes/InputProps';
-
-const EmailInput: React.FunctionComponent<InputProps> = ({ type, title, placeholder, ...rest }) => {
-
-  return (
-    <Input
-      type='email'
-      title="Enter your email address"
-      placeholder="janedoe@gmail.com"
-      iconKey={'EmailInputIcon'}
-    />
-  );
-};
-
-export default EmailInput;

compass/components/auth/PasswordInput.tsx

@@ -1,47 +1,34 @@
-'use client'
+import React, { useState, FunctionComponent, ChangeEvent, ReactNode } from 'react';
+import Input from '../Input'; // Adjust the import path as necessary
 import { Icons } from '@/utils/constants';
-import React, { FunctionComponent, InputHTMLAttributes, ReactElement, ReactNode, useState} from 'react';
 
-
-type InputProps = InputHTMLAttributes<HTMLInputElement> & {
-  title?: string; // Assuming title is always a string
-  type?: string;
-  placeholder?: string;
+type PasswordInputProps = {
+  title?: ReactNode; // Assuming you might want to reuse title, placeholder etc.
+  placeholder?: ReactNode;
+  valid?: boolean;
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
 };
 
-const PasswordInput: FunctionComponent<InputProps> = ({ type, title, placeholder, ...rest }) => {
+const PasswordInput: FunctionComponent<PasswordInputProps> = ({ onChange, valid = true, ...rest }) => {
+  const [visible, setVisible] = useState(false);
 
-  const [visible, setVisible] = useState (false);
-  const PasswordIcon = visible ?  Icons['HidePasswordIcon'] : Icons['UnhidePasswordIcon'];
+  const toggleVisibility = () => {
+    setVisible(!visible);
+  };
 
+  const PasswordIcon = visible ? Icons['HidePasswordIcon'] : Icons['UnhidePasswordIcon'];
+
+  // Render the Input component and pass the PasswordIcon as an icon prop
   return (
-    <div className="mb-4">
-      {title && (
-        <div className="mb-1">
-          <label htmlFor={title} className="text-sm font-semibold text-gray-700">
-            {title}
-          </label>
-        </div>
-      )}
-      <div className="flex items-center border border-gray-300 rounded-md shadow-sm overflow-hidden">
-
-        <input
-          {...rest}
-          type={visible ? "text" : "password"}
-          id={title}
-          placeholder={placeholder}
-          className="w-full border-none p-3 text-sm focus:ring-0"
-          style={{ boxShadow: 'none' }} // This ensures that the input doesn't have an inner shadow
-        />
-
-        {PasswordIcon && (
-          <span className="inline-flex items-center px-3 border-r border-gray-300 text-gray-500">
-            <PasswordIcon className="h-5 w-5" onClick={() => setVisible(!visible)}/>
-          </span>
-        )}
-
-      </div>
-    </div>
+    <Input
+      {...rest}
+      type={visible ? "text" : "password"}
+      onChange={onChange}
+      valid={valid}
+      icon={
+          <PasswordIcon className="h-5 w-5" onClick={toggleVisibility} />
+      }
+    />
   );
 };