aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorNoah Loomans <noahloomans@gmail.com>2018-03-21 15:16:37 +0100
committerNoah Loomans <noahloomans@gmail.com>2018-03-21 15:16:37 +0100
commitb2e406c37d0241d132e6fa99cc1387c92a624e0b (patch)
tree7c64dfb1449b51f2582705dd108f3dd3cc6eeed9
parentd30e28bfaa692764823841d4f7ce97be2e365c44 (diff)
Migrate WeekSelector
-rw-r--r--src/client/react/components/container/WeekSelector.css40
-rw-r--r--src/client/react/components/container/WeekSelector.js6
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>
);