Time Range picker redesign

ui/packages/shared/components/src/DateTimePicker/index.tsx

@@ -26,7 +26,7 @@ const DateTimePicker = ({selected, onChange}: Props): JSX.Element => (
     onChange={onChange}
     showTimeInput
     dateFormat="yyyy-MM-dd HH:mm:ss"
-    className="w-full rounded-md border border-gray-200  bg-gray-50 p-2 text-sm dark:border-gray-600 dark:bg-gray-900"
+    className="h-[38px] w-full rounded-md border border-gray-200 p-2 text-center text-sm dark:border-gray-600 dark:bg-gray-900"
   />
 );
 
@@ -36,7 +36,7 @@ export const UTCDateTimePicker = ({selected, onChange}: Props): JSX.Element => (
     onChange={date => onChange(date != null ? convertLocalToUTCDate(date) : null)}
     showTimeInput
     dateFormat="yyyy-MM-dd HH:mm:ss"
-    className="w-full rounded-md border border-gray-200  bg-gray-50 p-2 text-sm dark:border-gray-600 dark:bg-gray-900"
+    className="flex h-[38px] w-full rounded-md border border-gray-200 p-2 text-center text-sm dark:border-gray-600 dark:bg-gray-900"
   />
 );
 

ui/packages/shared/components/src/DateTimeRangePicker/DateTimeRangePickerPanel/AbsoluteDatePicker/index.tsx → ui/packages/shared/components/src/DateTimeRangePicker/AbsoluteDatePicker/index.tsx

@@ -11,15 +11,14 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useState} from 'react';
+import {useEffect, useState} from 'react';
 
-import {Button} from '../../../Button';
-import {UTCDateTimePicker} from '../../../DateTimePicker';
-import {AbsoluteDate, DateTimeRange, getDateHoursAgo} from '../../utils';
+import {UTCDateTimePicker} from '../../DateTimePicker';
+import {AbsoluteDate, DateTimeRange, RelativeDate, UNITS, getDateHoursAgo} from '../utils';
 
 interface AbsoluteDatePickerProps {
   range: DateTimeRange;
-  onChange?: (from: AbsoluteDate, to: AbsoluteDate) => void;
+  onChange?: (from: AbsoluteDate | RelativeDate, to: AbsoluteDate | RelativeDate) => void;
 }
 
 const AbsoluteDatePicker = ({
@@ -32,39 +31,35 @@ const AbsoluteDatePicker = ({
   const [to, setTo] = useState<Date>(
     range.to.isRelative() ? getDateHoursAgo(0) : (range.to as AbsoluteDate).value
   );
+
+  useEffect(() => {
+    onChange(new AbsoluteDate(from), new AbsoluteDate(to));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [from, to]);
+
   return (
-    <div className="p-4">
-      <div className="mb-2 hidden">
-        <span className="text-xs uppercase">Absolute Range</span>
-      </div>
-      <div className="flex flex-col justify-center">
-        <div className="mb-2">
-          <div className="mb-2">
-            <span className="text-xs uppercase">From:</span>
-          </div>
+    <div className="flex flex-col">
+      <div className="flex justify-center gap-x-2">
+        <div>
+          <div className="mb-0.5 mt-1.5 text-xs">Start</div>
           <UTCDateTimePicker selected={from} onChange={date => date != null && setFrom(date)} />
         </div>
-        <div className="mb-1">
-          <div className="mb-2">
-            <span className="text-xs uppercase">To:</span>
-          </div>
+        <div>
+          <div className="mb-0.5 mt-1.5 text-xs">End</div>
           <UTCDateTimePicker selected={to} onChange={date => date != null && setTo(date)} />
         </div>
       </div>
-      <div className="mt-4 flex">
-        <div className="mx-auto">
-          <Button
-            onClick={() => {
-              onChange(new AbsoluteDate(from), new AbsoluteDate(to));
-            }}
-          >
-            Apply
-          </Button>
-        </div>
-      </div>
-      <p className="m-4 text-center text-xs italic text-gray-500">
-        Note: All date and time values are in UTC.
-      </p>
+      <button
+        type="button"
+        className="flex"
+        onClick={() => {
+          onChange(new RelativeDate(UNITS.HOUR, 6), new RelativeDate(UNITS.HOUR, 0));
+        }}
+      >
+        <p className="my-1 ml-1 text-xs text-gray-500 hover:text-indigo-600 dark:text-gray-400">
+          Use relative range instead
+        </p>
+      </button>
     </div>
   );
 };