Browse Source
Styles adjustments on theme, icons and modals
master
meriadec
7 years ago
No known key found for this signature in database
GPG Key ID: 1D2FC2305E2CB399
4 changed files with
23 additions and
6 deletions
-
src/components/AccountPage.js
-
src/components/base/Icon.js
-
src/components/base/Modal/index.js
-
src/styles/theme.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}; |
|
|
|
} |
|
|
|
` |
|
|
|
|
|
|
|
|
|
|
|
@ -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 }) => ( |
|
|
|
|
|
|
|
@ -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<Props> { |
|
|
|
static defaultProps = { |
|
|
|
onClose: noop, |
|
|
|
@ -127,9 +143,9 @@ export const ModalBody = ({ |
|
|
|
}) => ( |
|
|
|
<Body> |
|
|
|
{onClose && ( |
|
|
|
<Box align="flex-end"> |
|
|
|
<Box onClick={onClose}>[x]</Box> |
|
|
|
</Box> |
|
|
|
<CloseContainer onClick={onClose}> |
|
|
|
<Icon fontSize={3} name="times" /> |
|
|
|
</CloseContainer> |
|
|
|
)} |
|
|
|
{children} |
|
|
|
</Body> |
|
|
|
|
|
|
|
@ -11,7 +11,7 @@ export default { |
|
|
|
argile: '#eeeeee', |
|
|
|
blue: '#6193ff', |
|
|
|
cream: '#f9f9f9', |
|
|
|
gray: '#a8b6c2', |
|
|
|
grey: '#a8b6c2', |
|
|
|
grenade: '#ea2e49', |
|
|
|
lead: '#999999', |
|
|
|
mouse: '#e2e2e2', |
|
|
|
|
