Moved date-time related utils to the proper folder

src/utils/dates/DateInput.scss

@@ -0,0 +1,135 @@
+@import '../mixins/vertical-align';
+@import '../base';
+
+.date-input-container {
+  position: relative;
+}
+
+.date-input-container__input {
+  padding-right: 35px !important;
+}
+
+.date-input-container__input:not(:disabled) {
+  background-color: var(--primary-color) !important;
+}
+
+.card .date-input-container__input:not(:disabled),
+.dropdown .date-input-container__input:not(:disabled) {
+  background-color: var(--input-color) !important;
+}
+
+.date-input-container__icon {
+  @include vertical-align();
+
+  right: .75rem;
+  cursor: pointer;
+}
+
+.react-datepicker__close-icon.react-datepicker__close-icon {
+  @include vertical-align();
+
+  right: 0;
+}
+
+.react-datepicker__close-icon.react-datepicker__close-icon:after {
+  right: .75rem;
+  line-height: 11px;
+  background-color: #333333;
+  font-size: 14px;
+}
+
+.react-datepicker__input-container,
+.react-datepicker-wrapper {
+  display: block !important;
+}
+
+.react-datepicker__day--keyboard-selected {
+  background-color: $mainColor;
+
+  &:hover {
+    background-color: darken($mainColor, 12%);
+  }
+}
+
+.react-datepicker__time.react-datepicker__time,
+.react-datepicker.react-datepicker {
+  background-color: var(--primary-color) !important;
+  color: var(--text-color);
+  border-color: var(--border-color);
+}
+
+.react-datepicker__header.react-datepicker__header {
+  background-color: var(--secondary-color);
+  border-color: var(--border-color);
+}
+
+.react-datepicker__current-month.react-datepicker__current-month,
+.react-datepicker-time__header.react-datepicker-time__header,
+.react-datepicker-year-header.react-datepicker-year-header,
+.react-datepicker__day-name.react-datepicker__day-name,
+.react-datepicker__day.react-datepicker__day:not(:hover):not(.react-datepicker__day--selected),
+.react-datepicker__time-name.react-datepicker__time-name {
+  color: inherit;
+}
+
+.react-datepicker__day--disabled.react-datepicker__day--disabled {
+  cursor: default;
+  color: var(--border-color) !important;
+}
+
+.react-datepicker__day--keyboard-selected.react-datepicker__day--keyboard-selected,
+.react-datepicker__month-text--keyboard-selected.react-datepicker__month-text--keyboard-selected,
+.react-datepicker__quarter-text--keyboard-selected.react-datepicker__quarter-text--keyboard-selected,
+.react-datepicker__year-text--keyboard-selected.react-datepicker__year-text--keyboard-selected {
+  background-color: var(--brand-color) !important;
+  color: white !important;
+}
+
+.react-datepicker__time-list-item.react-datepicker__time-list-item:hover {
+  color: #232323;
+}
+
+.react-datepicker__time-container.react-datepicker__time-container {
+  border-color: var(--border-color);
+}
+
+.react-datepicker__time-list.react-datepicker__time-list {
+  /* Forefox scrollbar */
+  scrollbar-color: rgba(0, 0, 0, 0.5) var(--secondary-color);
+  scrollbar-width: thin;
+
+  /* Chrome webkit scrollbar */
+  &::-webkit-scrollbar {
+    width: 10px;
+    background-color: var(--secondary-color);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.5);
+    border-radius: 0.5rem;
+  }
+}
+
+.react-datepicker-popper.react-datepicker-popper {
+  z-index: 2;
+
+  &[data-placement^='top'] .react-datepicker__triangle.react-datepicker__triangle {
+    &::after {
+      border-top-color: var(--primary-color);
+    }
+
+    &::before {
+      border-top-color: var(--border-color);
+    }
+  }
+
+  &[data-placement^='bottom'] .react-datepicker__triangle.react-datepicker__triangle {
+    &::after {
+      border-bottom-color: var(--secondary-color);
+    }
+
+    &::before {
+      border-bottom-color: var(--border-color);
+    }
+  }
+}

src/utils/dates/DateInput.tsx

@@ -0,0 +1,41 @@
+import { useRef } from 'react';
+import { isNil } from 'ramda';
+import DatePicker, { ReactDatePickerProps } from 'react-datepicker';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCalendarAlt as calendarIcon } from '@fortawesome/free-regular-svg-icons';
+import classNames from 'classnames';
+import { STANDARD_DATE_FORMAT } from '../helpers/date';
+import './DateInput.scss';
+
+export type DateInputProps = ReactDatePickerProps;
+
+export const DateInput = (props: DateInputProps) => {
+  const { className, isClearable, selected, dateFormat } = props;
+  const showCalendarIcon = !isClearable || isNil(selected);
+  const ref = useRef<{ input: HTMLInputElement }>();
+
+  return (
+    <div className="date-input-container">
+      <DatePicker
+        {...props}
+        popperModifiers={[
+          {
+            name: 'arrow',
+            options: { padding: 24 }, // This prevents the arrow to be placed on the very edge, which looks ugly
+          },
+        ]}
+        dateFormat={dateFormat ?? STANDARD_DATE_FORMAT}
+        className={classNames('date-input-container__input form-control', className)}
+        // @ts-expect-error The DatePicker type definition is wrong. It has a ref prop
+        ref={ref}
+      />
+      {showCalendarIcon && (
+        <FontAwesomeIcon
+          icon={calendarIcon}
+          className="date-input-container__icon"
+          onClick={() => ref.current?.input.focus()}
+        />
+      )}
+    </div>
+  );
+};

src/utils/dates/DateRangeRow.tsx

@@ -1,5 +1,5 @@
 import { endOfDay } from 'date-fns';
-import { DateInput } from '../DateInput';
+import { DateInput } from './DateInput';
 import { DateRange } from './types';
 
 interface DateRangeRowProps extends DateRange {

src/utils/dates/DateTimeInput.tsx

@@ -1,6 +1,6 @@
 import { ReactDatePickerProps } from 'react-datepicker';
 import { FC } from 'react';
-import { DateInput } from '../DateInput';
+import { DateInput } from './DateInput';
 import { STANDARD_DATE_AND_TIME_FORMAT } from '../helpers/date';
 
 export type DateTimeInputProps = Omit<ReactDatePickerProps, 'showTimeSelect' | 'dateFormat' | 'timeIntervals'>;

src/utils/dates/Time.tsx

@@ -0,0 +1,18 @@
+import { parseISO, format as formatDate, getUnixTime, formatDistance } from 'date-fns';
+import { isDateObject, STANDARD_DATE_AND_TIME_FORMAT } from '../helpers/date';
+
+export interface TimeProps {
+  date: Date | string;
+  format?: string;
+  relative?: boolean;
+}
+
+export const Time = ({ date, format = STANDARD_DATE_AND_TIME_FORMAT, relative = false }: TimeProps) => {
+  const dateObject = isDateObject(date) ? date : parseISO(date);
+
+  return (
+    <time dateTime={`${getUnixTime(dateObject)}000`}>
+      {relative ? `${formatDistance(new Date(), dateObject)} ago` : formatDate(dateObject, format)}
+    </time>
+  );
+};