Snackbar: clean up styles, basic functionality

app/soapbox/actions/alerts.js

@@ -1,4 +1,3 @@
-//test
 import { defineMessages } from 'react-intl';
 
 const messages = defineMessages({
@@ -23,11 +22,12 @@ export function clearAlert() {
   };
 };
 
-export function showAlert(title = messages.unexpectedTitle, message = messages.unexpectedMessage) {
+export function showAlert(title = messages.unexpectedTitle, message = messages.unexpectedMessage, severity = 'info') {
   return {
     type: ALERT_SHOW,
     title,
     message,
+    severity,
   };
 };
 
@@ -47,9 +47,9 @@ export function showAlertForError(error) {
       message = data.error;
     }
 
-    return showAlert(title, message);
+    return showAlert(title, message, 'error');
   } else {
     console.error(error);
-    return showAlert();
+    return showAlert(undefined, undefined, 'error');
   }
 }

app/soapbox/features/security/index.js

@@ -20,7 +20,7 @@ import {
   deleteAccount,
 } from 'soapbox/actions/auth';
 import { fetchUserMfaSettings } from '../../actions/mfa';
-import { showAlert } from 'soapbox/actions/alerts';
+import snackbar from 'soapbox/actions/snackbar';
 import { changeSetting, getSettings } from 'soapbox/actions/settings';
 
 /*
@@ -119,10 +119,10 @@ class ChangeEmailForm extends ImmutablePureComponent {
     this.setState({ isLoading: true });
     return dispatch(changeEmail(email, password)).then(() => {
       this.setState({ email: '', password: '' }); // TODO: Maybe redirect user
-      dispatch(showAlert('', intl.formatMessage(messages.updateEmailSuccess)));
+      dispatch(snackbar.success(intl.formatMessage(messages.updateEmailSuccess)));
     }).catch(error => {
       this.setState({ password: '' });
-      dispatch(showAlert('', intl.formatMessage(messages.updateEmailFail)));
+      dispatch(snackbar.error(intl.formatMessage(messages.updateEmailFail)));
     }).then(() => {
       this.setState({ isLoading: false });
     });
@@ -193,10 +193,10 @@ class ChangePasswordForm extends ImmutablePureComponent {
     this.setState({ isLoading: true });
     return dispatch(changePassword(oldPassword, newPassword, confirmation)).then(() => {
       this.clearForm(); // TODO: Maybe redirect user
-      dispatch(showAlert('', intl.formatMessage(messages.updatePasswordSuccess)));
+      dispatch(snackbar.success(intl.formatMessage(messages.updatePasswordSuccess)));
     }).catch(error => {
       this.clearForm();
-      dispatch(showAlert('', intl.formatMessage(messages.updatePasswordFail)));
+      dispatch(snackbar.error(intl.formatMessage(messages.updatePasswordFail)));
     }).then(() => {
       this.setState({ isLoading: false });
     });
@@ -374,10 +374,10 @@ class DeactivateAccount extends ImmutablePureComponent {
     this.setState({ isLoading: true });
     return dispatch(deleteAccount(password)).then(() => {
       //this.setState({ email: '', password: '' }); // TODO: Maybe redirect user
-      dispatch(showAlert('', intl.formatMessage(messages.deleteAccountSuccess)));
+      dispatch(snackbar.success(intl.formatMessage(messages.deleteAccountSuccess)));
     }).catch(error => {
       this.setState({ password: '' });
-      dispatch(showAlert('', intl.formatMessage(messages.deleteAccountFail)));
+      dispatch(snackbar.error(intl.formatMessage(messages.deleteAccountFail)));
     }).then(() => {
       this.setState({ isLoading: false });
     });

app/soapbox/features/ui/containers/notifications_container.js

@@ -4,6 +4,14 @@ import { NotificationStack } from 'react-notification';
 import { dismissAlert } from '../../../actions/alerts';
 import { getAlerts } from '../../../selectors';
 
+const defaultBarStyleFactory = (index, style, notification) => {
+  return Object.assign(
+    {},
+    style,
+    { bottom: `${14 + index * 12 + index * 42}px` }
+  );
+};
+
 const mapStateToProps = (state, { intl }) => {
   const notifications = getAlerts(state);
 
@@ -23,6 +31,8 @@ const mapDispatchToProps = (dispatch) => {
     onDismiss: alert => {
       dispatch(dismissAlert(alert));
     },
+    barStyleFactory: defaultBarStyleFactory,
+    activeBarStyleFactory: defaultBarStyleFactory,
   };
 };
 

app/styles/components/snackbar.scss

@@ -13,7 +13,7 @@
   }
 
   &--info {
-    background-color: blue !important;
+    background-color: #19759e !important;
 
     &::before {
         content: '';
@@ -29,7 +29,7 @@
   }
 
   &--error {
-    background-color: red !important;
+    background-color: #9e1919 !important;
 
     &::before {
         content: '';