From b2e406c37d0241d132e6fa99cc1387c92a624e0b Mon Sep 17 00:00:00 2001 From: Noah Loomans Date: Wed, 21 Mar 2018 15:16:37 +0100 Subject: Migrate WeekSelector --- .../react/components/container/WeekSelector.css | 40 ++++++++++++++++++++++ .../react/components/container/WeekSelector.js | 6 ++-- 2 files changed, 44 insertions(+), 2 deletions(-) create mode 100644 src/client/react/components/container/WeekSelector.css (limited to 'src/client/react/components') 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 ( -
+
-
{this.getWeekText()}
+
{this.getWeekText()}
); -- cgit v1.1