Merge pull request #4690 from weseek/imprv/81701-add-simble-to-unopend-notifications

Imprv/81701 add marks for each unopened notification

packages/app/src/components/InAppNotification/InAppNotificationElm.tsx

@@ -90,6 +90,7 @@ const InAppNotificationElm = (props: Props): JSX.Element => {
   return (
     <div className="dropdown-item d-flex flex-row mb-3">
       <div className="p-2 mr-2 d-flex align-items-center">
+        <span className={`${notification.status === 'UNOPENED' && 'grw-unopend-notification'} rounded-circle mr-3`}></span>
         {renderActionUserPictures()}
       </div>
       <div className="p-2">

packages/app/src/server/models/in-app-notification.ts

@@ -65,7 +65,7 @@ const inAppNotificationSchema = new Schema<InAppNotificationDocument, InAppNotif
   status: {
     type: String,
     default: STATUS_UNREAD,
-    enum: [STATUS_UNREAD, STATUS_UNOPENED, STATUS_OPENED],
+    enum: InAppNotificationStatuses,
     index: true,
     require: true,
   },

packages/app/src/styles/theme/_apply-colors.scss

@@ -677,3 +677,12 @@ mark.rbt-highlight-text {
     width: 20px;
   }
 }
+
+/*
+  In App Notification
+*/
+.grw-unopend-notification {
+  width: 7px;
+  height: 7px;
+  background-color: $primary;
+}