Merge pull request #9629 from KDSBrowne/issue-9569

Update shared note item style

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

@@ -32,6 +32,7 @@
     border-radius: none;
   }
 
+  overflow-x: hidden;
   outline-width: 1px !important;
   outline-color: transparent !important;
 }
@@ -70,6 +71,11 @@
     font-size: 175%;
     color: var(--color-gray-light);
     flex: 0 0 2.2rem;
+    margin-right: var(--sm-padding-x);
+    [dir="rtl"]  & {
+      margin-right: 0;
+      margin-left: var(--sm-padding-x);
+    }
   }
 
   > span {
@@ -91,6 +97,12 @@
     }
   }
 
+  div {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   &:active {
     background-color: var(--list-item-bg-hover);
     box-shadow: inset 0 0 0 var(--border-size) var(--item-focus-border), inset 1px 0 0 1px var(--item-focus-border);
@@ -136,6 +148,16 @@
 }
 
 .noteLock {
-  font-size: 65%;
-  color: var(--color-gray-light);
+  font-weight: 200;
+  font-size: var(--font-size-smaller);
+  color: var(--color-gray);
+
+  > i {
+    font-size: var(--font-size-xs);
+  }
+}
+
+.noteTitle {
+  font-weight: 400;
+  font-size: var(--font-size-small);
 }

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

@@ -91,7 +91,7 @@ class UserNotes extends Component {
       >
         <Icon iconName="copy" />
         <div aria-hidden>
-          <div>
+          <div className={styles.noteTitle}>
             {intl.formatMessage(intlMessages.sharedNotes)}
           </div>
           {disableNote