✨ Display & Delete in love list

app/auth/login/page.tsx

@@ -19,11 +19,13 @@ import { useActions } from './hooks/useActions';
 // ------------------------------------------------- Assets & Styles ---------------------------------------------------
 import Loader from '@/assets/Loader';
 import './styles.scss';
+import Input from '@/components/Input/Input';
 // ---------------------------------------------------------------------------------------------------------------------
 
 const Login = () => {
-	const [error, setError] = useState(null);
+	const [error, setError] = useState<string | null>(null);
 	const [isLoading, setIsLoading] = useState(false);
+
 	const { handleSubmit } = useActions({ setError, setIsLoading });
 
 	return (
@@ -37,36 +39,29 @@ const Login = () => {
 				priority
 			/>
 
-			<form
-				className='formContainer'
-				onSubmit={handleSubmit}
-			>
+			<div className='formContainer'>
 				<h1 className='formTitle'>Connexion</h1>
 
-				<div className='form'>
+				<form
+					className='form'
+					onSubmit={handleSubmit}
+				>
 					{error && <p className='error'>{error}</p>}
-					<div className='inputContainer'>
-						<input
-							type='text'
-							name='username'
-							className='input'
-							required
-						/>
-						<label className='inputLabel'>
-							Nom d&apos;utilisateur
-						</label>
-					</div>
-					<div className='inputContainer'>
-						<input
-							type='password'
-							name='password'
-							className='input'
-							required
-						/>
-						<label className='inputLabel'>Mot de passe</label>
-					</div>
-				</div>
-				<div className='buttonsContainer'>
+					<Input
+						name='username'
+						type='text'
+						placeholder="Nom d'utilisateur"
+						autoComplete='username'
+						required
+					/>
+					<Input
+						type='password'
+						name='password'
+						placeholder='Mot de passe'
+						autoComplete='password'
+						required
+					/>
+
 					<button
 						type='submit'
 						className='submitButton'
@@ -75,8 +70,8 @@ const Login = () => {
 						Se connecter
 						{isLoading && <Loader />}
 					</button>
-				</div>
-			</form>
+				</form>
+			</div>
 		</div>
 	);
 };

app/auth/login/styles.scss

@@ -20,69 +20,31 @@
 		flex-direction: column;
 		align-items: stretch;
 		gap: 10px;
-		padding: 20px 30px;
 		width: 95svw;
 		max-width: 450px;
-		border: 2px solid #fefefa;
-		border-radius: 7px;
-		background-color: #d94253;
 
 		& > .formTitle {
-			margin-bottom: 20px;
 			font-size: 2rem;
 			font-weight: 300;
 			text-align: center;
-			color: #fefefa;
+			color: #d94253;
 		}
 
 		& > .form {
 			display: flex;
 			flex-direction: column;
 			align-items: stretch;
-			gap: 20px;
+			gap: 15px;
+			padding: 20px;
+			border: 1px solid #d94253;
+			border-radius: 10px;
+			background-color: #f9e2e5;
 
 			& > .error {
 				text-align: center;
 				color: #fefefa;
 			}
 
-			& > .inputContainer {
-				position: relative;
-				display: grid;
-
-				& > .inputLabel {
-					position: absolute;
-					top: 50%;
-					left: 15px;
-					transform: translateY(-50%);
-					padding: 5px;
-					background-color: #d94253;
-					color: #fefefa;
-					user-select: none;
-					pointer-events: none;
-					transition: top 0.3s ease, left 0.3s ease,
-						font-size 0.3s ease, transform 0.3s ease;
-				}
-
-				& > .input {
-					padding: 10px;
-					border: 1px solid #fefefa;
-					border-radius: 5px;
-					background-color: #d94253;
-					outline: none;
-					font-size: 1em;
-					color: #fefefa;
-
-					&:focus + .inputLabel,
-					&:not(:placeholder-shown) + .inputLabel {
-						top: 0;
-						left: 10px;
-						transform: translateY(-50%);
-						font-size: 0.9em;
-					}
-				}
-			}
-
 			& > .forgetLink {
 				position: relative;
 				width: max-content;
@@ -106,28 +68,29 @@
 					width: 100%;
 				}
 			}
-		}
-
-		& > .buttonsContainer {
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			gap: 30px;
-			margin-top: 15px;
 
 			& > .submitButton {
+				align-self: center;
 				position: relative;
 				display: flex;
 				justify-content: center;
 				align-items: center;
 				gap: 10px;
 				padding: 7px 42px;
-				border: 1px solid #fefefa;
+				border: 1px solid #e1e1e1;
 				border-radius: 5px;
-				background-color: #fefefa;
-				font-size: 0.9rem;
+				background-color: #ffffff;
+				font-size: 1rem;
 				color: #d94253;
 				cursor: pointer;
+				transition: border-color 0.3s ease, background-color 0.3s ease,
+					color 0.3s ease;
+
+				&:hover {
+					border-color: #d94253;
+					background-color: #d94253;
+					color: #ffffff;
+				}
 
 				& > svg {
 					position: absolute;