Add flair to snackbar

src/renderer/component/snackBar/index.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { connect } from 'react-redux';
 import { doRemoveSnackBarSnack } from 'redux/actions/app';
 import { selectSnackBarSnacks } from 'redux/selectors/app';

src/renderer/component/snackBar/view.jsx

@@ -1,35 +1,48 @@
+// @flow
 import React from 'react';
 import Button from 'component/button';
 
-class SnackBar extends React.PureComponent {
-  constructor(props) {
+type Props = {
+  removeSnack: any => void,
+  snacks: {
+    linkTarget: ?string,
+    linkText: ?string,
+    message: string,
+  },
+};
+
+class SnackBar extends React.PureComponent<Props> {
+  constructor(props: Props) {
     super(props);
 
-    this._displayTime = 5; // in seconds
-    this._hideTimeout = null;
+    this.displayTime = 5; // in seconds
+    this.hideTimeout = null;
   }
 
   render() {
     const { snacks, removeSnack } = this.props;
 
     if (!snacks.length) {
-      this._hideTimeout = null; // should be unmounting anyway, but be safe?
+      this.hideTimeout = null; // should be unmounting anyway, but be safe?
       return null;
     }
 
     const snack = snacks[0];
     const { message, linkText, linkTarget } = snack;
 
-    if (this._hideTimeout === null) {
-      this._hideTimeout = setTimeout(() => {
-        this._hideTimeout = null;
+    if (this.hideTimeout === null) {
+      this.hideTimeout = setTimeout(() => {
+        this.hideTimeout = null;
         removeSnack();
-      }, this._displayTime * 1000);
+      }, this.displayTime * 1000);
     }
 
     return (
       <div className="snack-bar">
-        {message}
+        <div className="snack-bar__message">
+          <div>&#9432;</div>
+          <div>{message}</div>
+        </div>
         {linkText &&
           linkTarget && (
             <Button navigate={linkTarget} className="snack-bar__action" label={linkText} />

src/renderer/scss/_vars.scss

@@ -102,6 +102,10 @@ $large-breakpoint: 1760px;
   --btn-radius: 20px;
   --btn-height: 36px;
 
+  /* SnackBar */
+  --snackbar-bg-primary: var(--color-primary);
+  --snackbar-color-primary: var(--text-color-inverse);
+
   /* Header */
   --header-bg: var(--color-white);
   --header-color: var(--color-text);

src/renderer/scss/component/_snack-bar.scss

@@ -1,30 +1,51 @@
 .snack-bar {
-  padding: $spacing-vertical;
-  position: fixed;
-  top: $spacing-vertical;
-  left: 0;
-  right: 0;
-  margin-left: auto;
-  margin-right: auto;
-  min-width: 300px;
-  max-width: var(--snack-bar-width);
-  background: var(--color-dark-overlay);
-  color: #f0f0f0;
+  background-color: var(--snackbar-bg-primary);
+  border-radius: 10px;
+  box-shadow: var(--box-shadow-layer);
+  color: var(--snackbar-color-primary);
   display: flex;
   justify-content: space-between;
-  align-items: center;
-  border-radius: 2px;
+  left: 0;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: var(--snack-bar-width);
+  min-width: 300px;
+  opacity: 0.95;
+  padding: 14px 20px 10px 20px;
+  position: fixed;
+  right: 0;
+  top: $spacing-vertical;
   transition: all var(--transition-duration) var(--transition-type);
+  width: 100%;
   z-index: 10000; /*hack to get it over react modal */
 }
 
 .snack-bar__action {
   display: inline-block;
-  text-transform: uppercase;
-  color: var(--color-primary-light);
-  margin: 0px 0px 0px $spacing-vertical;
+  margin-bottom: 4px;
   min-width: min-content;
-  &:hover {
-    text-decoration: underline;
+  text-transform: uppercase;
+
+  span {
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.snack-bar__message {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+
+  div {
+    &:nth-of-type(1) {
+      font-size: 30px;
+      margin-right: 20px;
+    }
+    &:nth-of-type(2) {
+      font-size: 16px;
+      margin-bottom: 4px;
+    }
   }
 }