diff --git a/src/client/components/forms/field-types/DateTime/index.js b/src/client/components/forms/field-types/DateTime/index.js index 0af500f68d..43880b4cca 100644 --- a/src/client/components/forms/field-types/DateTime/index.js +++ b/src/client/components/forms/field-types/DateTime/index.js @@ -7,7 +7,7 @@ import Label from '../../Label'; import Error from '../../Error'; import CalendarIcon from '../../../graphics/Calendar'; -import './react-datepicker.scss'; +import 'react-datepicker/dist/react-datepicker.css'; import './index.scss'; const defaultError = 'Please fill in the field with a valid date'; @@ -30,7 +30,7 @@ const DateTime = (props) => { minDate, maxDate, monthsShown, - useTime: showTimeSelect, + useTime, minTime, maxTime, timeIntervals, @@ -50,12 +50,19 @@ const DateTime = (props) => { validate, }); + let dateTimeFormat = inputDateTimeFormat; + if (!dateTimeFormat) { + if (useTime && useDate) dateTimeFormat = 'MMM d, yyy h:mma'; + else if (useTime) dateTimeFormat = 'h:mma'; + else dateTimeFormat = 'MMM d, yyy'; + } + const dateTimePickerProps = { minDate, maxDate, - dateFormat: inputDateTimeFormat, + dateFormat: dateTimeFormat, monthsShown: Math.min(2, monthsShown), - showTimeSelect, + showTimeSelect: useTime, minTime, maxTime, timeIntervals, @@ -114,13 +121,13 @@ DateTime.defaultProps = { // date specific props useDate: true, minDate: new Date(), - maxDate: undefined, + maxDate: null, monthsShown: 1, - inputDateTimeFormat: 'MMM d, yyy', + inputDateTimeFormat: '', // time specific props useTime: false, - minTime: null, - maxTime: null, + minTime: new Date('4040-01-01T01:00:00'), + maxTime: new Date('4040-01-01T24:00:00'), timeIntervals: 30, timeFormat: 'h:mm aa', }; diff --git a/src/client/components/forms/field-types/DateTime/index.scss b/src/client/components/forms/field-types/DateTime/index.scss index 69e5c7cec3..cefc60334e 100644 --- a/src/client/components/forms/field-types/DateTime/index.scss +++ b/src/client/components/forms/field-types/DateTime/index.scss @@ -1,6 +1,6 @@ @import '../shared'; -$cal-icon-width: 24px; +$cal-icon-width: 18px; .date-time-picker { @@ -24,10 +24,7 @@ $cal-icon-width: 24px; transform: translateY(-50%); width: $cal-icon-width; height: auto; - - path { - fill: $black; - } + @include color-svg($black); } } @@ -77,18 +74,36 @@ $cal-icon-width: 24px; } &__navigation { + background: none; + line-height: 1.7rem; + text-align: center; + cursor: pointer; + position: absolute; + top: 10px; + width: 0; + padding: 0; + border: 0.45rem solid transparent; + z-index: 1; + height: 10px; + width: 10px; + text-indent: -999em; + overflow: hidden; top: 15px; &--next { + border-left-color: $gray; + &:focus { - border-left-color: $primary; + border-left-color: darken($gray, 30%); outline:none; } } &--previous { + border-right-color: $gray; + &:focus { - border-right-color: $primary; + border-right-color: darken($gray, 30%); outline:none; } } @@ -117,7 +132,7 @@ $cal-icon-width: 24px; &--selected { &:focus { - background-color: $black; + background-color: $primary; } } @@ -125,8 +140,7 @@ $cal-icon-width: 24px; color: white; &:focus { - background-color: $gray; - color: white; + background-color: $light-gray; box-shadow: inset 0px 0px 0px 1px $primary, 0px 0px 0px 1px $primary; } } @@ -137,16 +151,19 @@ $cal-icon-width: 24px; z-index: 10; } - .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected { - background: $gray; - box-shadow: inset 0px 0px 0px 1px $primary, 0px 0px 0px 1px $primary; - color: white; + .react-datepicker__day--keyboard-selected, + .react-datepicker__month-text--keyboard-selected, + .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected { + background: $primary; + color: $black; + font-weight: normal; border-radius: 0; } .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected, .react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range, .react-datepicker__month-text--selected, .react-datepicker__month-text--in-selecting-range, .react-datepicker__month-text--in-range { - background-color: $black; + background: $primary; + color: $black; border-radius: 0; } @@ -159,23 +176,6 @@ $cal-icon-width: 24px; width: 120px; } - .react-datepicker__navigation { - background: none; - line-height: 1.7rem; - text-align: center; - cursor: pointer; - position: absolute; - top: 10px; - width: 0; - padding: 0; - border: 0.45rem solid transparent; - z-index: 1; - height: 10px; - width: 10px; - text-indent: -999em; - overflow: hidden; - } - .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) { right: 130px; } diff --git a/src/client/components/graphics/Calendar/index.js b/src/client/components/graphics/Calendar/index.js index 656e7ff863..d83736b040 100644 --- a/src/client/components/graphics/Calendar/index.js +++ b/src/client/components/graphics/Calendar/index.js @@ -1,31 +1,40 @@ import React from 'react'; +import './index.scss'; + const Calendar = () => { return ( - - - - - + + + + ); }; diff --git a/src/client/components/graphics/Calendar/index.scss b/src/client/components/graphics/Calendar/index.scss new file mode 100644 index 0000000000..3fbecece69 --- /dev/null +++ b/src/client/components/graphics/Calendar/index.scss @@ -0,0 +1,8 @@ +.calendar { + overflow: visible; + + rect { + fill: none; + } +} + diff --git a/src/client/config/getWebpackDevConfig.js b/src/client/config/getWebpackDevConfig.js index e93d067f6f..b70671752c 100644 --- a/src/client/config/getWebpackDevConfig.js +++ b/src/client/config/getWebpackDevConfig.js @@ -82,7 +82,7 @@ module.exports = (config) => { // Chains the sass-loader with the css-loader and the style-loader // to immediately apply all styles to the DOM. { - test: /\.(scss|sass)$/, + test: /\.(scss|sass|css)$/, use: getStyleLoaders({ importLoaders: 2 }, 'sass-loader'), }, // "file" loader makes sure those assets get served by WebpackDevServer. diff --git a/src/client/scss/app.scss b/src/client/scss/app.scss index 525c9363a2..8d74f82e47 100644 --- a/src/client/scss/app.scss +++ b/src/client/scss/app.scss @@ -96,8 +96,7 @@ a { .icon { @include color-svg($black); - - path, line, polyline { + path, line, polyline, rect { vector-effect: non-scaling-stroke; shape-rendering:crispEdges; fill: none;