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

@@ -78,11 +78,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}>
@@ -102,6 +97,11 @@ export const TimePickerContentWithScreenSize: React.FC<PropsWithScreenSize> = (p
             </CustomScrollbar>
           </div>
         )}
+        {isFullscreen && (
+          <div className={styles.leftSide}>
+            <FullScreenForm {...props} historyOptions={historyOptions} />
+          </div>
+        )}
       </div>
       {!hideTimeZone && isFullscreen && (
         <TimePickerFooter
@@ -189,10 +189,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}>
@@ -287,18 +284,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

@@ -57,6 +57,8 @@ export const TimePickerFooter: FC<Props> = (props) => {
     return null;
   }
 
+  const fnColor = theme.isDark ? '#8EC4AD' : '#3A785E';
+
   return (
     <div>
       <section
@@ -72,7 +74,15 @@ export const TimePickerFooter: FC<Props> = (props) => {
           <TimeZoneOffset timeZone={timeZone} timestamp={timestamp} />
         </div>
         <div className={style.spacer} />
-        <Button variant="secondary" onClick={onToggleChangeTimeSettings} size="sm">
+        <Button
+          onClick={onToggleChangeTimeSettings}
+          size="md"
+          style={{
+            backgroundColor: '#ffffff00',
+            color: fnColor,
+            border: `1px solid ${fnColor}`,
+          }}
+        >
           <Trans i18nKey="time-picker.footer.change-settings-button">Change time settings</Trans>
         </Button>
       </section>
@@ -142,6 +152,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/TimeRangeContent.tsx

@@ -152,7 +152,15 @@ export const TimeRangeContent = (props: Props) => {
         </Field>
         {fyTooltip}
       </div>
-      <Button data-testid={selectors.components.TimePicker.applyTimeRange} type="button" onClick={onApply}>
+      <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>
 

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

@@ -3,7 +3,7 @@ import React, { 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 => {