Convert Notifications to CSS modules

Author: shepmaster

ui/frontend/Notifications.module.css

@@ -0,0 +1,30 @@
+$buffer: 0.5em;
+$space: 0.25em;
+
+.container {
+  position: absolute;
+  z-index: 10;
+  right: $buffer;
+  bottom: $buffer;
+  left: $buffer;
+  max-width: 50em;
+  border: 2px solid #428bca;
+  margin-right: auto;
+  margin-left: auto;
+  background: white;
+}
+
+.notification {
+  display: flex;
+}
+
+.notificationContent {
+  padding: $space 0 $space $space;
+}
+
+.close {
+  composes: -buttonReset from './shared.module.css';
+  padding: $space;
+  background: #e1e1db;
+  cursor: pointer;
+}

ui/frontend/Notifications.tsx

@@ -7,12 +7,14 @@ import { Close } from './Icon';
 import * as actions from './actions';
 import * as selectors from './selectors';
 
+import styles from './Notifications.module.css';
+
 const SURVEY_URL = 'https://blog.rust-lang.org/2020/09/10/survey-launch.html';
 
 const Notifications: React.SFC = () => {
   return (
     <Portal>
-      <div className="notifications">
+      <div className={styles.container}>
         <Rust2020SurveyNotification />
       </div>
     </Portal>
@@ -40,9 +42,9 @@ interface NotificationProps {
 }
 
 const Notification: React.SFC<NotificationProps> = ({ onClose, children }) => (
-  <div className="notifications__notification">
-    <div className="notifications__notification-content">{children}</div>
-    <button className="notifications__close" onClick={onClose}><Close /></button>
+  <div className={styles.notification}>
+    <div className={styles.notificationContent}>{children}</div>
+    <button className={styles.close} onClick={onClose}><Close /></button>
   </div>
 );
 

ui/frontend/index.scss

@@ -647,38 +647,3 @@ $header-transition: 0.2s ease-in-out;
     }
   }
 }
-
-.notifications {
-    position: absolute;
-    z-index: 10;
-
-    $buffer: 0.5em;
-
-    bottom: $buffer;
-    left: $buffer;
-    right: $buffer;
-
-    margin-left: auto;
-    margin-right: auto;
-    max-width: 50em;
-
-    background: white;
-    border: 2px solid #428bca;
-
-    &__notification {
-      display: flex;
-    }
-
-    $space: 0.25em;
-
-    &__notification-content {
-      padding: $space 0 $space $space;
-    }
-
-    &__close {
-      @include button-reset;
-      padding: $space;
-      background: #e1e1db;
-      cursor: pointer;
-    }
-}

ui/frontend/shared.module.css

@@ -0,0 +1,9 @@
+.-buttonReset {
+  padding: 0;
+  border: none;
+  background: inherit;
+  background-color: transparent; /* IE 11 */
+  font: inherit;
+  line-height: inherit;
+  text-align: inherit;
+}