feat(BTS-167): create a block that aligns the SnackBar

catho · Mar 27, 2019 · 3961a3e · 3961a3e
1 parent 97d6ce2
commit 3961a3e
Showing 1 changed file with 25 additions and 16 deletions.
diff --git 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>
     );
   }
 }