Jack Mallers
6 years ago
committed by
Tom Kirkpatrick
Tom Kirkpatrick
60 changed files with 639 additions and 371 deletions
@ -0,0 +1,43 @@ |
|||||
|
import React from 'react' |
||||
|
import PropTypes from 'prop-types' |
||||
|
import FaAngleLeft from 'react-icons/lib/fa/angle-left' |
||||
|
import Isvg from 'react-inlinesvg' |
||||
|
import checkIcon from 'icons/check.svg' |
||||
|
|
||||
|
import { FormattedMessage } from 'react-intl' |
||||
|
import messages from './messages' |
||||
|
|
||||
|
import styles from './Theme.scss' |
||||
|
|
||||
|
const Fiat = ({ theme, disableSubMenu, setTheme }) => ( |
||||
|
<div> |
||||
|
<header className={styles.submenuHeader} onClick={disableSubMenu}> |
||||
|
<FaAngleLeft /> |
||||
|
<span> |
||||
|
<FormattedMessage {...messages.title} /> |
||||
|
</span> |
||||
|
</header> |
||||
|
<ul className={styles.themes}> |
||||
|
<li className={theme === 'dark' ? styles.active : ''} onClick={() => setTheme('dark')}> |
||||
|
<span> |
||||
|
<FormattedMessage {...messages.dark} /> |
||||
|
</span> |
||||
|
{theme === 'dark' && <Isvg src={checkIcon} />} |
||||
|
</li> |
||||
|
<li className={theme === 'light' ? styles.active : ''} onClick={() => setTheme('light')}> |
||||
|
<span> |
||||
|
<FormattedMessage {...messages.light} /> |
||||
|
</span> |
||||
|
{theme === 'light' && <Isvg src={checkIcon} />} |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
) |
||||
|
|
||||
|
Fiat.propTypes = { |
||||
|
theme: PropTypes.string.isRequired, |
||||
|
disableSubMenu: PropTypes.func.isRequired, |
||||
|
setTheme: PropTypes.func |
||||
|
} |
||||
|
|
||||
|
export default Fiat |
||||
@ -0,0 +1,43 @@ |
|||||
|
@import 'styles/variables.scss'; |
||||
|
|
||||
|
.submenuHeader { |
||||
|
padding: 20px; |
||||
|
background: var(--darkestBackground); |
||||
|
font-size: 10px; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: end; |
||||
|
align-items: center; |
||||
|
transition: all 0.25s; |
||||
|
|
||||
|
&:hover { |
||||
|
opacity: 0.75; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.themes { |
||||
|
li { |
||||
|
background: var(--lightestBackground); |
||||
|
cursor: pointer; |
||||
|
opacity: 0.75; |
||||
|
transition: 0.25s hover; |
||||
|
|
||||
|
&:hover { |
||||
|
background: var(--lightBackground); |
||||
|
} |
||||
|
|
||||
|
&.active { |
||||
|
opacity: 1; |
||||
|
|
||||
|
svg { |
||||
|
height: 10px; |
||||
|
width: 10px; |
||||
|
color: var(--superGreen); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
span:nth-child(1) { |
||||
|
line-height: 12px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,3 @@ |
|||||
|
import Theme from './Theme' |
||||
|
|
||||
|
export default Theme |
||||
@ -0,0 +1,8 @@ |
|||||
|
import { defineMessages } from 'react-intl' |
||||
|
|
||||
|
/* eslint-disable max-len */ |
||||
|
export default defineMessages({ |
||||
|
title: 'Theme', |
||||
|
dark: 'Dark', |
||||
|
light: 'Light' |
||||
|
}) |
||||
|
After Width: | Height: | Size: 345 B |
|
After Width: | Height: | Size: 4.3 KiB |
Loading…
Reference in new issue