+
+
-
-
+
- 8
-
-
- 9
-
-
- 10
-
-
- 11
-
-
- 12
-
-
- 13
-
-
-
-
+
- 15
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
+
+ 7
+
-
- 16
+
+ 8
+
+
+ 9
+
+
+ 10
+
+
+ 11
+
+
+ 12
+
+
+ 13
+
+
+ 14
+
-
- 17
+
+ 15
+
+
+ 16
+
+
+ 17
+
+
+ 18
+
+
+ 19
+
+
+ 20
+
+
+ 21
+
-
- 18
+
+ 22
+
+
+ 23
+
+
+ 24
+
+
+ 25
+
+
+ 26
+
+
+ 27
+
+
+ 28
+
-
- 19
-
-
- 20
-
-
- 21
-
-
-
-
- 22
-
-
- 23
-
-
- 24
-
-
- 25
-
-
- 26
-
-
- 27
-
-
- 28
-
-
-
-
- 29
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
+
+ 29
+
+
+
+
+
+
+
+
+
+
+
+
+
-
- Today
+
diff --git a/ui/src/Components/SilenceModal/DateTimeSelect/index.js b/ui/src/Components/SilenceModal/DateTimeSelect/index.js
index ae9a4d749..bd7191f28 100644
--- a/ui/src/Components/SilenceModal/DateTimeSelect/index.js
+++ b/ui/src/Components/SilenceModal/DateTimeSelect/index.js
@@ -5,7 +5,8 @@ import { useObserver } from "mobx-react-lite";
import moment from "moment";
-import DatePicker from "react-datepicker";
+import DayPicker from "react-day-picker";
+import "react-day-picker/lib/style.css";
import { SilenceFormStore } from "Stores/SilenceFormStore";
import { Duration } from "./Duration";
@@ -57,15 +58,31 @@ const TabContentStart = ({ silenceFormStore }) => {
return useObserver(() => (
- {
- silenceFormStore.data.startsAt = moment(val);
+ {
+ const startsAt = moment(val);
+ startsAt.set({
+ hour: silenceFormStore.data.startsAt.hour(),
+ minute: silenceFormStore.data.startsAt.minute(),
+ second: 0,
+ });
+ silenceFormStore.data.startsAt = startsAt;
silenceFormStore.data.verifyStarEnd();
}}
+ selectedDays={{
+ from: silenceFormStore.data.startsAt.toDate(),
+ to: silenceFormStore.data.endsAt.toDate(),
+ }}
+ modifiers={{
+ start: silenceFormStore.data.startsAt.toDate(),
+ end: silenceFormStore.data.endsAt.toDate(),
+ }}
/>
{
return useObserver(() => (
- {
- silenceFormStore.data.endsAt = moment(val);
+ {
+ const endsAt = moment(val);
+ endsAt.set({
+ hour: silenceFormStore.data.endsAt.hour(),
+ minute: silenceFormStore.data.endsAt.minute(),
+ second: 0,
+ });
+ silenceFormStore.data.endsAt = endsAt;
silenceFormStore.data.verifyStarEnd();
}}
+ selectedDays={{
+ from: silenceFormStore.data.startsAt.toDate(),
+ to: silenceFormStore.data.endsAt.toDate(),
+ }}
+ modifiers={{
+ start: silenceFormStore.data.startsAt.toDate(),
+ end: silenceFormStore.data.endsAt.toDate(),
+ }}
/>
{
};
}, [updateTimeNow]);
- return (
+ return useObserver(() => (
- );
+ ));
};
DateTimeSelect.propTypes = {
silenceFormStore: PropTypes.instanceOf(SilenceFormStore).isRequired,
diff --git a/ui/src/Components/SilenceModal/DateTimeSelect/index.test.js b/ui/src/Components/SilenceModal/DateTimeSelect/index.test.js
index 3e4e1f46e..e1a0e1b71 100644
--- a/ui/src/Components/SilenceModal/DateTimeSelect/index.test.js
+++ b/ui/src/Components/SilenceModal/DateTimeSelect/index.test.js
@@ -184,12 +184,12 @@ const MountedTabContentStart = () => {
};
describe("", () => {
- it("selecting date on DatePicker updates startsAt", () => {
+ it("selecting date on DayPicker updates startsAt", () => {
const tree = MountedTabContentStart();
expect(silenceFormStore.data.startsAt.toISOString()).toBe(
moment([2060, 1, 1, 0, 0, 0]).toISOString()
);
- tree.find("div.react-datepicker__day--018").simulate("click");
+ tree.find('div[aria-label="Wed Feb 18 2060"]').simulate("click");
expect(silenceFormStore.data.startsAt.toISOString()).toBe(
moment([2060, 1, 18, 0, 0, 0]).toISOString()
);
@@ -297,12 +297,12 @@ const MountedTabContentEnd = () => {
};
describe("", () => {
- it("Selecting date on DatePicker updates endsAt", () => {
+ it("Selecting date on DayPicker updates endsAt", () => {
const tree = MountedTabContentEnd();
expect(silenceFormStore.data.endsAt.toISOString()).toBe(
moment([2061, 1, 1, 0, 0, 0]).toISOString()
);
- tree.find("div.react-datepicker__day--024").simulate("click");
+ tree.find('div[aria-label="Thu Feb 24 2061"]').simulate("click");
expect(silenceFormStore.data.endsAt.toISOString()).toBe(
moment([2061, 1, 24, 0, 0, 0]).toISOString()
);
diff --git a/ui/src/Components/SilenceModal/index.stories.js b/ui/src/Components/SilenceModal/index.stories.js
index 2f42768c3..d8486329f 100644
--- a/ui/src/Components/SilenceModal/index.stories.js
+++ b/ui/src/Components/SilenceModal/index.stories.js
@@ -4,6 +4,8 @@ import fetchMock from "fetch-mock";
import { storiesOf } from "@storybook/react";
+import moment from "moment";
+
import { MockSilence } from "__mocks__/Alerts";
import { AlertStore } from "Stores/AlertStore";
import { Settings } from "Stores/Settings";
@@ -101,7 +103,10 @@ storiesOf("SilenceModal", module)
silenceFormStore.data.addEmptyMatcher();
silenceFormStore.data.author = "john@example.com";
silenceFormStore.data.comment = "fake silence";
- silenceFormStore.data.resetStartEnd();
+
+ silenceFormStore.data.silenceID = "1234567890";
+ silenceFormStore.data.startsAt = moment();
+ silenceFormStore.data.endsAt = moment().add(2, "hour").add(10, "day");
silenceFormStore.tab.current = SilenceTabNames.Editor;
diff --git a/ui/src/Styles/Components/DateTimeSelect.scss b/ui/src/Styles/Components/DateTimeSelect.scss
index 249846403..e18818d1e 100644
--- a/ui/src/Styles/Components/DateTimeSelect.scss
+++ b/ui/src/Styles/Components/DateTimeSelect.scss
@@ -1,28 +1,65 @@
-@import "~react-datepicker/src/stylesheets/datepicker.scss";
-
-.react-datepicker {
- background-color: $datepicker__background-color;
-}
-
-.react-datepicker__week {
- & > .react-datepicker__day:hover:not(.react-datepicker__day--disabled) {
- color: $datepicker__day-hover-color;
- border-color: $datepicker__border-color;
+.components-date-range.DayPicker {
+ .DayPicker-wrapper {
+ outline: none;
}
- & > .react-datepicker__day:not(.react-datepicker__day--disabled) {
- border-width: 1px;
- border-style: solid;
- border-color: transparent;
+
+ .DayPicker-Weekday {
+ font-weight: 600;
+ }
+
+ .DayPicker-Month {
+ border-collapse: inherit;
+ border-spacing: 0 1px;
+ }
+
+ .DayPicker-Day {
+ &:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside):not(.DayPicker-Day--selected):hover {
+ background-color: $light;
+ border-radius: 50%;
+ }
+
+ &.DayPicker-Day--today {
+ color: $dark;
+ }
+
+ &.DayPicker-Day--disabled {
+ color: $secondary;
+ }
+
+ &.DayPicker-Day--selected {
+ border-radius: 0;
+
+ &.DayPicker-Day--start {
+ border-top-left-radius: 50%;
+ border-bottom-left-radius: 50%;
+ font-weight: 600;
+ }
+
+ &.DayPicker-Day--end {
+ border-top-right-radius: 50%;
+ border-bottom-right-radius: 50%;
+ font-weight: 600;
+ }
+
+ &.DayPicker-Day--start:not(.DayPicker-Day--outside),
+ &.DayPicker-Day--end:not(.DayPicker-Day--outside) {
+ background-color: $primary;
+ color: $white;
+ }
+ &:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {
+ background-color: $light;
+ color: $components-date-range-sub-color;
+ }
+ }
+ }
+
+ .DayPicker-TodayButton {
+ color: $components-date-range-today-color;
+ font-weight: 600;
+ }
+
+ .DayPicker-Footer {
+ display: flex;
+ justify-content: space-around;
}
}
-
-.react-datepicker__day-names {
- & > .react-datepicker__day-name {
- color: $datepicker__day-name-color;
- }
-}
-
-.react-datepicker__today-button {
- border-bottom-left-radius: $datepicker__border-radius;
- border-bottom-right-radius: $datepicker__border-radius;
-}
diff --git a/ui/src/Styles/DarkTheme.scss b/ui/src/Styles/DarkTheme.scss
index c33e2351a..f96d92f89 100644
--- a/ui/src/Styles/DarkTheme.scss
+++ b/ui/src/Styles/DarkTheme.scss
@@ -85,19 +85,8 @@ $filterinput-border: $navbar-dark-color;
$grid-swimlane-bg: lighten($dark, 2%);
$bg-focused: darken($blue, 5%);
-$datepicker__background-color: $gray-700;
-$datepicker__border-color: $gray-800;
-$datepicker__highlighted-color: $white;
-$datepicker__muted-color: $gray-600;
-$datepicker__selected-color: $primary;
-$datepicker__text-color: $gray-300;
-$datepicker__header-color: $white;
-$datepicker__navigation-disabled-color: $gray-500;
-$datepicker__font-size: $font-size-base;
-$datepicker__font-family: $font-family-sans-serif;
-$datepicker__border-radius: 0.25rem;
-$datepicker__day-name-color: $white;
-$datepicker__day-hover-color: $white;
+$components-date-range-today-color: $white;
+$components-date-range-sub-color: $white;
$input-range-neutral-color: $gray-300;
$input-range-neutral-light-color: $secondary;
diff --git a/ui/src/Styles/LightTheme.scss b/ui/src/Styles/LightTheme.scss
index 9333f0342..4aafa3900 100644
--- a/ui/src/Styles/LightTheme.scss
+++ b/ui/src/Styles/LightTheme.scss
@@ -67,19 +67,8 @@ $filterinput-border: $navbar-dark-color;
$grid-swimlane-bg: lighten($dark, 2%);
$bg-focused: lighten($blue, 5%);
-$datepicker__background-color: $white;
-$datepicker__border-color: $gray-300;
-$datepicker__highlighted-color: $secondary;
-$datepicker__muted-color: $gray-600;
-$datepicker__selected-color: $primary;
-$datepicker__text-color: $black;
-$datepicker__header-color: $black;
-$datepicker__navigation-disabled-color: $gray-600;
-$datepicker__font-size: $font-size-base;
-$datepicker__font-family: $font-family-sans-serif;
-$datepicker__border-radius: 0.25rem;
-$datepicker__day-name-color: $black;
-$datepicker__day-hover-color: $black;
+$components-date-range-today-color: $black;
+$components-date-range-sub-color: $black;
$input-range-neutral-color: $dark;
$input-range-neutral-light-color: $gray-400;