fix: namespace CSS class name for notifications to avoid conflicts

src/app/notifications/NotificationItem.css

@@ -1,18 +1,18 @@
-.notification-item {
+.sourcegraph-notification-item {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
 }
 
-.notification-item__content {
+.sourcegraph-notification-item__content {
     flex: 1;
 }
 
-.notification-item__content > :last-child {
+.sourcegraph-notification-item__content > :last-child {
     margin-bottom: 0;
 }
 
-.notification-item__close {
+.sourcegraph-notification-item__close {
     cursor: pointer;
     flex: 0;
     font-size: 1.25rem;
@@ -24,7 +24,7 @@
     opacity: 0.7;
 }
 
-.notification-item__close:hover,
-.notification-item__close:focus {
+.sourcegraph-notification-item__close:hover,
+.sourcegraph-notification-item__close:focus {
     opacity: 1;
 }

src/app/notifications/NotificationItem.tsx

@@ -23,16 +23,17 @@ export class NotificationItem extends React.PureComponent<Props> {
         )
         return (
             <div
-                className={`notification-item alert alert-${alertClass(this.props.notification.type)} p-0 ${this.props
-                    .className || ''}`}
+                className={`sourcegraph-notification-item alert alert-${alertClass(
+                    this.props.notification.type
+                )} p-0 ${this.props.className || ''}`}
             >
                 <div
-                    className="notification-item__content py-2 pl-2 pr-0"
+                    className="sourcegraph-notification-item__content py-2 pl-2 pr-0"
                     dangerouslySetInnerHTML={{ __html: markdownHTML }}
                 />
                 <button
                     type="button"
-                    className="notification-item__close p-2"
+                    className="sourcegraph-notification-item__close p-2"
                     onClick={this.onDismiss}
                     aria-label="Close"
                 >

src/app/notifications/Notifications.css

@@ -1,4 +1,4 @@
-.notifications {
+.sourcegraph-notifications {
     position: fixed;
     width: 28rem;
     top: 82px;

src/app/notifications/Notifications.tsx

@@ -46,13 +46,13 @@ export class Notifications<S extends ConfigurationSubject, C extends Settings> e
 
     public render(): JSX.Element | null {
         return (
-            <div className="notifications">
+            <div className="sourcegraph-notifications">
                 {this.state.notifications.slice(0, Notifications.MAX_RETAIN).map((notification, i) => (
                     <NotificationItem
                         key={i}
                         notification={notification}
                         onDismiss={this.onDismiss}
-                        className="notifications__notification rounded-0 m-2"
+                        className="sourcegraph-notifications__notification rounded-0 m-2"
                     />
                 ))}
             </div>