From 78873ac4bfd1294e21db89023b086a3dc6e31c82 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Fri, 29 Mar 2019 15:20:11 +0100
Subject: [PATCH] style date picker

---
 client/package-lock.json                      |  8 ++-
 .../components/atoms/Form/Input.module.scss   | 52 ++++++++++++++++++-
 2 files changed, 56 insertions(+), 4 deletions(-)

diff --git a/client/package-lock.json b/client/package-lock.json
index 4ac30da..85194df 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -1381,7 +1381,8 @@
     "@types/prop-types": {
       "version": "15.7.0",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.0.tgz",
-      "integrity": "sha512-eItQyV43bj4rR3JPV0Skpl1SncRCdziTEK9/v8VwXmV6d/qOUO8/EuWeHBbCZcsfSHfzI5UyMJLCSXtxxznyZg=="
+      "integrity": "sha512-eItQyV43bj4rR3JPV0Skpl1SncRCdziTEK9/v8VwXmV6d/qOUO8/EuWeHBbCZcsfSHfzI5UyMJLCSXtxxznyZg==",
+      "dev": true
     },
     "@types/q": {
       "version": "1.5.2",
@@ -1402,6 +1403,7 @@
       "version": "16.8.8",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-16.8.8.tgz",
       "integrity": "sha512-xwEvyet96u7WnB96kqY0yY7qxx/pEpU51QeACkKFtrgjjXITQn0oO1iwPEraXVgh10ZFPix7gs1R4OJXF7P5sg==",
+      "dev": true,
       "requires": {
         "@types/prop-types": "*",
         "csstype": "^2.2.0"
@@ -1411,6 +1413,7 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@types/react-datepicker/-/react-datepicker-2.2.0.tgz",
       "integrity": "sha512-zVAeDqkQgSdARElFXwXXpaaADyoRMo1SPsBzw6WV2iciJqS3ysSvYjqEKyTZfGbGkgw5sExEI2QKXam/KlCtyg==",
+      "dev": true,
       "requires": {
         "@types/react": "*",
         "popper.js": "^1.14.1"
@@ -5443,7 +5446,8 @@
     "csstype": {
       "version": "2.6.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.3.tgz",
-      "integrity": "sha512-rINUZXOkcBmoHWEyu7JdHu5JMzkGRoMX4ov9830WNgxf5UYxcBUO0QTKAqeJ5EZfSdlrcJYkC8WwfVW7JYi4yg=="
+      "integrity": "sha512-rINUZXOkcBmoHWEyu7JdHu5JMzkGRoMX4ov9830WNgxf5UYxcBUO0QTKAqeJ5EZfSdlrcJYkC8WwfVW7JYi4yg==",
+      "dev": true
     },
     "currently-unhandled": {
       "version": "0.4.1",
diff --git a/client/src/components/atoms/Form/Input.module.scss b/client/src/components/atoms/Form/Input.module.scss
index 0f10df4..571f4a5 100644
--- a/client/src/components/atoms/Form/Input.module.scss
+++ b/client/src/components/atoms/Form/Input.module.scss
@@ -165,15 +165,33 @@
     align-items: center;
 }
 
+//
+// Date picker
+//
 :global .react-datepicker {
     font-family: inherit;
     color: inherit;
-    border-color: $brand-grey-lighter;
+    border-color: $brand-black;
+}
+
+:global .react-datepicker__header {
+    background: $brand-black;
+    border-radius: 0;
+
+    .react-datepicker__day-name,
+    .react-datepicker__day,
+    .react-datepicker__time-name,
+    .react-datepicker__current-month,
+    .react-datepicker-time__header,
+    .react-datepicker-year-header {
+        color: $brand-white;
+    }
 }
 
 :global .react-datepicker__current-month,
 :global .react-datepicker-time__header,
-:global .react-datepicker-year-header {
+:global .react-datepicker-year-header,
+:global .react-datepicker__day-name {
     font-weight: $font-weight-bold;
 }
 
@@ -185,6 +203,36 @@
     max-width: 16rem;
 }
 
+:global .react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle:before,
+:global .react-datepicker__year-read-view--down-arrow:before,
+:global .react-datepicker__month-read-view--down-arrow:before,
+:global .react-datepicker__month-year-read-view--down-arrow:before {
+    border-top-color: $brand-black;
+}
+
+:global .react-datepicker__day--selected,
+:global .react-datepicker__day--in-selecting-range,
+:global .react-datepicker__day--in-range,
+:global .react-datepicker__month-text--selected,
+:global .react-datepicker__month-text--in-selecting-range,
+:global .react-datepicker__month-text--in-range {
+    background-color: $brand-black;
+    border-radius: 50%;
+    font-weight: $font-weight-bold;
+}
+
+:global .react-datepicker__day:hover,
+:global .react-datepicker__month-text:hover {
+    background-color: $brand-pink;
+    border-radius: 50%;
+    font-weight: $font-weight-bold;
+    color: $brand-white;
+}
+
+:global .react-datepicker__day--outside-month {
+    color: $brand-grey-light;
+}
+
 // Size modifiers
 
 .inputSmall {