finished header notifications

src/app/styles/header.scss

@@ -148,6 +148,10 @@
 			color: v.$p-color;
 			font-weight: 500;
 			cursor: pointer;
+
+			&:hover {
+				color: v.$p-color-hover;
+			}
 		}
 
 		&-list {
@@ -161,7 +165,10 @@
 			padding: 5px 10px 5px 10px;
 			border-bottom: 1px solid v.$b-color-1;
 			transition: background-color 0.2s;
-			cursor: pointer;
+
+			&.loading {
+				opacity: 0.5;
+			}
 		}
 
 		&-title {
@@ -180,17 +187,6 @@
 			align-items: center; */
 		}
 
-		&-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;
@@ -198,7 +194,8 @@
 			font-weight: 500;
 		}
 
-		&-data {
+		&-data,
+		&-mark-as-read {
 			font-size: 10px;
 			color: v.$text-m;
 			display: flex;
@@ -208,10 +205,25 @@
 			right: 0px;
 		}
 
+		&-mark-as-read {
+			font-size: 12px;
+			bottom: 0px;
+			top: auto;
+			cursor: pointer;
+			height: max-content;
+
+			color: v.$p-color;
+
+			&:hover {
+				color: v.$p-color-hover;
+			}
+		}
+
 		&-footer {
 			padding: 12px 20px;
 			border-top: 1px solid v.$b-color-1;
 			text-align: center;
+			position: relative;
 
 			.notification-link {
 				color: v.$p-color;
@@ -219,6 +231,14 @@
 				font-weight: 500;
 				text-decoration: none;
 				cursor: pointer;
+
+				&:disabled {
+					opacity: 0.5;
+				}
+
+				&:hover {
+					color: v.$p-color-hover;
+				}
 			}
 		}
 	}

src/app/styles/variable.scss

@@ -1,4 +1,5 @@
 $p-color: #6366f1;
+$p-color-hover: #1e0ff0;
 $s-color: #8b5cf6;
 $text-p: #1f2937;
 $text-s: #4b5563;