diff --git a/public/pages/CreateMonitor/components/MonitorType/MonitorType.js b/public/pages/CreateMonitor/components/MonitorType/MonitorType.js
index ae793ec4b..988791531 100644
--- a/public/pages/CreateMonitor/components/MonitorType/MonitorType.js
+++ b/public/pages/CreateMonitor/components/MonitorType/MonitorType.js
@@ -4,15 +4,7 @@
*/
import React from 'react';
-import {
- EuiFlexGrid,
- EuiFlexGroup,
- EuiFlexItem,
- EuiFormLabel,
- EuiCompressedFormRow,
- EuiSpacer,
- EuiText,
-} from '@elastic/eui';
+import { EuiFlexGrid, EuiFlexItem, EuiFormLabel, EuiSpacer, EuiText } from '@elastic/eui';
import FormikCheckableCard from '../../../../components/FormControls/FormikCheckableCard';
import { MONITOR_TYPE, SEARCH_TYPE } from '../../../../utils/constants';
import { FORMIK_INITIAL_TRIGGER_VALUES } from '../../../CreateTrigger/containers/CreateTrigger/utils/constants';
diff --git a/public/pages/CreateMonitor/components/Schedule/Frequencies/Daily.js b/public/pages/CreateMonitor/components/Schedule/Frequencies/Daily.js
index 80e689890..23d451d03 100644
--- a/public/pages/CreateMonitor/components/Schedule/Frequencies/Daily.js
+++ b/public/pages/CreateMonitor/components/Schedule/Frequencies/Daily.js
@@ -6,37 +6,40 @@
import React from 'react';
import { Field } from 'formik';
import moment from 'moment';
-import { EuiCompressedFormRow, EuiDatePicker, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiFormRow, EuiDatePicker, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import TimezoneComboBox from './TimezoneComboBox';
-const Daily = () => (
-
-
-
- {({
- field: { value, onChange, onBlur, ...rest },
- form: { touched, errors, setFieldValue },
- }) => (
-
- {
- setFieldValue('daily', date.hours());
- }}
- dateFormat="hh:mm A"
- timeIntervals={60}
- {...rest}
- />
-
- )}
-
-
-
-
-
-
-);
+const Daily = ({ compressed }) => {
+ return (
+
+
+
+ {({
+ field: { value, onChange, onBlur, className, ...rest },
+ form: { touched, errors, setFieldValue },
+ }) => (
+
+ {
+ setFieldValue('daily', date.hours());
+ }}
+ dateFormat="hh:mm A"
+ timeIntervals={60}
+ className={compressed ? 'euiFieldText--compressed' : ''}
+ {...rest}
+ />
+
+ )}
+
+
+
+
+
+
+ );
+};
export default Daily;
diff --git a/public/pages/CreateMonitor/components/Schedule/Frequencies/FrequencyPicker.js b/public/pages/CreateMonitor/components/Schedule/Frequencies/FrequencyPicker.js
index fab615a39..f9285e8b9 100644
--- a/public/pages/CreateMonitor/components/Schedule/Frequencies/FrequencyPicker.js
+++ b/public/pages/CreateMonitor/components/Schedule/Frequencies/FrequencyPicker.js
@@ -23,7 +23,7 @@ const components = {
const FrequencyPicker = (props) => {
const type = props.formik.values.frequency;
const Component = components[type];
- return ;
+ return ;
};
export default connect(FrequencyPicker);
diff --git a/public/pages/CreateMonitor/components/Schedule/Frequencies/Monthly.js b/public/pages/CreateMonitor/components/Schedule/Frequencies/Monthly.js
index 89c6c9ea4..0364b8588 100644
--- a/public/pages/CreateMonitor/components/Schedule/Frequencies/Monthly.js
+++ b/public/pages/CreateMonitor/components/Schedule/Frequencies/Monthly.js
@@ -10,7 +10,7 @@ import { FormikFieldNumber, FormikSelect } from '../../../../../components/FormC
import { isInvalid, hasError, validateMonthlyDay } from '../../../../../utils/validate';
import { monthlyTypes } from './utils/constants';
-const Monthly = () => (
+const Monthly = ({ compressed }) => (
@@ -45,7 +45,7 @@ const Monthly = () => (
-
+
);
diff --git a/public/pages/CreateMonitor/components/Schedule/Frequencies/Weekly.js b/public/pages/CreateMonitor/components/Schedule/Frequencies/Weekly.js
index bdb5518df..911e6d3d0 100644
--- a/public/pages/CreateMonitor/components/Schedule/Frequencies/Weekly.js
+++ b/public/pages/CreateMonitor/components/Schedule/Frequencies/Weekly.js
@@ -31,7 +31,7 @@ const validate = (value) => {
if (!booleans.some((bool) => bool)) return 'Must select at least one weekday';
};
-const Weekly = () => (
+const Weekly = ({ compressed }) => (
{({ field: { value }, form: { touched, errors, setFieldValue, setFieldTouched } }) => (
@@ -47,7 +47,7 @@ const Weekly = () => (
)}
-
+
);
diff --git a/public/pages/MonitorDetails/containers/MonitorHistory/DateRangePicker.js b/public/pages/MonitorDetails/containers/MonitorHistory/DateRangePicker.js
index 39358b8c9..630d352e3 100644
--- a/public/pages/MonitorDetails/containers/MonitorHistory/DateRangePicker.js
+++ b/public/pages/MonitorDetails/containers/MonitorHistory/DateRangePicker.js
@@ -91,8 +91,11 @@ class DateRangePicker extends React.PureComponent {
};
});
};
+
render() {
const { rangeStartDateTime, rangeEndDateTime } = this.state;
+ const { compressed } = this.props;
+
return (
@@ -109,6 +112,7 @@ class DateRangePicker extends React.PureComponent {
showTimeSelect
popperClassName="euiRangePicker--popper"
shouldCloseOnSelect
+ className={compressed ? 'euiFieldText--compressed' : ''}
{...rangeStartDateTime}
/>
}
@@ -123,6 +127,7 @@ class DateRangePicker extends React.PureComponent {
showTimeSelect
popperClassName="euiRangePicker--popper"
shouldCloseOnSelect
+ className={compressed ? 'euiFieldText--compressed' : ''}
{...rangeEndDateTime}
/>
}
diff --git a/public/pages/MonitorDetails/containers/MonitorHistory/MonitorHistory.js b/public/pages/MonitorDetails/containers/MonitorHistory/MonitorHistory.js
index 2145ca08e..f713df1f0 100644
--- a/public/pages/MonitorDetails/containers/MonitorHistory/MonitorHistory.js
+++ b/public/pages/MonitorDetails/containers/MonitorHistory/MonitorHistory.js
@@ -323,6 +323,7 @@ class MonitorHistory extends PureComponent {
initialStartTime={this.initialStartTime}
initialEndTime={this.initialEndTime}
onRangeChange={this.handleRangeChange}
+ compressed
/>,
]}
>