From 10da1e24e13b728c2837e5360a48fcb2913855a5 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 6 Nov 2018 15:59:16 -0800 Subject: feat: make instant resistant to external styles --- packages/instant/src/style/theme.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'packages/instant/src/style') diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts index d10c9b72c..8dada2d28 100644 --- a/packages/instant/src/style/theme.ts +++ b/packages/instant/src/style/theme.ts @@ -1,6 +1,6 @@ import * as styledComponents from 'styled-components'; -const { default: styled, css, keyframes, withTheme, ThemeProvider } = styledComponents; +const { default: styled, css, keyframes, withTheme, createGlobalStyle, ThemeProvider } = styledComponents; export type Theme = { [key in ColorOption]: string }; @@ -33,4 +33,4 @@ export const theme: Theme = { export const transparentWhite = 'rgba(255,255,255,0.3)'; export const overlayBlack = 'rgba(0, 0, 0, 0.6)'; -export { styled, css, keyframes, withTheme, ThemeProvider }; +export { styled, css, keyframes, withTheme, createGlobalStyle, ThemeProvider }; -- cgit v1.2.3 From c0d8ceca82a91a3a6c222e71ecb58f2cd95da62e Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 7 Nov 2018 20:30:45 -0800 Subject: feat: implement basic dropdown component --- packages/instant/src/style/z_index.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'packages/instant/src/style') diff --git a/packages/instant/src/style/z_index.ts b/packages/instant/src/style/z_index.ts index 727a5189d..95e6cd912 100644 --- a/packages/instant/src/style/z_index.ts +++ b/packages/instant/src/style/z_index.ts @@ -1,5 +1,6 @@ export const zIndex = { errorPopup: 1, mainContainer: 2, - panel: 3, + dropdownItems: 3, + panel: 4, }; -- cgit v1.2.3 From 4181a040b5d5ca2335556948585278133ec63bd1 Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 7 Nov 2018 20:53:25 -0800 Subject: feat: refactor out overlay component and use it to implement click-outside --- packages/instant/src/style/theme.ts | 1 + packages/instant/src/style/z_index.ts | 9 +++++---- 2 files changed, 6 insertions(+), 4 deletions(-) (limited to 'packages/instant/src/style') diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts index d10c9b72c..7917164a1 100644 --- a/packages/instant/src/style/theme.ts +++ b/packages/instant/src/style/theme.ts @@ -32,5 +32,6 @@ export const theme: Theme = { export const transparentWhite = 'rgba(255,255,255,0.3)'; export const overlayBlack = 'rgba(0, 0, 0, 0.6)'; +export const completelyTransparent = 'rga(0, 0, 0, 0)'; export { styled, css, keyframes, withTheme, ThemeProvider }; diff --git a/packages/instant/src/style/z_index.ts b/packages/instant/src/style/z_index.ts index 95e6cd912..0eedcaf29 100644 --- a/packages/instant/src/style/z_index.ts +++ b/packages/instant/src/style/z_index.ts @@ -1,6 +1,7 @@ export const zIndex = { - errorPopup: 1, - mainContainer: 2, - dropdownItems: 3, - panel: 4, + errorPopup: 10, + mainContainer: 20, + dropdownItems: 30, + panel: 40, + overlayDefault: 100, }; -- cgit v1.2.3 From 1151371e57643662b14c0c940ec558e74a6d1120 Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 7 Nov 2018 21:54:26 -0800 Subject: feat: add MetaMask sign, refactor Circle --- packages/instant/src/style/theme.ts | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'packages/instant/src/style') diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts index 7917164a1..0bd8ce4e0 100644 --- a/packages/instant/src/style/theme.ts +++ b/packages/instant/src/style/theme.ts @@ -15,6 +15,8 @@ export enum ColorOption { white = 'white', lightOrange = 'lightOrange', darkOrange = 'darkOrange', + green = 'green', + red = 'red', } export const theme: Theme = { @@ -28,6 +30,8 @@ export const theme: Theme = { white: 'white', lightOrange: '#F9F2ED', darkOrange: '#F2994C', + green: '#3CB34F', + red: '#D00000', }; export const transparentWhite = 'rgba(255,255,255,0.3)'; -- cgit v1.2.3 From 117e2f583ff44bdb63340a2134edea0f3ecb77b3 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Thu, 8 Nov 2018 15:37:56 -0800 Subject: [instant] Viewport specific errors (#1228) feat(instant): Shows different error animation based on viewport --- packages/instant/src/style/media.ts | 38 +++++++++++++++++++++-------------- packages/instant/src/style/z_index.ts | 3 ++- 2 files changed, 25 insertions(+), 16 deletions(-) (limited to 'packages/instant/src/style') diff --git a/packages/instant/src/style/media.ts b/packages/instant/src/style/media.ts index beabbac46..5e7aaba37 100644 --- a/packages/instant/src/style/media.ts +++ b/packages/instant/src/style/media.ts @@ -14,30 +14,38 @@ const generateMediaWrapper = (screenWidth: ScreenWidths) => (...args: any[]) => } `; -const media = { +export const media = { small: generateMediaWrapper(ScreenWidths.Sm), medium: generateMediaWrapper(ScreenWidths.Md), large: generateMediaWrapper(ScreenWidths.Lg), }; -export interface ScreenSpecifications { - default: string; - sm?: string; - md?: string; - lg?: string; +export interface ScreenSpecification { + default: T; + sm?: T; + md?: T; + lg?: T; } -export type MediaChoice = string | ScreenSpecifications; -export const stylesForMedia = (cssPropertyName: string, choice: MediaChoice): InterpolationValue[] => { - if (typeof choice === 'string') { +export type OptionallyScreenSpecific = T | ScreenSpecification; +export type MediaChoice = OptionallyScreenSpecific; +/** + * Given a css property name and a OptionallyScreenSpecific value, + * generates css properties with screen-specific viewport styling + */ +export function stylesForMedia( + cssPropertyName: string, + choice: OptionallyScreenSpecific, +): InterpolationValue[] { + if (typeof choice === 'object') { return css` - ${cssPropertyName}: ${choice}; - `; - } - - return css` ${cssPropertyName}: ${choice.default}; ${choice.lg && media.large`${cssPropertyName}: ${choice.lg}`} ${choice.md && media.medium`${cssPropertyName}: ${choice.md}`} ${choice.sm && media.small`${cssPropertyName}: ${choice.sm}`} `; -}; + } else { + return css` + ${cssPropertyName}: ${choice}; + `; + } +} diff --git a/packages/instant/src/style/z_index.ts b/packages/instant/src/style/z_index.ts index 727a5189d..03623f044 100644 --- a/packages/instant/src/style/z_index.ts +++ b/packages/instant/src/style/z_index.ts @@ -1,5 +1,6 @@ export const zIndex = { - errorPopup: 1, + errorPopBehind: 1, mainContainer: 2, panel: 3, + errorPopUp: 4, }; -- cgit v1.2.3