updating colors, margins and sizes

getsentry · Sep 25, 2024 · 2607398 · 2607398
1 parent 5805a9b
commit 2607398
Show file tree

Hide file tree

Showing 9 changed files with 56 additions and 63 deletions.
diff --git a/static/app/views/explore/content.tsx b/static/app/views/explore/content.tsx
@@ -131,7 +131,7 @@ const FilterActions = styled('div')`
 const Body = styled(Layout.Body)`
   @media (min-width: ${p => p.theme.breakpoints.large}) {
     display: grid;
-    grid-template-columns: 275px minmax(100px, auto);
+    grid-template-columns: 300px minmax(100px, auto);
     align-content: start;
     gap: ${p => (!p.noRowGap ? `${space(3)}` : `0 ${space(3)}`)};
   }

diff --git a/static/app/views/explore/tables/index.tsx b/static/app/views/explore/tables/index.tsx
@@ -73,7 +73,7 @@ function ExploreSamplesTable() {
           onClick={openColumnEditor}
           icon={<IconTable />}
         >
-          {t('Columns')}
+          {t('Edit Table')}
         </Button>
       </SamplesTableHeader>
       {tab === Tab.SPAN && <SpansTable />}

diff --git a/static/app/views/explore/toolbar/index.spec.tsx b/static/app/views/explore/toolbar/index.spec.tsx
@@ -89,7 +89,7 @@ describe('ExploreToolbar', function () {
     await userEvent.click(within(groupBy).getByRole('button', {name: 'None'}));
     await userEvent.click(within(groupBy).getByRole('option', {name: 'release'}));
     expect(groupBys).toEqual(['release']);
-    await userEvent.click(within(groupBy).getByRole('button', {name: '+Add Group By'}));
+    await userEvent.click(within(groupBy).getByRole('button', {name: 'Add Group'}));
     expect(groupBys).toEqual(['release', '']);
 
     await userEvent.click(samples);
@@ -139,7 +139,7 @@ describe('ExploreToolbar', function () {
     ]);
 
     // try adding an overlay
-    await userEvent.click(within(section).getByRole('button', {name: '+Add Overlay'}));
+    await userEvent.click(within(section).getByRole('button', {name: 'Add Overlay'}));
     await userEvent.click(within(section).getByRole('button', {name: 'span.duration'}));
     await userEvent.click(within(section).getByRole('option', {name: 'span.self_time'}));
     expect(visualizes).toEqual([
@@ -150,7 +150,7 @@ describe('ExploreToolbar', function () {
     ]);
 
     // try adding a new chart
-    await userEvent.click(within(section).getByRole('button', {name: '+Add Chart'}));
+    await userEvent.click(within(section).getByRole('button', {name: 'Add Chart'}));
     expect(visualizes).toEqual([
       {
         yAxes: ['avg(span.self_time)', 'count(span.self_time)'],
@@ -160,20 +160,20 @@ describe('ExploreToolbar', function () {
     ]);
 
     // delete first overlay
-    await userEvent.click(within(section).getAllByLabelText('Remove')[0]);
+    await userEvent.click(within(section).getAllByLabelText('Remove Overlay')[0]);
     expect(visualizes).toEqual([
       {yAxes: ['count(span.self_time)'], chartType: ChartType.LINE},
       {yAxes: ['count(span.duration)'], chartType: ChartType.LINE},
     ]);
 
     // delete second chart
-    await userEvent.click(within(section).getAllByLabelText('Remove')[1]);
+    await userEvent.click(within(section).getAllByLabelText('Remove Overlay')[1]);
     expect(visualizes).toEqual([
       {yAxes: ['count(span.self_time)'], chartType: ChartType.LINE},
     ]);
 
     // only one left so cant be deleted
-    expect(within(section).getByLabelText('Remove')).toBeDisabled();
+    expect(within(section).getByLabelText('Remove Overlay')).toBeDisabled();
   });
 
   it('allows changing sort by', async function () {
@@ -261,7 +261,7 @@ describe('ExploreToolbar', function () {
     expect(within(section).getByRole('button', {name: 'span.op'})).toBeInTheDocument();
     expect(groupBys).toEqual(['span.op']);
 
-    await userEvent.click(within(section).getByRole('button', {name: '+Add Group By'}));
+    await userEvent.click(within(section).getByRole('button', {name: 'Add Group'}));
     expect(groupBys).toEqual(['span.op', '']);
 
     await userEvent.click(within(section).getByRole('button', {name: 'None'}));
@@ -276,16 +276,16 @@ describe('ExploreToolbar', function () {
     ).toBeInTheDocument();
     expect(groupBys).toEqual(['span.op', 'span.description']);
 
-    await userEvent.click(within(section).getAllByLabelText('Remove')[0]);
+    await userEvent.click(within(section).getAllByLabelText('Remove Group')[0]);
     expect(groupBys).toEqual(['span.description']);
 
     // only 1 left but it's not empty
-    expect(within(section).getByLabelText('Remove')).toBeEnabled();
+    expect(within(section).getByLabelText('Remove Group')).toBeEnabled();
 
-    await userEvent.click(within(section).getByLabelText('Remove'));
+    await userEvent.click(within(section).getByLabelText('Remove Group'));
     expect(groupBys).toEqual(['']);
 
     // last one and it's empty
-    expect(within(section).getByLabelText('Remove')).toBeDisabled();
+    expect(within(section).getByLabelText('Remove Group')).toBeDisabled();
   });
 });
diff --git a/static/app/views/explore/toolbar/styles.tsx b/static/app/views/explore/toolbar/styles.tsx
@@ -12,37 +12,32 @@ export const ToolbarHeader = styled('div')`
   flex-direction: row;
   justify-content: space-between;
   align-items: baseline;
+  margin-bottom: ${space(1)};
 `;
 
-export const ToolbarHeading = styled('h6')<{disabled?: boolean}>`
-  color: ${p => (p.disabled ? p.theme.gray300 : p.theme.purple300)};
+export const ToolbarLabel = styled('h6')<{disabled?: boolean}>`
+  color: ${p => (p.disabled ? p.theme.gray300 : p.theme.gray500)};
   height: ${p => p.theme.form.md.height};
   min-height: ${p => p.theme.form.md.minHeight};
   font-size: ${p => p.theme.form.md.fontSize};
-  line-height: ${p => p.theme.form.md.lineHeight};
   text-decoration: underline dotted
-    ${p => (p.disabled ? p.theme.gray300 : p.theme.purple300)};
-  margin: 0 0 ${space(1)} 0;
+    ${p => (p.disabled ? p.theme.gray300 : p.theme.gray300)};
+  margin: 0;
 `;
 
 export const ToolbarHeaderButton = styled(Button)<{disabled?: boolean}>`
-  color: ${p => (p.disabled ? p.theme.gray300 : p.theme.purple300)};
+  color: ${p => (p.disabled ? p.theme.gray300 : p.theme.gray500)};
 `;
 
-export const ToolbarFooterButton = styled(Button)<{disabled?: boolean}>`
-  color: ${p => p.theme.gray300};
-`;
+export const ToolbarFooterButton = styled(Button)<{disabled?: boolean}>``;
 
 export const ToolbarFooter = styled('div')<{disabled?: boolean}>`
-  margin-top: ${space(0.5)};
+  margin-top: ${space(1)};
 `;
 
 export const ToolbarRow = styled('div')`
   display: flex;
-  justify-content: space-between;
-  gap: ${space(0.5)};
-
-  :not(:first-child) {
-    padding-top: ${space(1)};
-  }
+  flex-direction: row;
+  gap: ${space(1)};
+  margin-bottom: ${space(1)};
 `;
diff --git a/static/app/views/explore/toolbar/toolbarDataset.tsx b/static/app/views/explore/toolbar/toolbarDataset.tsx
@@ -2,7 +2,7 @@ import {SegmentedControl} from 'sentry/components/segmentedControl';
 import {t} from 'sentry/locale';
 import {DiscoverDatasets} from 'sentry/utils/discover/types';
 
-import {ToolbarHeader, ToolbarHeading, ToolbarSection} from './styles';
+import {ToolbarHeader, ToolbarLabel, ToolbarSection} from './styles';
 
 interface ToolbarDatasetProps {
   dataset: DiscoverDatasets;
@@ -13,14 +13,9 @@ export function ToolbarDataset({dataset, setDataset}: ToolbarDatasetProps) {
   return (
     <ToolbarSection data-test-id="section-dataset">
       <ToolbarHeader>
-        <ToolbarHeading>{t('Dataset')}</ToolbarHeading>
+        <ToolbarLabel>{t('Dataset')}</ToolbarLabel>
       </ToolbarHeader>
-      <SegmentedControl
-        size="sm"
-        aria-label={t('Dataset')}
-        value={dataset}
-        onChange={setDataset}
-      >
+      <SegmentedControl aria-label={t('Dataset')} value={dataset} onChange={setDataset}>
         <SegmentedControl.Item key={DiscoverDatasets.SPANS_EAP}>
           {t('EAP Spans')}
         </SegmentedControl.Item>

diff --git a/static/app/views/explore/toolbar/toolbarGroupBy.tsx b/static/app/views/explore/toolbar/toolbarGroupBy.tsx
@@ -3,6 +3,7 @@ import {useCallback, useMemo} from 'react';
 import {Button} from 'sentry/components/button';
 import type {SelectOption} from 'sentry/components/compactSelect';
 import {CompactSelect} from 'sentry/components/compactSelect';
+import {IconAdd} from 'sentry/icons/iconAdd';
 import {IconDelete} from 'sentry/icons/iconDelete';
 import {t} from 'sentry/locale';
 import {useGroupBys} from 'sentry/views/explore/hooks/useGroupBys';
@@ -13,7 +14,7 @@ import {useSpanTags} from '../contexts/spanTagsContext';
 import {
   ToolbarHeader,
   ToolbarHeaderButton,
-  ToolbarHeading,
+  ToolbarLabel,
   ToolbarRow,
   ToolbarSection,
 } from './styles';
@@ -64,23 +65,22 @@ export function ToolbarGroupBy({disabled}: ToolbarGroupByProps) {
   return (
     <ToolbarSection data-test-id="section-group-by">
       <ToolbarHeader>
-        <ToolbarHeading disabled={disabled}>{t('Group By')}</ToolbarHeading>
+        <ToolbarLabel disabled={disabled}>{t('Group By')}</ToolbarLabel>
         <ToolbarHeaderButton
           disabled={disabled}
-          size="xs"
+          size="zero"
           onClick={addGroupBy}
           borderless
-        >
-          {t('+Add Group By')}
-        </ToolbarHeaderButton>
+          aria-label={t('Add Group')}
+          icon={<IconAdd />}
+        />
       </ToolbarHeader>
       <div>
         {groupBys.map((groupBy, index) => (
           <ToolbarRow key={index}>
             <CompactSelect
               searchable
               disabled={disabled}
-              size="sm"
               options={options}
               value={groupBy}
               onChange={newGroupBy => setGroupBy(index, newGroupBy)}
@@ -91,7 +91,7 @@ export function ToolbarGroupBy({disabled}: ToolbarGroupByProps) {
               size="zero"
               disabled={disabled || (groupBys.length <= 1 && groupBy === '')}
               onClick={() => deleteGroupBy(index)}
-              aria-label={t('Remove')}
+              aria-label={t('Remove Group')}
             />
           </ToolbarRow>
         ))}

diff --git a/static/app/views/explore/toolbar/toolbarResults.tsx b/static/app/views/explore/toolbar/toolbarResults.tsx
@@ -2,7 +2,7 @@ import {SegmentedControl} from 'sentry/components/segmentedControl';
 import {t} from 'sentry/locale';
 import type {ResultMode} from 'sentry/views/explore/hooks/useResultsMode';
 
-import {ToolbarHeader, ToolbarHeading, ToolbarSection} from './styles';
+import {ToolbarHeader, ToolbarLabel, ToolbarSection} from './styles';
 
 interface ToolbarResultsProps {
   resultMode: ResultMode;
@@ -13,10 +13,9 @@ export function ToolbarResults({resultMode, setResultMode}: ToolbarResultsProps)
   return (
     <ToolbarSection data-test-id="section-result-mode">
       <ToolbarHeader>
-        <ToolbarHeading>{t('Results')}</ToolbarHeading>
+        <ToolbarLabel>{t('Results')}</ToolbarLabel>
       </ToolbarHeader>
       <SegmentedControl
-        size="sm"
         aria-label={t('Result Mode')}
         value={resultMode}
         onChange={setResultMode}

diff --git a/static/app/views/explore/toolbar/toolbarSortBy.tsx b/static/app/views/explore/toolbar/toolbarSortBy.tsx
@@ -6,7 +6,7 @@ import {t} from 'sentry/locale';
 import type {Sort} from 'sentry/utils/discover/fields';
 import type {Field} from 'sentry/views/explore/hooks/useSampleFields';
 
-import {ToolbarHeader, ToolbarHeading, ToolbarRow, ToolbarSection} from './styles';
+import {ToolbarHeader, ToolbarLabel, ToolbarRow, ToolbarSection} from './styles';
 
 interface ToolbarSortByProps {
   fields: Field[];
@@ -68,18 +68,16 @@ export function ToolbarSortBy({fields, setSorts, sorts}: ToolbarSortByProps) {
   return (
     <ToolbarSection data-test-id="section-sort-by">
       <ToolbarHeader>
-        <ToolbarHeading>{t('Sort By')}</ToolbarHeading>
+        <ToolbarLabel>{t('Sort By')}</ToolbarLabel>
       </ToolbarHeader>
       <div>
         <ToolbarRow>
           <CompactSelect
-            size="sm"
             options={fieldOptions}
             value={sorts[0]?.field}
             onChange={newSortField => setSortField(0, newSortField)}
           />
           <CompactSelect
-            size="sm"
             options={kindOptions}
             value={sorts[0]?.kind}
             onChange={newSortKind => setSortKind(0, newSortKind)}

diff --git a/static/app/views/explore/toolbar/toolbarVisualize.tsx b/static/app/views/explore/toolbar/toolbarVisualize.tsx
@@ -2,6 +2,7 @@ import {Fragment, useCallback, useMemo} from 'react';
 
 import {Button} from 'sentry/components/button';
 import {CompactSelect, type SelectOption} from 'sentry/components/compactSelect';
+import {IconAdd} from 'sentry/icons';
 import {IconDelete} from 'sentry/icons/iconDelete';
 import {t} from 'sentry/locale';
 import {defined} from 'sentry/utils';
@@ -24,7 +25,7 @@ import {
   ToolbarFooterButton,
   ToolbarHeader,
   ToolbarHeaderButton,
-  ToolbarHeading,
+  ToolbarLabel,
   ToolbarRow,
   ToolbarSection,
 } from './styles';
@@ -119,10 +120,14 @@ export function ToolbarVisualize({}: ToolbarVisualizeProps) {
   return (
     <ToolbarSection data-test-id="section-visualizes">
       <ToolbarHeader>
-        <ToolbarHeading>{t('Visualize')}</ToolbarHeading>
-        <ToolbarHeaderButton size="xs" onClick={addChart} borderless>
-          {t('+Add Chart')}
-        </ToolbarHeaderButton>
+        <ToolbarLabel>{t('Visualize')}</ToolbarLabel>
+        <ToolbarHeaderButton
+          size="zero"
+          icon={<IconAdd />}
+          onClick={addChart}
+          aria-label={t('Add Chart')}
+          borderless
+        />
       </ToolbarHeader>
       <div>
         {parsedVisualizeGroups.map((parsedVisualizeGroup, group) => {
@@ -131,13 +136,11 @@ export function ToolbarVisualize({}: ToolbarVisualizeProps) {
               {parsedVisualizeGroup.map((parsedVisualize, index) => (
                 <ToolbarRow key={index}>
                   <CompactSelect
-                    size="sm"
                     options={fieldOptions}
                     value={parsedVisualize.arguments[0]}
                     onChange={newField => setChartField(group, index, newField)}
                   />
                   <CompactSelect
-                    size="sm"
                     options={aggregateOptions}
                     value={parsedVisualize?.name}
                     onChange={newAggregate =>
@@ -150,17 +153,20 @@ export function ToolbarVisualize({}: ToolbarVisualizeProps) {
                     size="zero"
                     disabled={lastVisualization}
                     onClick={() => deleteOverlay(group, index)}
-                    aria-label={t('Remove')}
+                    aria-label={t('Remove Overlay')}
                   />
                 </ToolbarRow>
               ))}
               <ToolbarFooter>
                 <ToolbarFooterButton
-                  size="xs"
-                  onClick={() => addOverlay(group)}
                   borderless
+                  size="zero"
+                  icon={<IconAdd />}
+                  onClick={() => addOverlay(group)}
+                  priority="link"
+                  aria-label={t('Add Overlay')}
                 >
-                  {t('+Add Overlay')}
+                  {t('Add Overlay')}
                 </ToolbarFooterButton>
               </ToolbarFooter>
             </Fragment>