From 1f65cf618fb9ff7eb945486b3b9ff72a69a0a2c9 Mon Sep 17 00:00:00 2001
From: sai <kskprasad96@gmail.com>
Date: Sat, 29 Dec 2018 16:20:15 +0530
Subject: [PATCH 1/4] fix(Snackbar): fix snackbar positioning and
 responsiveness

---
 lib/snackbar/theme.module.scss | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/lib/snackbar/theme.module.scss b/lib/snackbar/theme.module.scss
index 93ebf166..135dc773 100644
--- a/lib/snackbar/theme.module.scss
+++ b/lib/snackbar/theme.module.scss
@@ -8,7 +8,7 @@
   will-change: transform;
   transition: transform 0.4s;
   &.top {
-    top: 10%;
+    top: 4%;
     &:not(.active) {
       -webkit-transform: translateY(-1000%);
       transform: translateY(-1000%);
@@ -20,7 +20,7 @@
     }
   }
   &.bottom {
-    bottom: 10%;
+    bottom: 4%;
     &:not(.active) {
       -webkit-transform: translateY(1000%);
       transform: translateY(1000%);
@@ -34,10 +34,19 @@
 }
 
 :local(.snackbar) {
-  background: $primary-color;
+  background: $cool-blue;
   border-radius: 3px;
-  padding: 10px 20px;
+  padding: 0.7em 1.2em;
   margin: 0 auto;
-  width: 40%;
+  text-align: center;
+  width: 42em;
   box-shadow: 2px 2px 4px #33333352;
+  color: $original-white;
+
 }
+
+@media only screen and (max-width: 768px) {
+  :local(.snackbar) {
+    width: 80%;
+  }
+}
\ No newline at end of file

From dfd294b02b58ca5cfe01b3637cba18a1662c6111 Mon Sep 17 00:00:00 2001
From: sai <kskprasad96@gmail.com>
Date: Mon, 31 Dec 2018 12:06:39 +0530
Subject: [PATCH 2/4] feat(Snackbar): Add close icon for indefinite snackbar

#287
---
 lib/snackbar/index.js          | 15 +++++++++++++--
 lib/snackbar/theme.module.scss | 17 ++++++++++++++++-
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/lib/snackbar/index.js b/lib/snackbar/index.js
index a5907782..1a229546 100644
--- a/lib/snackbar/index.js
+++ b/lib/snackbar/index.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import { MdClose } from 'react-icons/md';
 import { themr } from 'react-css-themr';
 import defaultTheme from './theme.module.scss';
 
@@ -81,7 +82,7 @@ class Snackbar extends React.Component {
 
   render() {
     const {
-      theme, additionaClasses, position, children,
+      theme, additionaClasses, position, children, autoClose,
     } = this.props;
     const { active } = this.state;
     const classes = classnames(theme.snackbar, additionaClasses);
@@ -95,7 +96,17 @@ class Snackbar extends React.Component {
           active ? `${theme.active} active` : '',
         )}
       >
-        <div className={classes}>{children}</div>
+        <div className={classes}>
+          <div className={theme.snackbarContent}>{children}</div>
+          {
+            !autoClose && (
+              <MdClose
+                onClick={() => this.dismissSnackbar()}
+                className={classnames(theme.close)}
+              />
+            )
+          }
+        </div>
       </div>
     );
   }
diff --git a/lib/snackbar/theme.module.scss b/lib/snackbar/theme.module.scss
index 135dc773..651e9688 100644
--- a/lib/snackbar/theme.module.scss
+++ b/lib/snackbar/theme.module.scss
@@ -34,15 +34,30 @@
 }
 
 :local(.snackbar) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 42em;
   background: $cool-blue;
   border-radius: 3px;
   padding: 0.7em 1.2em;
   margin: 0 auto;
   text-align: center;
-  width: 42em;
   box-shadow: 2px 2px 4px #33333352;
   color: $original-white;
+  position: relative;
+}
+
+:local(.snackbarContent) {
+  margin-right: 0.7em;
+}
 
+:local(.close) {
+  color: inherit;
+  cursor: pointer;
+  justify-self: flex-end;
+  position: absolute;
+  right: 1em;
 }
 
 @media only screen and (max-width: 768px) {

From 91bd6070c98b186db189cb5facd812eb0b5ed847 Mon Sep 17 00:00:00 2001
From: sai <kskprasad96@gmail.com>
Date: Mon, 31 Dec 2018 12:07:20 +0530
Subject: [PATCH 3/4] docs(Snackbar): Update docs page

---
 .../common/componentData/Snackbar/index.js    | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/doc/src/components/common/componentData/Snackbar/index.js b/doc/src/components/common/componentData/Snackbar/index.js
index 3afbc242..f3c5cc8f 100644
--- a/doc/src/components/common/componentData/Snackbar/index.js
+++ b/doc/src/components/common/componentData/Snackbar/index.js
@@ -53,6 +53,14 @@ export const componentData = {
       name: 'snackbarWrapper',
       description: 'Class used for snackbar wrapper element',
     },
+    {
+      name: 'snackbarContent',
+      description: 'Class used for snackbar content',
+    },
+    {
+      name: 'close',
+      description: 'Class used for indefinite snackbar close icon',
+    },
   ],
   basicComponent: `
     class SnackDisplay extends React.Component {
@@ -106,6 +114,7 @@ export const componentData = {
         this.openTopSnackbar = this.openTopSnackbar.bind(this);
         this.openIndefiniteSnackbar = this.openIndefiniteSnackbar.bind(this);
         this.handleSnackClose = this.handleSnackClose.bind(this);
+        this.handleIndefiniteSnackClose = this.handleIndefiniteSnackClose.bind(this);
       }
 
       openBottomSnackbar() {
@@ -134,6 +143,12 @@ export const componentData = {
         });
       }
 
+      handleIndefiniteSnackClose() {
+        this.setState({
+          showIndefiniteSnackbar: false,
+        })
+      }
+
       render() {
         return (
           <div>
@@ -176,9 +191,9 @@ export const componentData = {
 
                 <Snackbar
                   active={this.state.showIndefiniteSnackbar}
-                  onClose={this.handleSnackClose}
+                  onClose={this.handleIndefiniteSnackClose}
                   autoClose={false}>
-                  <span>This is a indefinite snackbar.</span>
+                  <span>This is a indefinite snackbar. Click x to close.</span>
                 </Snackbar>
                  
               </PreviewBlock>

From 5994f01dbd08ff566575a4d7c9f0a3d528e85bd3 Mon Sep 17 00:00:00 2001
From: sai <kskprasad96@gmail.com>
Date: Mon, 31 Dec 2018 16:31:32 +0530
Subject: [PATCH 4/4] style(Snackbar): fix padding

---
 lib/snackbar/theme.module.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/snackbar/theme.module.scss b/lib/snackbar/theme.module.scss
index 651e9688..2889fede 100644
--- a/lib/snackbar/theme.module.scss
+++ b/lib/snackbar/theme.module.scss
@@ -40,7 +40,7 @@
   width: 42em;
   background: $cool-blue;
   border-radius: 3px;
-  padding: 0.7em 1.2em;
+  padding: 0.9em 1.2em;
   margin: 0 auto;
   text-align: center;
   box-shadow: 2px 2px 4px #33333352;