From 9267a2cd200aad4233103169e19ee1a8bd363820 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Mon, 15 Jun 2020 16:20:04 +0100
Subject: [PATCH] fix(ui): tweak date input css

---
 .../SilenceModal/DateTimeSelect/index.js        |  2 +-
 ui/src/Styles/Components/DateTimeSelect.scss    | 17 +++++++++++------
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/ui/src/Components/SilenceModal/DateTimeSelect/index.js b/ui/src/Components/SilenceModal/DateTimeSelect/index.js
index bd7191f28..aaf814b43 100644
--- a/ui/src/Components/SilenceModal/DateTimeSelect/index.js
+++ b/ui/src/Components/SilenceModal/DateTimeSelect/index.js
@@ -104,7 +104,7 @@ const TabContentEnd = ({ silenceFormStore }) => {
           className="components-date-range"
           month={silenceFormStore.data.endsAt.toDate()}
           disabledDays={{
-            before: moment().second(0).add(1, "minutes").toDate(),
+            before: silenceFormStore.data.startsAt.second(0).toDate(),
           }}
           todayButton="Today"
           onDayClick={(val) => {
diff --git a/ui/src/Styles/Components/DateTimeSelect.scss b/ui/src/Styles/Components/DateTimeSelect.scss
index e18818d1e..ee8e3d600 100644
--- a/ui/src/Styles/Components/DateTimeSelect.scss
+++ b/ui/src/Styles/Components/DateTimeSelect.scss
@@ -1,5 +1,6 @@
 .components-date-range.DayPicker {
-  .DayPicker-wrapper {
+  .DayPicker-wrapper:focus,
+  .DayPicker-NavButton:focus {
     outline: none;
   }
 
@@ -13,9 +14,13 @@
   }
 
   .DayPicker-Day {
+    &:focus {
+      outline: none;
+    }
+
     &:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside):not(.DayPicker-Day--selected):hover {
       background-color: $light;
-      border-radius: 50%;
+      border-radius: 0.5rem;
     }
 
     &.DayPicker-Day--today {
@@ -30,14 +35,14 @@
       border-radius: 0;
 
       &.DayPicker-Day--start {
-        border-top-left-radius: 50%;
-        border-bottom-left-radius: 50%;
+        border-top-left-radius: 0.5rem;
+        border-bottom-left-radius: 0.5rem;
         font-weight: 600;
       }
 
       &.DayPicker-Day--end {
-        border-top-right-radius: 50%;
-        border-bottom-right-radius: 50%;
+        border-top-right-radius: 0.5rem;
+        border-bottom-right-radius: 0.5rem;
         font-weight: 600;
       }