add notification list, add notification page

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 {}
+		}
+	}
 }