⚡ Upgrade design & moved backend here & login and settings work with api

components/Input/Input.tsx

@@ -5,7 +5,7 @@
 // ---------------------------------------------------------------------------------------------------------------------
 
 // ------------------------------------------------------ React --------------------------------------------------------
-import { forwardRef, useState } from 'react';
+import { forwardRef, MouseEvent, useState } from 'react';
 // ---------------------------------------------------------------------------------------------------------------------
 
 // ------------------------------------------------- Assets & Styles ---------------------------------------------------
@@ -14,75 +14,51 @@ import EyeIcon from '@/assets/EyeIcon';
 import './styles.scss';
 // ---------------------------------------------------------------------------------------------------------------------
 
-const Input = forwardRef(function InputComponent(
-	{
-		type = 'text',
-		label,
-		name,
-		value,
-		defaultValue,
-		autoComplete,
-		required = false,
-		onChange,
-		onKeyUp,
-		onKeyDown,
-	},
-	ref
-) {
-	const [isFocused, setIsFocused] = useState(
-		defaultValue || value ? true : false
-	);
-	const [passwordVisibility, setPasswordVisibility] = useState(false);
+const Input = ({
+	name = '',
+	type = '',
+	placeholder = '',
+	defaultValue = '',
+	required = false,
+	autoComplete = 'off',
+}) => {
+	const [isPasswordVisible, setIsPasswordVisible] = useState(false);
 
-	const defaultOnBlur = (ev) => {
-		if (ev.currentTarget.value != '') {
-			return;
-		}
+	const togglePasswordVisibility = (ev: MouseEvent) => {
+		ev.stopPropagation();
 
-		setIsFocused(false);
+		setIsPasswordVisible((prev) => !prev);
 	};
 
 	return (
 		<div className='inputContainer'>
 			<input
-				ref={ref}
 				type={
 					type == 'password'
-						? passwordVisibility
+						? isPasswordVisible
 							? 'text'
 							: 'password'
 						: type
 				}
 				name={name}
 				id={name}
-				value={value}
+				placeholder={placeholder}
 				defaultValue={defaultValue}
 				autoComplete={autoComplete}
 				required={required}
-				onChange={onChange}
-				onKeyUp={onKeyUp}
-				onKeyDown={onKeyDown}
 				className='input'
-				onFocus={() => setIsFocused(true)}
-				onBlur={defaultOnBlur}
 			/>
-			<label
-				htmlFor={name}
-				className={`inputLabel ${isFocused ? 'focused' : ''}`}
-			>
-				{label}
-			</label>
 			{type == 'password' && (
 				<button
 					type='button'
 					className='passwordToggleButton'
-					onClick={() => setPasswordVisibility((prev) => !prev)}
+					onClick={togglePasswordVisibility}
 				>
-					{passwordVisibility ? <EyeSlashIcon /> : <EyeIcon />}
+					{isPasswordVisible ? <EyeSlashIcon /> : <EyeIcon />}
 				</button>
 			)}
 		</div>
 	);
-});
+};
 
 export default Input;

components/Input/styles.scss

@@ -2,35 +2,19 @@
 	position: relative;
 	font-size: 1.1rem;
 
-	& > .inputLabel {
-		position: absolute;
-		top: 48%;
-		left: 10px;
-		transform: translateY(-50%);
-		padding: 0 4px;
-		background-color: #d94253;
-		font-size: 1em;
-		font-weight: 300;
-		color: #ffffff;
-		transition: top 0.3s ease, font-size 0.3s ease;
-		pointer-events: none;
-
-		&.focused {
-			top: 0;
-			font-size: 0.8em;
-		}
-	}
-
 	& > .input {
-		padding: 10px 20px;
+		padding: 7px 14px;
 		width: 100%;
-		border: 1px solid #ffffff;
+		border: 1px solid #d94253;
 		border-radius: 5px;
-		background-color: #d94253;
-		font-size: 1em;
-		font-weight: 300;
-		color: #ffffff;
+		background-color: #f5cfd3;
+		font-size: 0.9rem;
+		color: #d94253;
 		outline: none;
+
+		&::placeholder {
+			color: #d94253;
+		}
 	}
 
 	& > .passwordToggleButton {
@@ -45,6 +29,6 @@
 		height: 100%;
 		border: none;
 		background-color: transparent;
-		color: #ffffff;
+		color: #d94253;
 	}
 }