From 3961a3ef0c6de472e44b0fed2886308cb37c7b76 Mon Sep 17 00:00:00 2001
From: rapahaeru <rapahaeru@gmail.com>
Date: Wed, 27 Mar 2019 17:22:22 -0300
Subject: [PATCH] feat(BTS-167): create a block that aligns the SnackBar

---
 components/SnackBar/SnackBar.jsx | 41 +++++++++++++++++++-------------
 1 file changed, 25 insertions(+), 16 deletions(-)

diff --git a/components/SnackBar/SnackBar.jsx b/components/SnackBar/SnackBar.jsx
index 2c33a9c21..5f3d55070 100644
--- a/components/SnackBar/SnackBar.jsx
+++ b/components/SnackBar/SnackBar.jsx
@@ -53,28 +53,37 @@ const ActionsSection = styled.div`
   align-items: center;
 `;
 
+const DialogBlock = styled.section`
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+`;
+
 class SnackBar extends React.Component {
   componentDidMount() {}
 
   render() {
     const { text, onClose, closeButtonAriaLabel, ...rest } = this.props;
     return (
-      <Row>
-        <Col xsmall-offset={1} xsmall={10}>
-          <SnackBarDialog {...rest} role="dialog">
-            <TextContainer>{text}</TextContainer>
-            <ActionsSection>
-              <ActionLink href="/">action</ActionLink>
-              {onClose && (
-                <CloseIcon
-                  onClick={onClose}
-                  aria-label={closeButtonAriaLabel}
-                />
-              )}
-            </ActionsSection>
-          </SnackBarDialog>
-        </Col>
-      </Row>
+      <DialogBlock>
+        <Row>
+          <Col xsmall-offset={1} xsmall={10}>
+            <SnackBarDialog {...rest} role="dialog">
+              <TextContainer>{text}</TextContainer>
+              <ActionsSection>
+                <ActionLink href="/">action</ActionLink>
+                {onClose && (
+                  <CloseIcon
+                    onClick={onClose}
+                    aria-label={closeButtonAriaLabel}
+                  />
+                )}
+              </ActionsSection>
+            </SnackBarDialog>
+          </Col>
+        </Row>
+      </DialogBlock>
     );
   }
 }