diff --git a/frontend/src/metabase/components/Calendar.css b/frontend/src/metabase/components/Calendar.css
index d817c2033b3e83837a1994eb7fe49f492d62c6e8..34eba1633882ca3e9278cd5080d73736f8b182ca 100644
--- a/frontend/src/metabase/components/Calendar.css
+++ b/frontend/src/metabase/components/Calendar.css
@@ -1,5 +1,24 @@
+.Calendar-weeks {
+ padding-bottom: 14px;
+}
+
.Calendar-week {
display: flex;
+ padding-left: 12px;
+ padding-right: 12px;
+}
+
+.Calendar-header {
+ padding: 14px;
+ margin-bottom: 8px;
+}
+
+.Calendar-header h4 {
+ font-weight: 700;
+}
+
+.Calendar-day-names {
+ opacity: 0.12;
}
.Calendar-day,
@@ -12,7 +31,9 @@
position: relative;
border-radius: 99px;
font-weight: 700;
+ font-size: 12px;
background-color: transparent;
+ padding: 10px;
}
.Calendar-day:hover {
diff --git a/frontend/src/metabase/components/Calendar.jsx b/frontend/src/metabase/components/Calendar.jsx
index 8886f8a3c6eee33c3c82333d2ebedb52d628caba..d49464879cd4953657f113a95eb5becb0503d9f8 100644
--- a/frontend/src/metabase/components/Calendar.jsx
+++ b/frontend/src/metabase/components/Calendar.jsx
@@ -87,25 +87,20 @@ export default class Calendar extends Component {
renderMonthHeader(current, side) {
return (
- <div className="Calendar-header flex align-center">
+ <div className="Calendar-header flex align-center border-bottom">
{side !== "right" && (
<div
- className="bordered rounded p1 cursor-pointer transition-border border-hover px1"
+ className="cursor-pointer text-brand-hover"
onClick={this.previous}
>
<Icon name="chevronleft" size={10} />
</div>
)}
<span className="flex-full" />
- <h4 className="cursor-pointer rounded p1">
- {current.format("MMMM YYYY")}
- </h4>
+ <h4>{current.format("MMMM YYYY")}</h4>
<span className="flex-full" />
{side !== "left" && (
- <div
- className="bordered border-hover rounded p1 transition-border cursor-pointer px1"
- onClick={this.next}
- >
+ <div className="cursor-pointer text-brand-hover" onClick={this.next}>
<Icon name="chevronright" size={10} />
</div>
)}
@@ -157,7 +152,7 @@ export default class Calendar extends Component {
renderCalender(current, side) {
return (
<div
- className={cx("Calendar Grid-cell", {
+ className={cx("Calendar", {
"Calendar--range":
this.props.isRangePicker &&
this.props.selected &&
@@ -189,7 +184,7 @@ class Week extends Component {
let { date, month, selected, selectedEnd } = this.props;
for (let i = 0; i < 7; i++) {
- const classes = cx("Calendar-day p1 cursor-pointer text-centered", {
+ const classes = cx("Calendar-day cursor-pointer text-centered", {
"Calendar-day--today": date.isSame(new Date(), "day"),
"Calendar-day--this-month": date.month() === month.month(),
"Calendar-day--selected": selected && date.isSame(selected, "day"),
diff --git a/frontend/src/metabase/parameters/components/widgets/DateRangeWidget.jsx b/frontend/src/metabase/parameters/components/widgets/DateRangeWidget.jsx
index 01d2674fc55144dbb059acb713be0f8bd7178894..df5a247e1331e794e660e2ddf3bbf8ff7a77a809 100644
--- a/frontend/src/metabase/parameters/components/widgets/DateRangeWidget.jsx
+++ b/frontend/src/metabase/parameters/components/widgets/DateRangeWidget.jsx
@@ -44,20 +44,18 @@ export default class DateRangeWidget extends Component {
render() {
const { start, end } = this.state;
return (
- <div className="p1">
- <Calendar
- initial={start ? moment(start) : null}
- selected={start ? moment(start) : null}
- selectedEnd={end ? moment(end) : null}
- onChange={(start, end) => {
- if (end == null) {
- this.setState({ start, end });
- } else {
- this.props.setValue(serializeDateRangeValue({ start, end }));
- }
- }}
- />
- </div>
+ <Calendar
+ initial={start ? moment(start) : null}
+ selected={start ? moment(start) : null}
+ selectedEnd={end ? moment(end) : null}
+ onChange={(start, end) => {
+ if (end == null) {
+ this.setState({ start, end });
+ } else {
+ this.props.setValue(serializeDateRangeValue({ start, end }));
+ }
+ }}
+ />
);
}
}
diff --git a/frontend/src/metabase/parameters/components/widgets/DateSingleWidget.jsx b/frontend/src/metabase/parameters/components/widgets/DateSingleWidget.jsx
index 158697ba4c8b648c538d1e240fa45509b02948e7..357330443a5faccff5ffe8dda76757614e946f40 100644
--- a/frontend/src/metabase/parameters/components/widgets/DateSingleWidget.jsx
+++ b/frontend/src/metabase/parameters/components/widgets/DateSingleWidget.jsx
@@ -6,18 +6,16 @@ import moment from "moment";
const DateSingleWidget = ({ value, setValue, onClose }) => {
value = value ? moment(value) : moment();
return (
- <div className="p1">
- <Calendar
- initial={value}
- selected={value}
- selectedEnd={value}
- isRangePicker={false}
- onChange={value => {
- setValue(value);
- onClose();
- }}
- />
- </div>
+ <Calendar
+ initial={value}
+ selected={value}
+ selectedEnd={value}
+ isRangePicker={false}
+ onChange={value => {
+ setValue(value);
+ onClose();
+ }}
+ />
);
};
diff --git a/frontend/test/metabase/components/__snapshots__/Calendar.unit.spec.js.snap b/frontend/test/metabase/components/__snapshots__/Calendar.unit.spec.js.snap
index ad327b33cdebb545b81631777fd690706908def4..4e49895009d244ed4d2c840a97c524516adb3f5d 100644
--- a/frontend/test/metabase/components/__snapshots__/Calendar.unit.spec.js.snap
+++ b/frontend/test/metabase/components/__snapshots__/Calendar.unit.spec.js.snap
@@ -2,13 +2,13 @@
exports[`Calendar should render correctly 1`] = `
<div
- className="Calendar Grid-cell"
+ className="Calendar"
>
<div
- className="Calendar-header flex align-center"
+ className="Calendar-header flex align-center border-bottom"
>
<div
- className="bordered rounded p1 cursor-pointer transition-border border-hover px1"
+ className="cursor-pointer text-brand-hover"
onClick={[Function]}
>
<svg
@@ -26,16 +26,14 @@ exports[`Calendar should render correctly 1`] = `
<span
className="flex-full"
/>
- <h4
- className="cursor-pointer rounded p1"
- >
+ <h4>
January 2018
</h4>
<span
className="flex-full"
/>
<div
- className="bordered border-hover rounded p1 transition-border cursor-pointer px1"
+ className="cursor-pointer text-brand-hover"
onClick={[Function]}
>
<svg
@@ -97,43 +95,43 @@ exports[`Calendar should render correctly 1`] = `
className="Calendar-week"
>
<span
- className="Calendar-day p1 cursor-pointer text-centered Calendar-day--week-start"
+ className="Calendar-day cursor-pointer text-centered Calendar-day--week-start"
onClick={[Function]}
>
31
</span>
<span
- className="Calendar-day p1 cursor-pointer text-centered Calendar-day--this-month Calendar-day--selected"
+ className="Calendar-day cursor-pointer text-centered Calendar-day--this-month Calendar-day--selected"
onClick={[Function]}
>
1
</span>
<span
- className="Calendar-day p1 cursor-pointer text-centered Calendar-day--this-month"
+ className="Calendar-day cursor-pointer text-centered Calendar-day--this-month"
onClick={[Function]}
>
2
</span>
<span
- className="Calendar-day p1 cursor-pointer text-centered Calendar-day--this-month"
+ className="Calendar-day cursor-pointer text-centered Calendar-day--this-month"
onClick={[Function]}
>
3
</span>
<span
- className="Calendar-day p1 cursor-pointer text-centered Calendar-day--this-month"
+ className="Calendar-day cursor-pointer text-centered Calendar-day--this-month"
onClick={[Function]}
>
4
</span>
<span
- className="Calendar-day p1 cursor-pointer text-centered Calendar-day--this-month"
+ className="Calendar-day cursor-pointer text-centered Calendar-day--this-month"
onClick={[Function]}
>
5
</span>
<span
- className="Calendar-day p1 cursor-pointer text-centered Calendar-day--this-month Calendar-day--week-end"
+ className="Calendar-day cursor-pointer text-centered Calendar-day--this-month Calendar-day--week-end"
onClick={[Function]}
>
6
@@ -143,43 +141,43 @@ exports[`Calendar should render correctly 1`] = `
className="Calendar-week"
>
<span
- className="Calendar-day p1 cursor-pointer text-centered Calendar-day--this-month Calendar-day--week-start"
+ className="Calendar-day cursor-pointer text-centered Calendar-day--this-month Calendar-day--week-start"
onClick={[Function]}
>
7
</span>
<span
- className="Calendar-day p1 cursor-pointer text-centered Calendar-day--this-month"
+ className="Calendar-day cursor-pointer text-centered Calendar-day--this-month"
onClick={[Function]}
>
8
</span>
<span
- className="Calendar-day p1 cursor-pointer text-centered Calendar-day--this-month"
+ className="Calendar-day cursor-pointer text-centered Calendar-day--this-month"
onClick={[Function]}
>
9
</span>
<span
- className="Calendar-day p1 cursor-pointer text-centered Calendar-day--this-month"
+ className="Calendar-day cursor-pointer text-centered Calendar-day--this-month"
onClick={[Function]}
>
10
</span>
<span
- className="Calendar-day p1 cursor-pointer text-centered Calendar-day--this-month"
+ className="Calendar-day cursor-pointer text-centered Calendar-day--this-month"
onClick={[Function]}
>
11
</span>
<span
- className="Calendar-day p1 cursor-pointer text-centered Calendar-day--today Calendar-day--this-month"
+ className="Calendar-day cursor-pointer text-centered Calendar-day--today Calendar-day--this-month"
onClick={[Function]}
>
12
</span>
<span
- className="Calendar-day p1 cursor-pointer text-centered Calendar-day--this-month Calendar-day--week-end"
+ className="Calendar-day cursor-pointer text-centered Calendar-day--this-month Calendar-day--week-end"
onClick={[Function]}
>
13
@@ -189,43 +187,43 @@ exports[`Calendar should render correctly 1`] = `
className="Calendar-week"
>
<span
- className="Calendar-day p1 cursor-pointer text-centered Calendar-day--this-month Calendar-day--week-start"
+ className="Calendar-day cursor-pointer text-centered Calendar-day--this-month Calendar-day--week-start"
onClick={[Function]}
>
14
</span>
<span
- className="Calendar-day p1 cursor-pointer text-centered Calendar-day--this-month"
+ className="Calendar-day cursor-pointer text-centered Calendar-day--this-month"
onClick={[Function]}
>
15
</span>
<span
- className="Calendar-day p1 cursor-pointer text-centered Calendar-day--this-month"
+ className="Calendar-day cursor-pointer text-centered Calendar-day--this-month"
onClick={[Function]}
>
16
</span>
<span
- className="Calendar-day p1 cursor-pointer text-centered Calendar-day--this-month"
+ className="Calendar-day cursor-pointer text-centered Calendar-day--this-month"
onClick={[Function]}
>
17
</span>
<span
- className="Calendar-day p1 cursor-pointer text-centered Calendar-day--this-month"
+ className="Calendar-day cursor-pointer text-centered Calendar-day--this-month"
onClick={[Function]}
>
18
</span>
<span
- className="Calendar-day p1 cursor-pointer text-centered Calendar-day--this-month"
+ className="Calendar-day cursor-pointer text-centered Calendar-day--this-month"
onClick={[Function]}
>
19
</span>
<span
- className="Calendar-day p1 cursor-pointer text-centered Calendar-day--this-month Calendar-day--week-end"
+ className="Calendar-day cursor-pointer text-centered Calendar-day--this-month Calendar-day--week-end"
onClick={[Function]}
>
20
@@ -235,43 +233,43 @@ exports[`Calendar should render correctly 1`] = `
className="Calendar-week"
>
<span
- className="Calendar-day p1 cursor-pointer text-centered Calendar-day--this-month Calendar-day--week-start"
+ className="Calendar-day cursor-pointer text-centered Calendar-day--this-month Calendar-day--week-start"
onClick={[Function]}
>
21
</span>
<span
- className="Calendar-day p1 cursor-pointer text-centered Calendar-day--this-month"
+ className="Calendar-day cursor-pointer text-centered Calendar-day--this-month"
onClick={[Function]}
>
22
</span>
<span
- className="Calendar-day p1 cursor-pointer text-centered Calendar-day--this-month"
+ className="Calendar-day cursor-pointer text-centered Calendar-day--this-month"
onClick={[Function]}
>
23
</span>
<span
- className="Calendar-day p1 cursor-pointer text-centered Calendar-day--this-month"
+ className="Calendar-day cursor-pointer text-centered Calendar-day--this-month"
onClick={[Function]}
>
24
</span>
<span
- className="Calendar-day p1 cursor-pointer text-centered Calendar-day--this-month"
+ className="Calendar-day cursor-pointer text-centered Calendar-day--this-month"
onClick={[Function]}
>
25
</span>
<span
- className="Calendar-day p1 cursor-pointer text-centered Calendar-day--this-month"
+ className="Calendar-day cursor-pointer text-centered Calendar-day--this-month"
onClick={[Function]}
>
26
</span>
<span
- className="Calendar-day p1 cursor-pointer text-centered Calendar-day--this-month Calendar-day--week-end"
+ className="Calendar-day cursor-pointer text-centered Calendar-day--this-month Calendar-day--week-end"
onClick={[Function]}
>
27
@@ -281,43 +279,43 @@ exports[`Calendar should render correctly 1`] = `
className="Calendar-week"
>
<span
- className="Calendar-day p1 cursor-pointer text-centered Calendar-day--this-month Calendar-day--week-start"
+ className="Calendar-day cursor-pointer text-centered Calendar-day--this-month Calendar-day--week-start"
onClick={[Function]}
>
28
</span>
<span
- className="Calendar-day p1 cursor-pointer text-centered Calendar-day--this-month"
+ className="Calendar-day cursor-pointer text-centered Calendar-day--this-month"
onClick={[Function]}
>
29
</span>
<span
- className="Calendar-day p1 cursor-pointer text-centered Calendar-day--this-month"
+ className="Calendar-day cursor-pointer text-centered Calendar-day--this-month"
onClick={[Function]}
>
30
</span>
<span
- className="Calendar-day p1 cursor-pointer text-centered Calendar-day--this-month"
+ className="Calendar-day cursor-pointer text-centered Calendar-day--this-month"
onClick={[Function]}
>
31
</span>
<span
- className="Calendar-day p1 cursor-pointer text-centered"
+ className="Calendar-day cursor-pointer text-centered"
onClick={[Function]}
>
1
</span>
<span
- className="Calendar-day p1 cursor-pointer text-centered"
+ className="Calendar-day cursor-pointer text-centered"
onClick={[Function]}
>
2
</span>
<span
- className="Calendar-day p1 cursor-pointer text-centered Calendar-day--week-end"
+ className="Calendar-day cursor-pointer text-centered Calendar-day--week-end"
onClick={[Function]}
>
3