From 233c5d02de0e3ba05f7cb1165bfafde6c72fa833 Mon Sep 17 00:00:00 2001 From: Kameshwaran Sachithanantham Date: Mon, 9 Mar 2020 20:51:05 +0530 Subject: [PATCH 1/4] :art: Fixed style of input and modal --- example/src/theme.js | 8 ++++++++ src/components/modal/components.js | 14 +++++++++++++- 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/example/src/theme.js b/example/src/theme.js index 3cfe3ff..cd87930 100644 --- a/example/src/theme.js +++ b/example/src/theme.js @@ -22,6 +22,7 @@ export default { successDark: '#388e3c', background: 'white', border: '#ddd', + borderDark: '#888', }, buttons: { @@ -64,5 +65,12 @@ export default { bg: 'success', color: 'white', }, + }, + forms: { + input: { + p: 3, + borderRadius: 2, + borderColor: 'borderDark' + } } }; diff --git a/src/components/modal/components.js b/src/components/modal/components.js index 1193e76..9e5193f 100644 --- a/src/components/modal/components.js +++ b/src/components/modal/components.js @@ -8,16 +8,23 @@ export const Overlay = styled(Fixed)( left: 0, width: '100%', height: '100%', - background: 'rgba(0, 0, 0, 0.5)', + background: 'rgba(0, 0, 0, 0.7)', display: 'flex', alignItems: 'center', justifyContent: 'center', '&.modal-enter': { opacity: 0, + '> div': { + transform: 'scale(0.95)', + transition: 'all 200ms linear', + }, }, '&.modal-enter-active': { opacity: 1, transition: 'all 200ms ease-in', + '> div': { + transform: 'scale(1)', + }, }, '&.modal-exit': { opacity: 1, @@ -25,6 +32,10 @@ export const Overlay = styled(Fixed)( '&.modal-exit-active': { opacity: 0, transition: 'all 200ms ease-out', + '> div': { + transform: 'scale(0.95)', + transition: 'all 200ms linear', + }, }, }, ); @@ -36,6 +47,7 @@ export const Content = styled(Relative)( width: '60%', minHeight: '60%', borderRadius: 1, + boxShadow: '0 1px 15px rgba(0,0,0,.75)', })(theme), ); From abf3b27440006885822b30b50fce0b846df2ed17 Mon Sep 17 00:00:00 2001 From: asaran97 Date: Tue, 10 Mar 2020 15:55:36 +0530 Subject: [PATCH 2/4] changed input focus styles and renamed getVariations to getStyles --- src/components/input.js | 6 +++++- src/components/select.js | 6 +++++- src/components/textArea.js | 6 +++++- src/utils/{getVariations.js => getStyles.js} | 9 +++++++++ src/utils/placeholderVariant.js | 2 +- 5 files changed, 25 insertions(+), 4 deletions(-) rename src/utils/{getVariations.js => getStyles.js} (52%) diff --git a/src/components/input.js b/src/components/input.js index 7b76134..a3dd4c0 100644 --- a/src/components/input.js +++ b/src/components/input.js @@ -1,4 +1,8 @@ import { Input } from 'theme-ui'; +import styled from '@emotion/styled'; import withPlaceholderVariant from '../utils/placeholderVariant'; +import { applyFocus } from '../utils/getStyles'; -export default withPlaceholderVariant(Input); +export default styled(withPlaceholderVariant(Input))` + ${({theme}) => applyFocus(theme)} +`; diff --git a/src/components/select.js b/src/components/select.js index fbaccaa..2c113ac 100644 --- a/src/components/select.js +++ b/src/components/select.js @@ -1,4 +1,8 @@ +import styled from '@emotion/styled'; import { Select } from 'theme-ui'; import withPlaceholderVariant from '../utils/placeholderVariant'; +import { applyFocus } from '../utils/getStyles'; -export default withPlaceholderVariant(Select); +export default styled(withPlaceholderVariant(Select))` + ${({theme}) => applyFocus(theme)} +`; diff --git a/src/components/textArea.js b/src/components/textArea.js index 244804e..6c72926 100644 --- a/src/components/textArea.js +++ b/src/components/textArea.js @@ -1,4 +1,8 @@ +import styled from '@emotion/styled'; import { Textarea } from 'theme-ui'; import withPlaceholderVariant from '../utils/placeholderVariant'; +import { applyFocus } from '../utils/getStyles'; -export default withPlaceholderVariant(Textarea); +export default styled(withPlaceholderVariant(Textarea))` + ${({theme}) => applyFocus(theme)} +`; diff --git a/src/utils/getVariations.js b/src/utils/getStyles.js similarity index 52% rename from src/utils/getVariations.js rename to src/utils/getStyles.js index 66e1ed8..a866c34 100644 --- a/src/utils/getVariations.js +++ b/src/utils/getStyles.js @@ -3,6 +3,15 @@ import { css, get } from 'theme-ui'; const applyVariation = (theme, variant, themeKey) => css(get(theme, themeKey + '.' + variant, get(theme, variant))); +const applyFocus = (theme) => css({ + '&:focus': { + boxShadow: '#add9f5 0px 0px 0px 2px', + outline: 'none', + borderColor: 'info', + }, +})(theme); + export { applyVariation, + applyFocus, }; diff --git a/src/utils/placeholderVariant.js b/src/utils/placeholderVariant.js index b8b8427..554905c 100644 --- a/src/utils/placeholderVariant.js +++ b/src/utils/placeholderVariant.js @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; import { applyVariation, -} from './getVariations'; +} from './getStyles'; export default (comp) => { const variantStyles = ({ From 7480708e0fed4fbcdc9d69e011b28988bd8b3a23 Mon Sep 17 00:00:00 2001 From: asaran97 Date: Tue, 10 Mar 2020 15:58:19 +0530 Subject: [PATCH 3/4] changed placeholderVariants theme varaint color --- example/src/theme.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/src/theme.js b/example/src/theme.js index cd87930..9b61516 100644 --- a/example/src/theme.js +++ b/example/src/theme.js @@ -32,7 +32,7 @@ export default { }, placeholderVariants: { primary: { - color: 'red', + color: 'borderDark', } }, breakpoints: [ From 4d834762a85b330c7c3bdf98de513152ae08ed1a Mon Sep 17 00:00:00 2001 From: asaran97 Date: Tue, 10 Mar 2020 16:06:03 +0530 Subject: [PATCH 4/4] :children_crossing: changed input border color --- example/src/theme.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/src/theme.js b/example/src/theme.js index 9b61516..6f3e861 100644 --- a/example/src/theme.js +++ b/example/src/theme.js @@ -69,8 +69,8 @@ export default { forms: { input: { p: 3, + borderColor: 'border', borderRadius: 2, - borderColor: 'borderDark' } } };