Add styling to week selector

3 files changed, 46 insertions, 4 deletions

diff --git a/src/client/react/components/container/WeekSelector.js b/src/client/react/components/container/WeekSelector.js
index eef8d8d..d5ba752 100644
--- a/src/client/react/components/container/WeekSelector.js
+++ b/src/client/react/components/container/WeekSelector.js
@@ -4,6 +4,9 @@ import moment from 'moment';
 import queryString from 'query-string';
 import { withRouter } from 'react-router-dom';
 
+import ArrowBackIcon from 'react-icons/lib/md/arrow-back';
+import ArrowForwardIcon from 'react-icons/lib/md/arrow-forward';
+
 import purifyWeek from '../../lib/purifyWeek';
 
 const WeekSelector = ({ urlWeek, location, history }) => {
@@ -18,10 +21,10 @@ const WeekSelector = ({ urlWeek, location, history }) => {
   };
 
   return (
-    <div>
-      <button onClick={() => updateWeek(-1)}>Prev</button>
-      Week {urlWeek}
-      <button onClick={() => updateWeek(+1)}>Next</button>
+    <div className="week-selector">
+      <button onClick={() => updateWeek(-1)}><ArrowBackIcon /></button>
+      <div className="text">Week {urlWeek}</div>
+      <button onClick={() => updateWeek(+1)}><ArrowForwardIcon /></button>
     </div>
   );
 };
diff --git a/src/client/style/_component-week-selector.scss b/src/client/style/_component-week-selector.scss
new file mode 100644
index 0000000..0d7696b
--- /dev/null
+++ b/src/client/style/_component-week-selector.scss
@@ -0,0 +1,38 @@
+.week-selector {
+  display: flex;
+  padding: 8px;
+  padding-bottom: 0;
+  color: white;
+  align-items: center;
+
+  .text {
+    flex-grow: 1;
+    text-align: center;
+  }
+
+  button {
+    background-color: initial;
+    border: initial;
+    color: inherit;
+    padding: 8px;
+    border-radius: 4px;
+
+    svg {
+      font-size: 2em;
+    }
+
+    &:focus {
+      background-color: #D32F2F;
+      outline: none;
+    }
+
+    &:active {
+      background-color: #B81111;
+      outline: none;
+    }
+
+    &::-moz-focus-inner {
+      border: 0; // Remove the dotted line outline from Firefox
+    }
+  }
+}
diff --git a/src/client/style/index.scss b/src/client/style/index.scss
index 763a329..e6ca14d 100644
--- a/src/client/style/index.scss
+++ b/src/client/style/index.scss
@@ -12,3 +12,4 @@ body {
 
 @import "component-search";
 @import "component-help-box";
+@import "component-week-selector";