aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/components
diff options
context:
space:
mode:
authorSteve Klebanoff <steve@0xproject.com>2018-11-10 07:15:57 +0800
committerGitHub <noreply@github.com>2018-11-10 07:15:57 +0800
commit2c585bfbdc4940e3e6089ac1cf595dd009b141d2 (patch)
tree39f6fc63a8c9b26b0ef9a1ea34afde213b573c3f /packages/instant/src/components
parentb4a11de097258d37fa9271e64fc28a1d012a8d26 (diff)
downloaddexon-sol-tools-2c585bfbdc4940e3e6089ac1cf595dd009b141d2.tar
dexon-sol-tools-2c585bfbdc4940e3e6089ac1cf595dd009b141d2.tar.gz
dexon-sol-tools-2c585bfbdc4940e3e6089ac1cf595dd009b141d2.tar.bz2
dexon-sol-tools-2c585bfbdc4940e3e6089ac1cf595dd009b141d2.tar.lz
dexon-sol-tools-2c585bfbdc4940e3e6089ac1cf595dd009b141d2.tar.xz
dexon-sol-tools-2c585bfbdc4940e3e6089ac1cf595dd009b141d2.tar.zst
dexon-sol-tools-2c585bfbdc4940e3e6089ac1cf595dd009b141d2.zip
feat(instant): Dismissible overlay error messages
Adds dismissible overlay to error messages on mobile
Diffstat (limited to 'packages/instant/src/components')
-rw-r--r--packages/instant/src/components/ui/overlay.tsx12
1 files changed, 10 insertions, 2 deletions
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';