Grafana ui/time of day picker ui improvements (#21950)

* Grafana-UI: Add caret to the picker

* Grafana-UI: Customise popup's font-size and border-color

* Grafana-UI: Replace highlight background with border color

* Grafana-UI: Use stylesFactory vs inline classes

* Grafana-UI: Import stylesFactory from themes vs index

packages/grafana-ui/src/components/TimePicker/TimeOfDayPicker.tsx

@@ -1,6 +1,9 @@
 import React, { FC } from 'react';
 import RcTimePicker from 'rc-time-picker';
-import { dateTime, DateTime, dateTimeAsMoment } from '@grafana/data';
+import { css } from 'emotion';
+import { dateTime, DateTime, dateTimeAsMoment, GrafanaTheme } from '@grafana/data';
+import { useTheme, Icon } from '../../index';
+import { stylesFactory } from '../../themes';
 
 interface Props {
   onChange: (value: DateTime) => void;
@@ -9,10 +12,42 @@ interface Props {
   minuteStep?: number;
 }
 
+const getStyles = stylesFactory((theme: GrafanaTheme) => {
+  return {
+    caretWrapper: css`
+      position: absolute;
+      right: 8px;
+      top: 50%;
+      transform: translateY(-50%);
+      display: inline-block;
+      text-align: right;
+      z-index: 1071;
+    `,
+    picker: css`
+      .rc-time-picker-panel-select {
+        border-color: ${theme.colors.dark6};
+        font-size: 14px;
+        li {
+          outline-width: 2px;
+          &.rc-time-picker-panel-select-option-selected {
+            background-color: inherit;
+            border: 1px solid ${theme.colors.orange};
+            border-radius: ${theme.border.radius.sm};
+          }
+        }
+      }
+    `,
+  };
+});
+
 export const TimeOfDayPicker: FC<Props> = ({ minuteStep = 1, showHour = true, onChange, value }) => {
+  const theme = useTheme();
+  const styles = getStyles(theme);
+
   return (
     <div>
       <RcTimePicker
+        popupClassName={styles.picker}
         defaultValue={dateTimeAsMoment()}
         onChange={(value: any) => onChange(dateTime(value))}
         allowEmpty={false}
@@ -20,7 +55,20 @@ export const TimeOfDayPicker: FC<Props> = ({ minuteStep = 1, showHour = true, on
         value={dateTimeAsMoment(value)}
         showHour={showHour}
         minuteStep={minuteStep}
+        inputIcon={<Caret wrapperStyle={styles.caretWrapper} />}
       />
     </div>
   );
 };
+
+interface CaretProps {
+  wrapperStyle?: string;
+}
+
+const Caret: FC<CaretProps> = ({ wrapperStyle = '' }) => {
+  return (
+    <div className={wrapperStyle}>
+      <Icon name="caret-down" />
+    </div>
+  );
+};