add notification list, add notification page

src/app/styles/header.scss

@@ -124,8 +124,10 @@
 		}
 	}
 
-	.notification-dropdown {
-		.notification-header {
+	.notification {
+		/* &-dropdown {} */
+
+		&-header {
 			padding: 15px 20px;
 			border-bottom: 1px solid v.$b-color-1;
 			display: flex;
@@ -138,29 +140,30 @@
 				font-weight: 600;
 				color: v.$text-p;
 			}
-
-			.notification-count {
-				font-size: 12px;
-				color: v.$p-color;
-				font-weight: 500;
-			}
 		}
 
-		.notification-list {
-			max-height: 400px;
+		&-count {
+			font-size: 12px;
+			color: v.$p-color;
+			font-weight: 500;
+			cursor: pointer;
+		}
+
+		&-list {
+			max-height: 600px;
 			overflow-y: auto;
 		}
 
-		.notification-item {
+		&-item {
 			display: flex;
-			gap: 12px;
-			padding: 15px 20px;
+			gap: 4px;
+			padding: 5px;
 			border-bottom: 1px solid v.$b-color-1;
 			transition: background-color 0.2s;
 			cursor: pointer;
 		}
 
-		.notification-title {
+		&-title {
 			display: block;
 			font-size: 15px;
 			font-weight: 700;
@@ -168,24 +171,43 @@
 			margin-bottom: 6px;
 		}
 
-		.notification-icon {
-			font-size: 24px;
-			flex-shrink: 0;
+		&-content {
+			width: 100%;
+			position: relative;
+			padding: 15px 5px;
+			/* 			display: flex;
+			align-items: center; */
 		}
 
-		.notification-text {
+		&-icon {
+			font-size: 24px;
+			flex-shrink: 0;
+			display: flex;
+			align-items: center;
+
+			.icon {
+				color: v.$p-color;
+			}
+		}
+
+		&-text {
 			font-size: 13px;
 			color: v.$text-s;
-			margin-bottom: 4px;
+			/* margin-bottom: 4px; */
 			font-weight: 500;
 		}
 
-		.notification-time {
-			font-size: 12px;
+		&-data {
+			font-size: 10px;
 			color: v.$text-m;
+			display: flex;
+			justify-content: end;
+			position: absolute;
+			top: 0px;
+			right: 0px;
 		}
 
-		.notification-footer {
+		&-footer {
 			padding: 12px 20px;
 			border-top: 1px solid v.$b-color-1;
 			text-align: center;
@@ -195,6 +217,7 @@
 				font-size: 14px;
 				font-weight: 500;
 				text-decoration: none;
+				cursor: pointer;
 			}
 		}
 	}

src/app/styles/pages-styles.scss

@@ -5046,4 +5046,80 @@
 		background: #2b7fff;
 		padding: 10px 16px;
 	}
+}
+
+.notifications-list {
+	&-wrapper {
+		width: 100%;
+		overflow-x: auto;
+		border-radius: 0.5rem;
+		box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+	}
+
+	&-header {
+		background-color: v.$bg-light;
+		padding: 20px 20px;
+		font-size: 18px;
+		font-weight: 600;
+		border-bottom: 1px solid v.$b-color-2;
+
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+
+		h4 {
+			font-size: 20px;
+			height: 36px;
+			display: flex;
+			align-items: center;
+		}
+	}
+
+	&-action {
+		.btn-primary {
+			/* background: v.$p-color; */
+			background: #2b7fff;
+			padding: 5px 20px;
+		}
+	}
+
+	&-body {
+		padding: 0;
+
+		.notification {
+			&-item {
+				border-bottom: 1px solid v.$b-color-2;
+				padding: 20px;
+				display: flex;
+				gap: 15px;
+
+				&:last-child {
+					border-bottom: none;
+				}
+			}
+
+			&-check {
+				display: flex;
+				align-items: center;
+
+				button {
+					cursor: pointer;
+					border: 2px solid v.$border-color-1;
+					border-radius: 4px;
+					justify-content: center;
+					align-items: center;
+					width: 24px;
+					height: 24px;
+					transition: all .3s ease-in;
+					display: flex;
+
+					&:hover {
+						border: 2px solid v.$border-color-1-hover;
+					}
+				}
+			}
+
+			&-text {}
+		}
+	}
 }