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

@@ -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;

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

@@ -56,13 +56,11 @@ 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}>
-        <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 +69,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: fnColor,
+            border: `1px solid ${fnColor}`,
+          }}
+        >
+          Change time settings
+        </Button>
       </section>
       {isEditing ? (
         <div className={style.editContainer}>
@@ -135,6 +145,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};

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>
 

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 => {