✨ Display & Delete in love list

app/my-loves/styles.scss

@@ -2,8 +2,21 @@
 	flex-grow: 1;
 	display: flex;
 	flex-direction: column;
-	gap: 10px;
-	padding: 10px;
+
+	& > .header {
+		display: flex;
+		flex-wrap: nowrap;
+		align-items: center;
+		gap: 20px;
+		padding: 20px;
+		width: 100%;
+		background-color: #d94253;
+		color: #ffffff;
+
+		& > .title {
+			font-size: 1.2rem;
+		}
+	}
 
 	& > .title {
 		font-size: 1.5rem;
@@ -16,24 +29,57 @@
 		flex-direction: column;
 
 		& > .loveItem {
-			display: flex;
-			flex-direction: column;
-			gap: 5px;
+			$buttonSize: 30px;
+			display: grid;
+			grid-template-columns: 1fr $buttonSize;
 			padding: 10px;
-			background-color: #d94253;
+			border-bottom: 1px solid #d94253;
+			background-color: #f9e2e5;
 
-			&:not(:last-child) {
-				border-bottom: 2px solid #d80135;
+			& > .infos {
+				display: flex;
+				flex-direction: column;
+				gap: 5px;
+
+				& > .location {
+					font-size: 1.1rem;
+					color: #d94253;
+				}
+
+				& > .comment {
+					color: #d94253;
+				}
+
+				& > .date {
+					font-size: 0.9rem;
+					font-weight: 300;
+					color: #d94253;
+				}
 			}
 
-			& > .date {
-				font-size: 1.1rem;
-				color: #ffffff;
-			}
+			& > .actionButtons {
+				display: flex;
+				flex-direction: column;
+				gap: 10px;
 
-			& > .description {
-				font-weight: 300;
-				color: #ffffff;
+				& > .actionButton {
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					padding: 5px;
+					width: $buttonSize;
+					height: $buttonSize;
+					border: none;
+					border-radius: 50%;
+					background-color: transparent;
+					color: #d94253;
+					transition: background-color 0.3s ease, color 0.3s ease;
+
+					&:hover {
+						background-color: #d94253;
+						color: #ffffff;
+					}
+				}
 			}
 		}
 	}