✨ Display & Delete in love list

app/settings/styles.scss

@@ -9,11 +9,11 @@
 		display: grid;
 		grid-template-columns: 25px 1fr;
 		align-items: center;
-		gap: 15px;
+		gap: 10px;
 		padding: 15px;
+		width: 100%;
 		background-color: #d94253;
 		color: #ffffff;
-		box-shadow: 0 0 6px rgba(255, 255, 255, 0.2);
 
 		& > .backButton {
 			display: flex;
@@ -27,8 +27,6 @@
 	}
 
 	& > .settingsContainer {
-		flex-grow: 1;
-		position: relative;
 		display: flex;
 		flex-direction: column;
 		gap: 20px;
@@ -43,34 +41,43 @@
 			color: #ffffff;
 		}
 
-		& > .separator {
-			display: block;
-			margin: 20px auto;
-			width: 90%;
-			height: 1px;
-			background-color: #d94253;
-			background: linear-gradient(
-				90deg,
-				rgba(#d94253, 0) 0%,
-				rgba(#d94253, 1) 10%,
-				rgba(#d94253, 1) 90%,
-				rgba(#d94253, 0) 100%
-			);
-		}
-
-		& > .passwordForm {
+		& > .card {
 			display: flex;
 			flex-direction: column;
-			gap: 10px;
+			gap: 5px;
+			padding: 10px;
+			border: 1px solid #d94253;
+			border-radius: 10px;
+			background-color: #f9e2e5;
+
+			& > .cardTitle {
+				font-size: 1rem;
+				color: #d94253;
+			}
+
+			& > .inputsContainer {
+				display: flex;
+				flex-direction: column;
+				gap: 5px;
+				padding: 15px 0;
+			}
 
 			& > .submitButton {
 				padding: 7px 21px;
-				border: none;
+				border: 1px solid #e1e1e1;
 				border-radius: 5px;
-				background-color: #d94253;
+				background-color: #ffffff;
 				font-size: 1rem;
-				color: #ffffff;
+				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;
+				}
 			}
 		}
 
@@ -81,92 +88,12 @@
 			align-items: center;
 			gap: 10px;
 			padding: 7px 21px;
-			border: 1px solid #d94253;
+			border: none;
 			border-radius: 5px;
-			background-color: #d94253;
+			background-color: #f9e2e5;
 			font-size: 1rem;
-			color: #ffffff;
+			color: #d94253;
 			cursor: pointer;
 		}
-
-		& > .popupOverlay {
-			position: absolute;
-			top: 0;
-			left: 0;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			width: 100%;
-			height: 100%;
-			background-color: rgba(#ffffff, 0.5);
-			backdrop-filter: blur(5px);
-
-			& > .popup {
-				z-index: 1;
-				position: relative;
-				display: flex;
-				flex-direction: column;
-				margin: 10px;
-				background-color: #ffffff;
-				border: 1px solid #d94253;
-				border-radius: 5px;
-
-				& > .popupHeader {
-					display: grid;
-					grid-template-columns: 1fr 20px;
-					align-items: center;
-					gap: 20px;
-					padding: 10px;
-
-					& > .popupTitle {
-						font-size: 1.2rem;
-						color: #d94253;
-					}
-
-					& > .popupCloseButton {
-						display: flex;
-						justify-content: center;
-						align-items: center;
-						border: none;
-						border-radius: 5px;
-						background-color: transparent;
-						color: #d94253;
-						cursor: pointer;
-						transition: background-color 0.3s ease;
-
-						&:hover {
-							background-color: rgba(#d94253, 0.2);
-						}
-					}
-				}
-
-				& > .popupContent {
-					padding: 10px;
-					color: #d94253;
-				}
-
-				& > .popupButtonsContainer {
-					display: flex;
-					flex-wrap: nowrap;
-					justify-content: space-evenly;
-					align-items: center;
-					padding: 10px;
-
-					& > .popupButton {
-						display: grid;
-						grid-template-columns: 20px 1fr;
-						align-items: center;
-						gap: 5px;
-						padding: 5px 15px;
-						border: none;
-						border-radius: 5px;
-						background-color: #d94253;
-						font-size: 1rem;
-						color: #ffffff;
-						cursor: pointer;
-					}
-				}
-			}
-		}
 	}
 }