From adb50eda9c8191fb074859497eabeeb0fd6b82b1 Mon Sep 17 00:00:00 2001
From: Quinn Slack <qslack@qslack.com>
Date: Thu, 1 Nov 2018 08:04:24 -0700
Subject: [PATCH] fix: namespace CSS class name for notifications to avoid
 conflicts

addresses https://github.com/sourcegraph/sourcegraph/issues/629
---
 src/app/notifications/NotificationItem.css | 12 ++++++------
 src/app/notifications/NotificationItem.tsx |  9 +++++----
 src/app/notifications/Notifications.css    |  2 +-
 src/app/notifications/Notifications.tsx    |  4 ++--
 4 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/app/notifications/NotificationItem.css b/src/app/notifications/NotificationItem.css
index 38714dc..edabf9c 100644
--- a/src/app/notifications/NotificationItem.css
+++ b/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;
 }
diff --git a/src/app/notifications/NotificationItem.tsx b/src/app/notifications/NotificationItem.tsx
index 9236112..3ccba6c 100644
--- a/src/app/notifications/NotificationItem.tsx
+++ b/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"
                 >
diff --git a/src/app/notifications/Notifications.css b/src/app/notifications/Notifications.css
index ac8a69a..246daeb 100644
--- a/src/app/notifications/Notifications.css
+++ b/src/app/notifications/Notifications.css
@@ -1,4 +1,4 @@
-.notifications {
+.sourcegraph-notifications {
     position: fixed;
     width: 28rem;
     top: 82px;
diff --git a/src/app/notifications/Notifications.tsx b/src/app/notifications/Notifications.tsx
index 765dceb..b3b1e62 100644
--- a/src/app/notifications/Notifications.tsx
+++ b/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>