Snackbar: allow severity levels

app/soapbox/actions/snackbar.js

@@ -0,0 +1,25 @@
+import { ALERT_SHOW } from './alerts';
+
+const showAlert = (severity, message) => ({
+  type: ALERT_SHOW,
+  message,
+  severity,
+});
+
+export function info(message) {
+  return showAlert('info', message);
+};
+
+export function success(message) {
+  return showAlert('success', message);
+};
+
+export function error(message) {
+  return showAlert('error', message);
+};
+
+export default {
+  info,
+  success,
+  error,
+};

app/soapbox/reducers/alerts.js

@@ -14,6 +14,7 @@ export default function alerts(state = initialState, action) {
       key: state.size > 0 ? state.last().get('key') + 1 : 0,
       title: action.title,
       message: action.message,
+      severity: action.severity || 'info',
     }));
   case ALERT_DISMISS:
     return state.filterNot(item => item.get('key') === action.alert.key);

app/soapbox/selectors/index.js

@@ -124,6 +124,8 @@ export const getAlerts = createSelector([getAlertsBase], (base) => {
       message: item.get('message'),
       title: item.get('title'),
       key: item.get('key'),
+      className: `snackbar snackbar--${item.get('severity', 'info')}`,
+      activeClassName: 'snackbar--active',
       dismissAfter: 5000,
       barStyle: {
         zIndex: 200,

app/styles/application.scss

@@ -76,3 +76,4 @@
 @import 'components/profile_hover_card';
 @import 'components/filters';
 @import 'components/mfa_form';
+@import 'components/snackbar';

app/styles/components/snackbar.scss

@@ -0,0 +1,5 @@
+.snackbar {
+  &--success {
+    background-color: $success-green !important;
+  }
+}