Time range selector changes (#42)

* changed time picker dropdown designs

* change time setting button

* added dark and light

Author: gurinder39

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx

@@ -4,7 +4,7 @@ import { memo, useMemo, useState } from 'react';
 import { GrafanaTheme2, isDateTime, rangeUtil, RawTimeRange, TimeOption, TimeRange, TimeZone } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 
-import { useStyles2, useTheme2 } from '../../../themes';
+import { stylesFactory, useStyles2, useTheme2 } from '../../../themes';
 import { getFocusStyles } from '../../../themes/mixins';
 import { t, Trans } from '../../../utils/i18n';
 import { FilterInput } from '../../FilterInput/FilterInput';
@@ -79,11 +79,6 @@ export const TimePickerContentWithScreenSize = (props: PropsWithScreenSize) => {
   return (
     <div id="TimePickerContent" className={cx(styles.container, className)}>
       <div className={styles.body}>
-        {isFullscreen && (
-          <div className={styles.leftSide}>
-            <FullScreenForm {...props} historyOptions={historyOptions} />
-          </div>
-        )}
         {(!isFullscreen || !hideQuickRanges) && (
           <div className={styles.rightSide}>
             <div className={styles.timeRangeFilter}>
@@ -102,6 +97,11 @@ export const TimePickerContentWithScreenSize = (props: PropsWithScreenSize) => {
             </div>
           </div>
         )}
+        {isFullscreen && (
+          <div className={styles.leftSide}>
+            <FullScreenForm {...props} historyOptions={historyOptions} />
+          </div>
+        )}
       </div>
       {!hideTimeZone && isFullscreen && (
         <TimePickerFooter
@@ -193,10 +193,7 @@ const FullScreenForm = (props: FormProps) => {
         className={styles.container}
         style={{
           height: '100%',
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          alignItems: 'center',
+          padding: '25px',
         }}
       >
         <div className={styles.title} data-testid={selectors.components.TimePicker.absoluteTimeRangeTitle}>
@@ -278,54 +275,45 @@ const useTimeOption = (raw: RawTimeRange, quickOptions: TimeOption[]): TimeOptio
   }, [raw, quickOptions]);
 };
 
-const getStyles = (
-  theme: GrafanaTheme2,
-  isReversed?: boolean,
-  hideQuickRanges?: boolean,
-  isContainerTall?: boolean,
-  isFullscreen?: boolean
-) => ({
-  container: css({
-    background: theme.colors.background.primary,
-    boxShadow: theme.shadows.z3,
-    width: `${isFullscreen ? '546px' : '262px'}`,
-    borderRadius: theme.shape.radius.default,
-    border: `1px solid ${theme.colors.border.weak}`,
-    [`${isReversed ? 'left' : 'right'}`]: 0,
-    display: 'flex',
-    flexDirection: 'column',
-  }),
-  body: css({
-    display: 'flex',
-    flexDirection: 'row-reverse',
-    height: `${isContainerTall ? '381px' : '217px'}`,
-    maxHeight: '100vh',
-  }),
-  leftSide: css({
-    display: 'flex',
-    flexDirection: 'column',
-    borderRight: `${isReversed ? 'none' : `1px solid ${theme.colors.border.weak}`}`,
-    width: `${!hideQuickRanges ? '60%' : '100%'}`,
-    overflow: 'auto',
-    scrollbarWidth: 'thin',
-    order: isReversed ? 1 : 0,
-  }),
-  rightSide: css({
-    width: `${isFullscreen ? '40%' : '100%'}; !important`,
-    borderRight: isReversed ? `1px solid ${theme.colors.border.weak}` : 'none',
-    display: 'flex',
-    flexDirection: 'column',
-  }),
-  timeRangeFilter: css({
-    padding: theme.spacing(1),
-  }),
-  spacing: css({
-    marginTop: '16px',
-  }),
-  scrollContent: css({
-    overflowY: 'auto',
-    scrollbarWidth: 'thin',
-  }),
+const getStyles = stylesFactory((theme: GrafanaTheme2, isReversed, hideQuickRanges, isContainerTall, isFullscreen) => {
+  return {
+    container: css`
+      background: ${theme.colors.background.primary};
+      box-shadow: ${theme.shadows.z3};
+      position: absolute;
+      z-index: ${theme.zIndex.dropdown};
+      width: ${isFullscreen ? '546px' : '262px'};
+      top: 116%;
+      border-radius: 2px;
+      border: 1px solid ${theme.colors.border.weak};
+      ${isReversed ? 'left' : 'right'}: 0;
+    `,
+    body: css`
+      display: flex;
+      flex-direction: row-reverse;
+      height: ${isContainerTall ? '281px' : '217px'};
+    `,
+    leftSide: css`
+      display: flex;
+      flex-direction: column;
+      border-right: ${isReversed ? 'none' : `1px solid ${theme.colors.border.weak}`};
+      width: ${!hideQuickRanges ? '50%' : '100%'};
+      overflow: hidden;
+      order: ${isReversed ? 1 : 0};
+    `,
+    rightSide: css`
+      width: ${isFullscreen ? '50%' : '100%'}; !important;
+      border-right: ${isReversed ? `1px solid ${theme.colors.border.weak}` : 'none'};
+      display: flex;
+      flex-direction: column;
+    `,
+    timeRangeFilter: css`
+      padding: ${theme.spacing(1)};
+    `,
+    spacing: css`
+      margin-top: 16px;
+    `,
+  };
 });
 
 const getNarrowScreenStyles = (theme: GrafanaTheme2) => ({

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx

@@ -6,7 +6,7 @@ import * as React from 'react';
 import { getTimeZoneInfo, GrafanaTheme2, TimeZone } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 
-import { useStyles2 } from '../../../themes';
+import { stylesFactory, useStyles2 } from '../../../themes';
 import { t, Trans } from '../../../utils/i18n';
 import { Button } from '../../Button';
 import { Field } from '../../Forms/Field';
@@ -63,6 +63,8 @@ export const TimePickerFooter = (props: Props) => {
     return null;
   }
 
+  const fnColor = theme.isDark ? '#8EC4AD' : '#3A785E';
+
   return (
     <div>
       <section
@@ -79,13 +81,13 @@ export const TimePickerFooter = (props: Props) => {
         </div>
         <div className={style.spacer} />
         <Button
-          data-testid={selectors.components.TimeZonePicker.changeTimeSettingsButton}
-          variant="secondary"
           onClick={onToggleChangeTimeSettings}
-          size="sm"
-          aria-expanded={isEditing}
-          aria-controls={timeSettingsId}
-          icon={isEditing ? 'angle-up' : 'angle-down'}
+          size="md"
+          style={{
+            backgroundColor: '#ffffff00',
+            color: fnColor,
+            border: `1px solid ${fnColor}`,
+          }}
         >
           <Trans i18nKey="time-picker.footer.change-settings-button">Change time settings</Trans>
         </Button>
@@ -162,42 +164,45 @@ export const TimePickerFooter = (props: Props) => {
   );
 };
 
-const getStyle = (theme: GrafanaTheme2) => ({
-  container: css({
-    borderTop: `1px solid ${theme.colors.border.weak}`,
-    padding: theme.spacing(1.5),
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  }),
-  editContainer: css({
-    borderTop: `1px solid ${theme.colors.border.weak}`,
-    padding: theme.spacing(1.5),
-    paddingTop: 0,
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  }),
-  spacer: css({
-    marginLeft: '7px',
-  }),
-  timeSettingContainer: css({
-    paddingTop: theme.spacing(1),
-  }),
-  fiscalYearField: css({
-    marginBottom: 0,
-  }),
-  timeZoneContainer: css({
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    flexGrow: 1,
-  }),
-  timeZone: css({
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'baseline',
-    flexGrow: 1,
-  }),
+const getStyle = stylesFactory((theme: GrafanaTheme2) => {
+  return {
+    container: css`
+      border-top: 1px solid ${theme.colors.border.weak};
+      padding: 11px;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      height: 60px;
+    `,
+    editContainer: css`
+      border-top: 1px solid ${theme.colors.border.weak};
+      padding: 11px;
+      justify-content: space-between;
+      align-items: center;
+      padding: 7px;
+    `,
+    spacer: css`
+      margin-left: 7px;
+    `,
+    timeSettingContainer: css`
+      padding-top: ${theme.spacing(1)};
+    `,
+    fiscalYearField: css`
+      margin-bottom: 0px;
+    `,
+    timeZoneContainer: css`
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      flex-grow: 1;
+    `,
+    timeZone: css`
+      display: flex;
+      flex-direction: row;
+      align-items: baseline;
+      flex-grow: 1;
+    `,
+  };
 });

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeContent.tsx

@@ -195,27 +195,17 @@ export const TimeRangeContent = (props: Props) => {
         </Field>
         {fyTooltip}
       </div>
-      <div className={style.buttonsContainer}>
-        <Button
-          data-testid={selectors.components.TimePicker.copyTimeRange}
-          icon="copy"
-          variant="secondary"
-          tooltip={t('time-picker.copy-paste.tooltip-copy', 'Copy time range to clipboard')}
-          type="button"
-          onClick={onCopy}
-        />
-        <Button
-          data-testid={selectors.components.TimePicker.pasteTimeRange}
-          icon="clipboard-alt"
-          variant="secondary"
-          tooltip={t('time-picker.copy-paste.tooltip-paste', 'Paste time range')}
-          type="button"
-          onClick={onPaste}
-        />
-        <Button data-testid={selectors.components.TimePicker.applyTimeRange} type="button" onClick={onApply}>
-          <Trans i18nKey="time-picker.range-content.apply-button">Apply time range</Trans>
-        </Button>
-      </div>
+      <Button
+        data-testid={selectors.components.TimePicker.applyTimeRange}
+        onClick={onApply}
+        style={{
+          width: '100%',
+          textAlign: 'center',
+          paddingLeft: '55px',
+        }}
+      >
+        <Trans i18nKey="time-picker.range-content.apply-button">Apply time range</Trans>
+      </Button>
 
       <TimePickerCalendar
         isFullscreen={isFullscreen}

packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneDescription.tsx

@@ -3,7 +3,7 @@ import { useMemo } from 'react';
 
 import { GrafanaTheme2, TimeZoneInfo } from '@grafana/data';
 
-import { useStyles2 } from '../../../themes';
+import { useTheme2, useStyles2 } from '../../../themes';
 
 interface Props {
   info?: TimeZoneInfo;
@@ -12,12 +12,17 @@ interface Props {
 export const TimeZoneDescription = ({ info }: Props) => {
   const styles = useStyles2(getStyles);
   const description = useDescription(info);
+  const { isDark } = useTheme2();
 
   if (!info) {
     return null;
   }
 
-  return <div className={styles.description}>{description}</div>;
+  return (
+    <div className={styles.description} style={{ color: isDark ? '#F27A40' : '#BF470D' }}>
+      {description}
+    </div>
+  );
 };
 
 const useDescription = (info?: TimeZoneInfo): string => {