Refactored shared notes content notification

bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-notes/component.jsx

@@ -23,6 +23,10 @@ const intlMessages = defineMessages({
     id: 'app.note.title',
     description: 'Title for the shared notes',
   },
+  unreadContent: {
+    id: 'app.userList.notesListItem.unreadContent',
+    description: 'Aria label for notes unread content',
+  }
 });
 
 class UserNotes extends Component {
@@ -68,12 +72,24 @@ class UserNotes extends Component {
       );
     };
 
-    const iconClasses = {};
-    iconClasses[styles.notification] = unread;
-
     const linkClasses = {};
     linkClasses[styles.active] = isPanelOpened;
 
+
+    let notification = null;
+    if (unread) {
+      notification = (
+        <div
+          className={styles.unreadContent}
+          aria-label={intl.formatMessage(intlMessages.unreadContent)}
+        >
+          <div className={styles.unreadContentText} aria-hidden="true">
+            ···
+          </div>
+        </div>
+      );
+    }
+
     return (
       <div className={styles.messages}>
         {
@@ -88,8 +104,9 @@ class UserNotes extends Component {
             className={cx(styles.noteLink, linkClasses)}
             onClick={toggleNotePanel}
           >
-            <Icon iconName="copy" className={cx(iconClasses)} />
+            <Icon iconName="copy" />
             <span>{intl.formatMessage(intlMessages.title)}</span>
+            {notification}
           </div>
         </div>
       </div>

bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-notes/styles.scss

@@ -73,17 +73,20 @@
   box-shadow: inset 0 0 0 var(--border-size) var(--item-focus-border), inset 1px 0 0 1px var(--item-focus-border);
 }
 
-.notification {
-  position: relative;
-
-  &:after {
-    content: '';
-    position: absolute;
-    border-radius: 50%;
-    width: 8px;
-    height: 8px;
-    bottom: 3px;
-    right: 3px;
-    background-color: var(--color-danger);
-  }
+.unreadContent {
+  @extend %flex-column;
+  justify-content: center;
+}
+
+.unreadContentText {
+  @extend %flex-column;
+  @extend %no-margin;
+  justify-content: center;
+  color: var(--color-white);
+  line-height: calc(1rem + 1px);
+  padding: 0 0.5rem;
+  text-align: center;
+  border-radius: 0.5rem/50%;
+  font-size: 0.8rem;
+  background-color: var(--unread-messages-bg);
 }

bigbluebutton-html5/private/locales/en.json

@@ -47,6 +47,7 @@
     "app.userList.participantsTitle": "Participants",
     "app.userList.messagesTitle": "Messages",
     "app.userList.notesTitle": "Notes",
+    "app.userList.notesListItem.unreadContent": "New content",
     "app.userList.captionsTitle": "Captions",
     "app.userList.presenter": "Presenter",
     "app.userList.you": "You",