show unread notification points

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

@@ -73,7 +73,7 @@ const InAppNotificationDropdown: FC<Props> = (props: Props) => {
   const badge = count > 0 ? <span className="badge badge-pill badge-danger grw-notification-badge">{count}</span> : '';
 
   return (
-    <Dropdown className="notification-wrapper" isOpen={isOpen} toggle={toggleDropdownHandler}>
+    <Dropdown className="notification-wrapper grw-in-app-notification-dropdown" isOpen={isOpen} toggle={toggleDropdownHandler}>
       <DropdownToggle tag="a">
         <button type="button" className="nav-link border-0 bg-transparent waves-effect waves-light">
           <i className="icon-bell mr-2" /> {badge}

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="grw-unread-notification rounded-circle mr-3"></span>
         {renderActionUserPictures()}
       </div>
       <div className="p-2">

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

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