feat(org-stats): Final_final_V2 UI tweaks (#25756)

* fix(ui): Odd layouts in mobile
* fix(ui): Remove awkward 1h period
* feat(ui): Font sizes
* fix(pr): Add comments
* fix(ui): Colors and z-index tweaks

static/app/components/organizations/timeRangeSelector/dateRange/selectorItems.tsx

@@ -9,6 +9,7 @@ type Props = {
   handleAbsoluteClick: (value: string, e: React.MouseEvent) => void;
   isAbsoluteSelected: boolean;
   relativeSelected: string;
+  relativePeriods?: Record<string, string>; // Override DEFAULT_RELATIVE_PERIODS
   shouldShowRelative?: boolean;
   shouldShowAbsolute?: boolean;
 };
@@ -19,11 +20,16 @@ const SelectorItems = ({
   handleSelectRelative,
   handleAbsoluteClick,
   relativeSelected,
+  relativePeriods,
   isAbsoluteSelected,
 }: Props) => (
   <React.Fragment>
     {shouldShowRelative && (
-      <RelativeSelector onClick={handleSelectRelative} selected={relativeSelected} />
+      <RelativeSelector
+        onClick={handleSelectRelative}
+        selected={relativeSelected}
+        relativePeriods={relativePeriods}
+      />
     )}
     {shouldShowAbsolute && (
       <SelectorItem

static/app/components/organizations/timeRangeSelector/index.tsx

@@ -102,6 +102,11 @@ type Props = ReactRouter.WithRouterProps & {
    */
   relative: string;
 
+  /**
+   * Override defaults from DEFAULT_RELATIVE_PERIODS
+   */
+  relativeOptions?: Record<string, string>;
+
   /**
    * Default initial value for using UTC
    */
@@ -358,6 +363,7 @@ class TimeRangeSelector extends React.PureComponent<Props, State> {
       organization,
       hint,
       label,
+      relativeOptions,
     } = this.props;
     const {start, end, relative} = this.state;
 
@@ -399,17 +405,17 @@ class TimeRangeSelector extends React.PureComponent<Props, State> {
             >
               {getDynamicText({value: summary, fixed: 'start to end'})}
             </StyledHeaderItem>
-
             {isOpen && (
               <Menu {...getMenuProps()} isAbsoluteSelected={isAbsoluteSelected}>
                 <SelectorList isAbsoluteSelected={isAbsoluteSelected}>
                   <SelectorItemsHook
+                    handleSelectRelative={this.handleSelectRelative}
+                    handleAbsoluteClick={this.handleAbsoluteClick}
                     isAbsoluteSelected={isAbsoluteSelected}
                     relativeSelected={relativeSelected}
-                    shouldShowRelative={shouldShowRelative}
+                    relativePeriods={relativeOptions}
                     shouldShowAbsolute={shouldShowAbsolute}
-                    handleAbsoluteClick={this.handleAbsoluteClick}
-                    handleSelectRelative={this.handleSelectRelative}
+                    shouldShowRelative={shouldShowRelative}
                   />
                 </SelectorList>
                 {isAbsoluteSelected && (

static/app/views/usageStats/index.tsx

@@ -16,7 +16,7 @@ import TimeRangeSelector, {
 import PageHeading from 'app/components/pageHeading';
 import {Panel} from 'app/components/panels';
 import SentryDocumentTitle from 'app/components/sentryDocumentTitle';
-import {DEFAULT_STATS_PERIOD} from 'app/constants';
+import {DEFAULT_RELATIVE_PERIODS, DEFAULT_STATS_PERIOD} from 'app/constants';
 import {t} from 'app/locale';
 import {PageContent, PageHeader} from 'app/styles/organization';
 import space from 'app/styles/space';
@@ -235,6 +235,7 @@ class OrganizationStats extends React.Component<Props, State> {
       <React.Fragment>
         <DropdownDate isCalendarOpen={isCalendarOpen}>
           <TimeRangeSelector
+            organization={organization}
             relative={period ?? ''}
             start={start ?? null}
             end={end ?? null}
@@ -243,7 +244,7 @@ class OrganizationStats extends React.Component<Props, State> {
             onChange={() => {}}
             onUpdate={this.handleUpdateDatetime}
             onToggleSelector={isOpen => this.setState({isCalendarOpen: isOpen})}
-            organization={organization}
+            relativeOptions={omit(DEFAULT_RELATIVE_PERIODS, ['1h'])}
             defaultPeriod={DEFAULT_STATS_PERIOD}
           />
         </DropdownDate>
@@ -351,6 +352,13 @@ const DropdownDataCategory = styled(DropdownControl)`
       justify-content: space-between;
     }
   }
+
+  @media (min-width: ${p => p.theme.breakpoints[0]}) {
+    grid-column: auto / span 2;
+  }
+  @media (min-width: ${p => p.theme.breakpoints[2]}) {
+    grid-column: auto / span 1;
+  }
 `;
 
 const DropdownDate = styled(Panel)<{isCalendarOpen: boolean}>`
@@ -370,15 +378,29 @@ const DropdownDate = styled(Panel)<{isCalendarOpen: boolean}>`
   margin: 0;
   font-size: ${p => p.theme.fontSizeMedium};
   color: ${p => p.theme.textColor};
+  z-index: ${p => p.theme.zIndex.globalSelectionHeader};
 
+  /* TimeRageRoot in TimeRangeSelector */
   > div {
-    flex-grow: 1;
+    width: 100%;
+    align-self: stretch;
   }
 
+  /* StyledItemHeader used to show selected value of TimeRangeSelector */
   > div > div:first-child {
-    padding: ${space(1)} ${space(2)};
+    padding: 0 ${space(2)};
+  }
+
+  /* Menu that dropdowns from TimeRangeSelector */
+  > div > div:last-child {
+    /* Remove awkward 1px width difference on dropdown due to border */
+    box-sizing: content-box;
+    font-size: 1em;
   }
 
+  @media (min-width: ${p => p.theme.breakpoints[0]}) {
+    grid-column: auto / span 2;
+  }
   @media (min-width: ${p => p.theme.breakpoints[2]}) {
     grid-column: auto / span 3;
   }

static/app/views/usageStats/usageChart/index.tsx

@@ -26,15 +26,11 @@ import {formatUsageWithUnits, GIGABYTE} from '../utils';
 
 import {getTooltipFormatter, getXAxisDates, getXAxisLabelInterval} from './utils';
 
-const COLOR_ERRORS = ChartPalette[4][3];
-const COLOR_ERRORS_LIGHT = Color(COLOR_ERRORS).lighten(0.25).string();
-
-const COLOR_TRANSACTIONS = ChartPalette[4][2];
-const COLOR_TRANSACTIONS_LIGHT = Color(COLOR_TRANSACTIONS).lighten(0.25).string();
-
-const COLOR_ATTACHMENTS = ChartPalette[4][1];
-const COLOR_ATTACHMENTS_LIGHT = Color(COLOR_ATTACHMENTS).lighten(0.5).string();
-const COLOR_PROJECTED = commonTheme.gray200;
+const COLOR_ERRORS = Color(ChartPalette[4][3]).lighten(0.25).string();
+const COLOR_TRANSACTIONS = Color(ChartPalette[4][2]).lighten(0.35).string();
+const COLOR_ATTACHMENTS = Color(ChartPalette[4][1]).lighten(0.65).string();
+const COLOR_DROPPED = commonTheme.red300;
+const COLOR_PROJECTED = commonTheme.gray100;
 
 export const CHART_OPTIONS_DATACATEGORY: SelectValue<DataCategory>[] = [
   {
@@ -202,14 +198,14 @@ export class UsageChart extends React.Component<Props, State> {
     const {dataCategory} = this.props;
 
     if (dataCategory === DataCategory.ERRORS) {
-      return [COLOR_ERRORS_LIGHT, COLOR_ERRORS, COLOR_PROJECTED];
+      return [COLOR_ERRORS, COLOR_DROPPED, COLOR_PROJECTED];
     }
 
     if (dataCategory === DataCategory.ATTACHMENTS) {
-      return [COLOR_ATTACHMENTS_LIGHT, COLOR_ATTACHMENTS, COLOR_PROJECTED];
+      return [COLOR_ATTACHMENTS, COLOR_DROPPED, COLOR_PROJECTED];
     }
 
-    return [COLOR_TRANSACTIONS_LIGHT, COLOR_TRANSACTIONS, COLOR_PROJECTED];
+    return [COLOR_TRANSACTIONS, COLOR_DROPPED, COLOR_PROJECTED];
   }
 
   get chartMetadata(): {