finish notifications featur

src/app/styles/header.scss

@@ -50,6 +50,10 @@
 				width: 30px;
 				height: 30px;
 			}
+
+/* 			&.active {
+				background: v.$color-warning;
+			} */
 		}
 	}
 
@@ -241,6 +245,21 @@
 				}
 			}
 		}
+
+		&-unread-count {
+			position: absolute;
+			right: -5px;
+			bottom: -5px;
+			width: 20px;
+			height: 20px;
+			border-radius: 50%;
+			background: v.$red;
+			color: v.$white;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			font-size: 12px;
+		}
 	}
 
 	.user-menu {

src/app/styles/pages-styles.scss

@@ -5114,6 +5114,10 @@
 				&:last-child {
 					border-bottom: none;
 				}
+
+				&.loading {
+					opacity: 0.6;
+				}
 			}
 
 			&-header {
@@ -5127,7 +5131,7 @@
 			}
 
 			&-title {
-				font-weight: 600;
+				font-weight: 800;
 				font-size: 18px;
 				margin-bottom: 4px;
 			}
@@ -5135,6 +5139,7 @@
 			&-text {
 				color: v.$text-s;
 				margin-bottom: 4px;
+				font-weight: 600;
 			}
 
 			&-status {
@@ -5188,6 +5193,15 @@
 				}
 			}
 		}
+
+		.notification-item.READIED {
+
+			.notification-title,
+			.notification-text {
+				font-weight: 500;
+				opacity: 0.8;
+			}
+		}
 	}
 
 	&-footer {