From 2c585bfbdc4940e3e6089ac1cf595dd009b141d2 Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve@0xproject.com>
Date: Fri, 9 Nov 2018 15:15:57 -0800
Subject: feat(instant): Dismissible overlay error messages

Adds dismissible overlay to error messages on mobile
---
 packages/instant/src/components/ui/overlay.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

(limited to 'packages/instant/src/components/ui/overlay.tsx')

diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx
index c5f55f9c0..f67d6fb2f 100644
--- a/packages/instant/src/components/ui/overlay.tsx
+++ b/packages/instant/src/components/ui/overlay.tsx
@@ -1,11 +1,15 @@
 import * as _ from 'lodash';
 
-import { overlayBlack, styled } from '../../style/theme';
+import { generateMediaWrapper, ScreenWidths } from '../../style/media';
+import { generateOverlayBlack, styled } from '../../style/theme';
 import { zIndex } from '../../style/z_index';
 
 export interface OverlayProps {
     zIndex?: number;
     backgroundColor?: string;
+    width?: string;
+    height?: string;
+    showMaxWidth?: ScreenWidths;
 }
 
 export const Overlay =
@@ -20,12 +24,16 @@ export const Overlay =
         left: 0;
         z-index: ${props => props.zIndex}
         background-color: ${props => props.backgroundColor};
+        ${props => props.width && `width: ${props.width};`}
+        ${props => props.height && `height: ${props.height};`}
+        display: ${props => (props.showMaxWidth ? 'none' : 'block')};
+        ${props => props.showMaxWidth && generateMediaWrapper(props.showMaxWidth)`display: block;`}
     }
 `;
 
 Overlay.defaultProps = {
     zIndex: zIndex.overlayDefault,
-    backgroundColor: overlayBlack,
+    backgroundColor: generateOverlayBlack(0.6),
 };
 
 Overlay.displayName = 'Overlay';
-- 
cgit v1.2.3