Fix bug that was applying the CSS to other active classes (#543)

src/courseware/course/Course.test.jsx

@@ -94,9 +94,9 @@ describe('Course', () => {
     const notificationTrigger = screen.getByRole('button', { name: /Show notification tray/i });
 
     expect(notificationTrigger).toBeInTheDocument();
-    expect(notificationTrigger).toHaveClass('active');
+    expect(notificationTrigger).toHaveClass('trigger-active');
     fireEvent.click(notificationTrigger);
-    expect(notificationTrigger).not.toHaveClass('active');
+    expect(notificationTrigger).not.toHaveClass('trigger-active');
   });
 
   it('passes handlers to the sequence', async () => {

src/courseware/course/NotificationTrigger.jsx

@@ -9,7 +9,7 @@ import messages from './messages';
 function NotificationTrigger({ intl, toggleNotificationTray, isNotificationTrayVisible }) {
   return (
     <button
-      className={classNames('notification-trigger-btn', { active: isNotificationTrayVisible() })}
+      className={classNames('notification-trigger-btn', { 'trigger-active': isNotificationTrayVisible() })}
       type="button"
       onClick={() => { toggleNotificationTray(); }}
       aria-label={intl.formatMessage(messages.openNotificationTrigger)}

src/courseware/course/NotificationTrigger.scss

@@ -14,7 +14,7 @@
     }
 }
 
-.active::after {
+.trigger-active::after {
     content: '';
     position: absolute;
     border-bottom: 2px solid $primary-700;