diff --git a/src/components/AccountPage.js b/src/components/AccountPage.js index 0d50790d..81b5a3c0 100644 --- a/src/components/AccountPage.js +++ b/src/components/AccountPage.js @@ -49,7 +49,7 @@ const Action = styled(Box).attrs({ text-transform: uppercase; &:hover { - color: ${p => p.theme.colors.gray}; + color: ${p => p.theme.colors.grey}; } ` diff --git a/src/components/base/Icon.js b/src/components/base/Icon.js index d3e4606f..6d441189 100644 --- a/src/components/base/Icon.js +++ b/src/components/base/Icon.js @@ -7,6 +7,7 @@ import { fontSize, color } from 'styled-system' const Container = styled.div` ${fontSize}; ${color}; + line-height: 1; ` export default ({ name, ...props }: { name: string }) => ( diff --git a/src/components/base/Modal/index.js b/src/components/base/Modal/index.js index a201acd9..1223a218 100644 --- a/src/components/base/Modal/index.js +++ b/src/components/base/Modal/index.js @@ -16,6 +16,7 @@ import { rgba } from 'styles/helpers' import { closeModal, isModalOpened } from 'reducers/modals' import Box from 'components/base/Box' +import Icon from 'components/base/Icon' type Props = { isOpened?: boolean, @@ -26,7 +27,7 @@ type Props = { } const springConfig = { - stiffness: 350, + stiffness: 400, } const mapStateToProps = (state, { name, isOpened }) => ({ @@ -43,6 +44,7 @@ const mapDispatchToProps = (dispatch, { name, onClose = noop }) => ({ }) const Container = styled(Box).attrs({ + color: 'grey', align: 'center', justify: 'flex-start', sticky: true, @@ -86,6 +88,20 @@ const Body = styled(Box).attrs({ border-radius: 5px; ` +const CloseContainer = styled(Box).attrs({ + p: 2, + color: 'mouse', +})` + cursor: pointer; + position: absolute; + top: 0; + right: 0; + + &:hover { + color: ${p => p.theme.colors.grey}; + } +` + export class Modal extends PureComponent { static defaultProps = { onClose: noop, @@ -127,9 +143,9 @@ export const ModalBody = ({ }) => ( {onClose && ( - - [x] - + + + )} {children} diff --git a/src/styles/theme.js b/src/styles/theme.js index 36234024..0e50215e 100644 --- a/src/styles/theme.js +++ b/src/styles/theme.js @@ -11,7 +11,7 @@ export default { argile: '#eeeeee', blue: '#6193ff', cream: '#f9f9f9', - gray: '#a8b6c2', + grey: '#a8b6c2', grenade: '#ea2e49', lead: '#999999', mouse: '#e2e2e2',