change notification styles

src/app/styles/header.scss

@@ -51,7 +51,7 @@
 				height: 30px;
 			}
 
-/* 			&.active {
+			/* 			&.active {
 				background: v.$color-warning;
 			} */
 		}
@@ -115,7 +115,7 @@
 		background: v.$white;
 		border-radius: 12px;
 		box-shadow: 10px 10px 20px 10px v.$shadow-1;
-		min-width: 320px;
+		min-width: 350px;
 		opacity: 0;
 		visibility: hidden;
 		transform: translateY(-10px);
@@ -148,14 +148,14 @@
 		}
 
 		&-count {
-			font-size: 12px;
-			color: v.$p-color;
+			font-size: 10px;
+			background: v.$p-color;
+			padding: 5px;
+			color: v.$white;
 			font-weight: 500;
-			cursor: pointer;
-
-			&:hover {
-				color: v.$p-color-hover;
-			}
+			border-radius: 5px;
+			margin-left: 5px;
+			user-select: none;
 		}
 
 		&-list {
@@ -166,9 +166,10 @@
 		&-item {
 			display: flex;
 			gap: 4px;
-			padding: 5px 10px 5px 10px;
+			padding: 10px 14px;
 			border-bottom: 1px solid v.$b-color-1;
 			transition: background-color 0.2s;
+			align-items: center;
 
 			&.loading {
 				opacity: 0.5;
@@ -177,7 +178,7 @@
 
 		&-title {
 			display: block;
-			font-size: 15px;
+			font-size: 13px;
 			font-weight: 700;
 			color: v.$text-p;
 			margin-bottom: 6px;
@@ -186,53 +187,65 @@
 		&-content {
 			width: 100%;
 			position: relative;
-			padding: 15px 5px;
-			/* 			display: flex;
-			align-items: center; */
+			padding: 5px;
+		}
+
+		&-item-header {
+			display: flex;
+			justify-content: space-between;
 		}
 
 		&-text {
 			font-size: 13px;
 			color: v.$text-s;
-			/* margin-bottom: 4px; */
 			font-weight: 500;
 		}
 
-		&-data,
-		&-mark-as-read {
+		&-data {
 			font-size: 10px;
 			color: v.$text-m;
-			display: flex;
-			justify-content: end;
-			position: absolute;
-			top: 0px;
-			right: 0px;
 		}
 
-		&-mark-as-read {
+		&-icon {
 			font-size: 12px;
-			bottom: 0px;
-			top: auto;
 			cursor: pointer;
 			height: max-content;
-
 			color: v.$p-color;
 
+			svg {
+				fill: v.$p-color;
+
+				&:hover {
+					fill: v.$p-color-hover;
+				}
+			}
+
+			&:hover {
+				color: v.$p-color-hover;
+			}
+		}
+
+		&-mark-all-as-read {
+			font-size: 10px;
+			color: v.$p-color;
+			text-align: end;
+			cursor: pointer;
+
 			&:hover {
 				color: v.$p-color-hover;
 			}
 		}
 
 		&-footer {
-			padding: 12px 20px;
+			padding: 8px 20px;
 			border-top: 1px solid v.$b-color-1;
 			text-align: center;
 			position: relative;
 
 			.notification-link {
 				color: v.$p-color;
-				font-size: 14px;
-				font-weight: 500;
+				font-size: 16px;
+				font-weight: 600;
 				text-decoration: none;
 				cursor: pointer;