diff options
author | Noah Loomans <noahloomans@gmail.com> | 2018-03-21 15:16:37 +0100 |
---|---|---|
committer | Noah Loomans <noahloomans@gmail.com> | 2018-03-21 15:16:37 +0100 |
commit | b2e406c37d0241d132e6fa99cc1387c92a624e0b (patch) | |
tree | 7c64dfb1449b51f2582705dd108f3dd3cc6eeed9 /src | |
parent | d30e28bfaa692764823841d4f7ce97be2e365c44 (diff) |
Migrate WeekSelector
Diffstat (limited to 'src')
-rw-r--r-- | src/client/react/components/container/WeekSelector.css | 40 | ||||
-rw-r--r-- | src/client/react/components/container/WeekSelector.js | 6 |
2 files changed, 44 insertions, 2 deletions
diff --git a/src/client/react/components/container/WeekSelector.css b/src/client/react/components/container/WeekSelector.css new file mode 100644 index 0000000..2ca5a0f --- /dev/null +++ b/src/client/react/components/container/WeekSelector.css @@ -0,0 +1,40 @@ +.WeekSelector { + display: flex; + padding: 8px; + padding-bottom: 0; + background-color: #F44336; + color: white; + align-items: center; +} + +.text { + flex-grow: 1; + text-align: center; +} + +.WeekSelector button { + background-color: initial; + border: initial; + color: inherit; + padding: 8px; + border-radius: 4px; +} + +.WeekSelector svg { + font-size: 2em; +} + +.WeekSelector button:focus { + background-color: #D32F2F; + outline: none; +} + +.WeekSelector button:active { + background-color: #B81111; + outline: none; + } + +.WeekSelector button::-moz-focus-inner { + /* Remove the dotted line outline from Firefox */ + border: 0; +} diff --git a/src/client/react/components/container/WeekSelector.js b/src/client/react/components/container/WeekSelector.js index 9a88af6..828fb6f 100644 --- a/src/client/react/components/container/WeekSelector.js +++ b/src/client/react/components/container/WeekSelector.js @@ -29,6 +29,8 @@ import ArrowForwardIcon from 'react-icons/lib/md/arrow-forward'; import purifyWeek from '../../lib/purifyWeek'; import { setWeek, weekFromLocation } from '../../lib/url'; +import styles from './WeekSelector.css'; + class WeekSelector extends React.Component { static propTypes = { // react-router @@ -67,9 +69,9 @@ class WeekSelector extends React.Component { render() { return ( - <div className="week-selector"> + <div className={styles.WeekSelector}> <button onClick={() => this.updateWeek(-1)}><ArrowBackIcon /></button> - <div className="text">{this.getWeekText()}</div> + <div className={styles.text}>{this.getWeekText()}</div> <button onClick={() => this.updateWeek(+1)}><ArrowForwardIcon /></button> </div> ); |