FINISH: Login Page Design

frontend/src/components/Layout/Input.tsx

@@ -2,6 +2,7 @@ import React from "react";
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   extraClasses?: string;
+  children?: React.ReactNode;
 }
 
 const Input: React.FC<InputProps> = ({
@@ -10,19 +11,26 @@ const Input: React.FC<InputProps> = ({
   placeholder = "",
   value = "",
   extraClasses = "",
-  onChange = () => {},
+  onChange = () => { },
+  children,
   ...props // all other HTML input props
 }) => {
   return (
-    <input
-      name={name}
-      type={type}
-      placeholder={placeholder}
-      value={value}
-      onChange={onChange}
-      {...props}
-      className={`${extraClasses} p-2 rounded-[1rem] w-[20vw] focus:w-[30vw] bg-black/40 border border-gray-300 focus:border-purple-500 focus:outline-purple-500 text-center text-white text-xl transition-all`}
-    />
+    <>
+    <div className="flex flex-col items-center">
+      <input
+        name={name}
+        type={type}
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+        {...props}
+        className={`${extraClasses} relative p-2 rounded-[1rem] w-[20vw] focus:w-[21vw] bg-black/40 border border-gray-300 focus:border-purple-500 focus:outline-purple-500 text-center text-white text-xl transition-all`}
+      />
+
+    </div>
+    </>
+    
   );
 };
 

frontend/src/components/Layout/Theme.tsx

@@ -20,7 +20,7 @@ const Theme: React.FC = () => {
     const nextIndex = (currentIndex + 1) % themes.length;
     const nextTheme = themes[nextIndex];
     setTheme(nextTheme);
-    document.body.setAttribute("data-theme", nextTheme); // Update globally
+    document.body.setAttribute("data-theme", nextTheme); 
   };
 
   return (