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