From 8d840d70c70d6fb8db64b57adde41684c8217b7c Mon Sep 17 00:00:00 2001
From: Gurinder Singh <gurinder.rawala@fluxninja.com>
Date: Tue, 3 Jan 2023 00:23:18 -0500
Subject: [PATCH 1/3] changed time picker dropdown designs

---
 .../TimeRangePicker/TimePickerContent.tsx     | 21 ++++++++-----------
 .../TimeRangePicker/TimePickerFooter.tsx      |  6 +++---
 .../TimeRangePicker/TimeRangeForm.tsx         | 10 ++++++++-
 .../TimeZonePicker/TimeZoneDescription.tsx    |  9 ++++++--
 4 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx
index 9ba41f99cabf..71ee11d8bd9e 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx
@@ -77,11 +77,6 @@ export const TimePickerContentWithScreenSize: React.FC<PropsWithScreenSize> = (p
   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}>
@@ -101,6 +96,11 @@ export const TimePickerContentWithScreenSize: React.FC<PropsWithScreenSize> = (p
             </CustomScrollbar>
           </div>
         )}
+        {isFullscreen && (
+          <div className={styles.leftSide}>
+            <FullScreenForm {...props} historyOptions={historyOptions} />
+          </div>
+        )}
       </div>
       {!hideTimeZone && isFullscreen && (
         <TimePickerFooter
@@ -185,10 +185,7 @@ const FullScreenForm: React.FC<FormProps> = (props) => {
         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}>
@@ -279,18 +276,18 @@ const getStyles = stylesFactory((theme: GrafanaTheme2, isReversed, hideQuickRang
     body: css`
       display: flex;
       flex-direction: row-reverse;
-      height: ${isContainerTall ? '381px' : '217px'};
+      height: ${isContainerTall ? '281px' : '217px'};
     `,
     leftSide: css`
       display: flex;
       flex-direction: column;
       border-right: ${isReversed ? 'none' : `1px solid ${theme.colors.border.weak}`};
-      width: ${!hideQuickRanges ? '60%' : '100%'};
+      width: ${!hideQuickRanges ? '50%' : '100%'};
       overflow: hidden;
       order: ${isReversed ? 1 : 0};
     `,
     rightSide: css`
-      width: ${isFullscreen ? '40%' : '100%'}; !important;
+      width: ${isFullscreen ? '50%' : '100%'}; !important;
       border-right: ${isReversed ? `1px solid ${theme.colors.border.weak}` : 'none'};
       display: flex;
       flex-direction: column;
diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx
index 9037c4a7f4ed..9590a3e54c2a 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx
@@ -7,7 +7,7 @@ import { selectors } from '@grafana/e2e-selectors';
 
 import { Field, RadioButtonGroup, Select } from '../..';
 import { stylesFactory, useTheme2 } from '../../../themes';
-import { Button } from '../../Button';
+// import { Button } from '../../Button';
 import { TimeZonePicker } from '../TimeZonePicker';
 import { TimeZoneDescription } from '../TimeZonePicker/TimeZoneDescription';
 import { TimeZoneOffset } from '../TimeZonePicker/TimeZoneOffset';
@@ -59,9 +59,9 @@ export const TimePickerFooter: FC<Props> = (props) => {
   return (
     <div>
       <section aria-label="Time zone selection" className={style.container}>
-        <Button variant="secondary" onClick={onToggleChangeTimeSettings} size="sm">
+        {/* <Button variant="secondary" onClick={onToggleChangeTimeSettings} size="sm">
           Change time settings
-        </Button>
+        </Button> */}
         <div className={style.spacer} />
         <div className={style.timeZoneContainer}>
           <div className={style.timeZone}>
diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeForm.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeForm.tsx
index 60c1584af2af..ca2cbd69dda1 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeForm.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeForm.tsx
@@ -139,7 +139,15 @@ export const TimeRangeForm: React.FC<Props> = (props) => {
         </Field>
         {fyTooltip}
       </div>
-      <Button data-testid={selectors.components.TimePicker.applyTimeRange} onClick={onApply}>
+      <Button
+        data-testid={selectors.components.TimePicker.applyTimeRange}
+        onClick={onApply}
+        style={{
+          width: '100%',
+          textAlign: 'center',
+          paddingLeft: '55px',
+        }}
+      >
         Apply time range
       </Button>
 
diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneDescription.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneDescription.tsx
index fbfb016ccdf1..b9a420a33e7e 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneDescription.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneDescription.tsx
@@ -3,7 +3,7 @@ import React, { PropsWithChildren, useMemo } from 'react';
 
 import { GrafanaTheme, TimeZoneInfo } from '@grafana/data';
 
-import { useTheme, stylesFactory } from '../../../themes';
+import { useTheme, stylesFactory, useTheme2 } from '../../../themes';
 
 interface Props {
   info?: TimeZoneInfo;
@@ -13,12 +13,17 @@ export const TimeZoneDescription: React.FC<PropsWithChildren<Props>> = ({ info }
   const theme = useTheme();
   const styles = getStyles(theme);
   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 => {

From 7ea70a79f1548afb01f1b9e9265dc4ae6ca066fc Mon Sep 17 00:00:00 2001
From: Gurinder Singh <gurinder.rawala@fluxninja.com>
Date: Tue, 3 Jan 2023 00:40:37 -0500
Subject: [PATCH 2/3] change time setting button

---
 .../TimeRangePicker/TimePickerFooter.tsx      | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx
index 9590a3e54c2a..ebe0c3061bf3 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx
@@ -7,7 +7,7 @@ import { selectors } from '@grafana/e2e-selectors';
 
 import { Field, RadioButtonGroup, Select } from '../..';
 import { stylesFactory, useTheme2 } from '../../../themes';
-// import { Button } from '../../Button';
+import { Button } from '../../Button';
 import { TimeZonePicker } from '../TimeZonePicker';
 import { TimeZoneDescription } from '../TimeZonePicker/TimeZoneDescription';
 import { TimeZoneOffset } from '../TimeZonePicker/TimeZoneOffset';
@@ -59,10 +59,6 @@ export const TimePickerFooter: FC<Props> = (props) => {
   return (
     <div>
       <section aria-label="Time zone selection" className={style.container}>
-        {/* <Button variant="secondary" onClick={onToggleChangeTimeSettings} size="sm">
-          Change time settings
-        </Button> */}
-        <div className={style.spacer} />
         <div className={style.timeZoneContainer}>
           <div className={style.timeZone}>
             <TimeZoneTitle title={info.name} />
@@ -71,6 +67,18 @@ export const TimePickerFooter: FC<Props> = (props) => {
           </div>
           <TimeZoneOffset timeZone={timeZone} timestamp={timestamp} />
         </div>
+        <div className={style.spacer} />
+        <Button
+          onClick={onToggleChangeTimeSettings}
+          size="md"
+          style={{
+            backgroundColor: '#ffffff00',
+            color: '#3A785E',
+            border: '1px solid #3A785E',
+          }}
+        >
+          Change time settings
+        </Button>
       </section>
       {isEditing ? (
         <div className={style.editContainer}>
@@ -135,6 +143,7 @@ const getStyle = stylesFactory((theme: GrafanaTheme2) => {
       flex-direction: row;
       justify-content: space-between;
       align-items: center;
+      height: 60px;
     `,
     editContainer: css`
       border-top: 1px solid ${theme.colors.border.weak};

From f7440aeb2fd54fd339058d256e8d39d41feaabf7 Mon Sep 17 00:00:00 2001
From: Gurinder Singh <gurinder.rawala@fluxninja.com>
Date: Tue, 3 Jan 2023 00:44:11 -0500
Subject: [PATCH 3/3] added dark and light

---
 .../DateTimePickers/TimeRangePicker/TimePickerFooter.tsx    | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx
index ebe0c3061bf3..79ffeaf57314 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx
@@ -56,6 +56,8 @@ export const TimePickerFooter: FC<Props> = (props) => {
     return null;
   }
 
+  const fnColor = theme.isDark ? '#8EC4AD' : '#3A785E';
+
   return (
     <div>
       <section aria-label="Time zone selection" className={style.container}>
@@ -73,8 +75,8 @@ export const TimePickerFooter: FC<Props> = (props) => {
           size="md"
           style={{
             backgroundColor: '#ffffff00',
-            color: '#3A785E',
-            border: '1px solid #3A785E',
+            color: fnColor,
+            border: `1px solid ${fnColor}`,
           }}
         >
           Change time settings