Customizing alerts for extensions.

src/components/alerts/alert.css

@@ -13,7 +13,11 @@
     border-radius: 8px;
     padding: 12px;
     box-shadow: 2px 2px 2px 2px rgba(255, 140, 26, 0.25);
-    margin-bottom: 4px;
+    margin-bottom: 7px;
+}
+
+.alert-icon {
+    vertical-align: middle;
 }
 
 .alert-message {

src/components/alerts/alerts.jsx

@@ -22,10 +22,7 @@ const Alerts = ({
                 key={index}
             >
                 <div className={styles.alertMessage}>
-                    <img
-                        src={a.iconURL}
-                    />
-                    {a.message}
+                    <img className={styles.alertIcon} src={a.iconURL} /> {a.message} {a.name}.
                 </div>
                 <Button
                     className={styles.alertRemoveButton}

src/reducers/alerts.js

@@ -16,6 +16,9 @@ const reducer = function (state, action) {
         const newAlert = {message: action.data.message};
         if (action.data.extensionId) {
             const extension = extensionData.find(ext => ext.extensionId === action.data.extensionId);
+            if (extension && extension.name) {
+                newAlert.name = extension.name;
+            }
             if (extension && extension.smallPeripheralImage) {
                 newAlert.iconURL = extension.smallPeripheralImage;
             }