Snackbar: improve style

app/soapbox/actions/snackbar.js

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

app/soapbox/selectors/index.js

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

app/styles/components/snackbar.scss

@@ -1,5 +1,42 @@
 .snackbar {
+  font-size: 16px !important;
+  padding: 10px 20px 10px 14px !important;
+  z-index: 9999 !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &::before {
+    font-family: ForkAwesome;
+    font-size: 20px;
+    margin-right: 8px;
+  }
+
+  &--info {
+    background-color: blue !important;
+
+    &::before {
+        content: '';
+    }
+  }
+
   &--success {
-    background-color: $success-green !important;
+    background-color: #199e5a !important;
+
+    &::before {
+        content: '';
+    }
+  }
+
+  &--error {
+    background-color: red !important;
+
+    &::before {
+        content: '';
+    }
+  }
+
+  .notification-bar-wrapper {
+    transform: translateY(1px);
   }
 }