diff --git a/src/components/alerts/alert.css b/src/components/alerts/alert.css index 2bbfccbb8dc98088a9fca183faac97203c11acee..181023d183f61caccf59fdccc36c6a507e3af757 100644 --- a/src/components/alerts/alert.css +++ b/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 { diff --git a/src/components/alerts/alerts.jsx b/src/components/alerts/alerts.jsx index efd355675ab98f602a7460fbf3901dd07a2127c5..95b755de959bf92dee411ebb68c9f37838029bec 100644 --- a/src/components/alerts/alerts.jsx +++ b/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} diff --git a/src/reducers/alerts.js b/src/reducers/alerts.js index 7a39fee14763f1017c036ffadea54dcd16e56d65..69011bd8998641f573cad0ac6c2111a5d6e82f4f 100644 --- a/src/reducers/alerts.js +++ b/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; }