ref(theme): Decrease input & button heights (#40144)

Decrease the height of form inputs and buttons by 2 pixels (for all
sizes). This is warranted as we recently changed the default font size
from `16px` down to `14px`.

A number of styled input/button components have hard-coded heights
(`40px`/`41px`). They've been updated with the standardized height
values from `theme` (see screenshots in the comments).

**Before:**

![image](https://user-images.githubusercontent.com/44172267/196277752-5239969f-3270-421f-9398-402bb6d352e4.png)

**After:**

![image](https://user-images.githubusercontent.com/44172267/196277783-e0ff7f3f-d09f-4c01-85d4-990a6c08759f.png)

static/app/components/pageTimeRangeSelector.tsx

@@ -27,7 +27,7 @@ const DropdownDate = styled(Panel)`
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 42px;
+  height: ${p => p.theme.form.md.height}px;
   background: ${p => p.theme.background};
   border: 1px solid ${p => p.theme.border};
   border-radius: ${p => p.theme.borderRadius};

static/app/components/smartSearchBar/index.tsx

@@ -1899,10 +1899,11 @@ export default withApi(withRouter(withOrganization(SmartSearchBarContainer)));
 export {SmartSearchBar, Props as SmartSearchBarProps};
 
 const Container = styled('div')<{inputHasFocus: boolean}>`
+  height: ${p => p.theme.form.md.height}px;
   border: 1px solid ${p => p.theme.border};
   box-shadow: inset ${p => p.theme.dropShadowLight};
   background: ${p => p.theme.background};
-  padding: 7px ${space(1)};
+  padding: 6px ${space(1)};
   position: relative;
   display: grid;
   grid-template-columns: max-content 1fr max-content;

static/app/utils/theme.tsx

@@ -736,20 +736,20 @@ const commonTheme = {
    */
   form: {
     md: {
-      height: 40,
-      minHeight: 40,
+      height: 38,
+      minHeight: 38,
       fontSize: '0.875rem',
       lineHeight: '1rem',
     },
     sm: {
-      height: 34,
-      minHeight: 34,
+      height: 32,
+      minHeight: 32,
       fontSize: '0.875rem',
       lineHeight: '1rem',
     },
     xs: {
-      height: 28,
-      minHeight: 28,
+      height: 26,
+      minHeight: 26,
       fontSize: '0.75rem',
       lineHeight: '0.875rem',
     },

static/app/views/alerts/rules/metric/triggers/thresholdControl.tsx

@@ -160,7 +160,8 @@ class ThresholdControl extends Component<Props, State> {
           {!hideControl && (
             <ThresholdContainer comparisonType={comparisonType}>
               <ThresholdInput>
-                <StyledInput
+                <Input
+                  size="md"
                   disabled={disabled}
                   name={`${type}Threshold`}
                   data-test-id={`${type}-threshold`}
@@ -241,11 +242,6 @@ const ThresholdContainer = styled('div')<{comparisonType: AlertRuleComparisonTyp
   align-items: center;
 `;
 
-const StyledInput = styled(Input)`
-  /* Match the height of the select controls */
-  height: 40px;
-`;
-
 const ThresholdInput = styled('div')`
   position: relative;
   display: flex;

static/app/views/dashboardsV2/widgetBuilder/buildSteps/groupByStep/queryField.tsx

@@ -75,7 +75,7 @@ export function QueryField({
 }
 
 const DragAndReorderButton = styled(Button)`
-  height: 40px;
+  height: ${p => p.theme.form.md.height}px;
 `;
 
 const QueryFieldWrapper = styled('div')`

static/app/views/dashboardsV2/widgetBuilder/buildSteps/groupByStep/sortableQueryField.tsx

@@ -26,7 +26,7 @@ export function SortableQueryField({dragId, ...props}: SortableItemProps) {
     style = {
       ...style,
       zIndex: 100,
-      height: '40px',
+      height: theme.form.md.height,
       border: `2px dashed ${theme.border}`,
       borderRadius: theme.borderRadius,
     };

static/app/views/eventsV2/savedQuery/index.tsx

@@ -530,7 +530,6 @@ const SaveAsButton = styled(Button)`
 `;
 
 const SaveAsInput = styled(InputControl)`
-  height: 40px;
   margin-bottom: ${space(1)};
 `;
 

static/app/views/eventsV2/table/arithmeticInput.tsx

@@ -261,7 +261,7 @@ export default class ArithmeticInput extends PureComponent<Props, State> {
     const {dropdownVisible, dropdownOptionGroups} = this.state;
     return (
       <Container isOpen={dropdownVisible}>
-        <StyledInput
+        <Input
           {...props}
           ref={this.input}
           autoComplete="off"
@@ -285,8 +285,6 @@ export default class ArithmeticInput extends PureComponent<Props, State> {
 }
 
 const Container = styled('div')<{isOpen: boolean}>`
-  border: 1px solid ${p => p.theme.border};
-  box-shadow: inset ${p => p.theme.dropShadowLight};
   background: ${p => p.theme.background};
   position: relative;
 
@@ -300,19 +298,6 @@ const Container = styled('div')<{isOpen: boolean}>`
   }
 `;
 
-const StyledInput = styled(Input)`
-  height: 40px;
-  padding: 7px 10px;
-  border: 0;
-  box-shadow: none;
-
-  &:hover,
-  &:focus {
-    border: 0;
-    box-shadow: none;
-  }
-`;
-
 type TermDropdownProps = {
   handleSelect: (option: DropdownOption) => void;
   isOpen: boolean;
@@ -419,10 +404,11 @@ const DropdownContainer = styled('div')<{isOpen: boolean}>`
   left: -1px;
   right: -1px;
   z-index: ${p => p.theme.zIndex.dropdown};
-  background: ${p => p.theme.background};
-  box-shadow: ${p => p.theme.dropShadowLight};
+  background: ${p => p.theme.backgroundElevated};
+  box-shadow: ${p => p.theme.dropShadowHeavy};
   border: 1px solid ${p => p.theme.border};
-  border-radius: ${p => p.theme.borderRadiusBottom};
+  border-radius: ${p => p.theme.borderRadius};
+  margin-top: ${space(1)};
   max-height: 300px;
   overflow-y: auto;
 `;

static/app/views/eventsV2/table/columnEditCollection.tsx

@@ -691,7 +691,7 @@ const DragPlaceholder = styled('div')`
   margin: 0 ${space(3)} ${space(1)} ${space(3)};
   border: 2px dashed ${p => p.theme.border};
   border-radius: ${p => p.theme.borderRadius};
-  height: 41px;
+  height: ${p => p.theme.form.md.height}px;
 `;
 
 const Heading = styled('div')<{gridColumns: number}>`
@@ -708,8 +708,6 @@ const StyledSectionHeading = styled(SectionHeading)`
 `;
 
 const AliasInput = styled(Input)`
-  /* Match the height of the select boxes */
-  height: 40px;
   min-width: 50px;
 `;
 
@@ -728,11 +726,11 @@ const AliasField = styled('div')<{singleColumn: boolean}>`
 
 const RemoveButton = styled(Button)`
   margin-left: ${space(1)};
-  height: 40px;
+  height: ${p => p.theme.form.md.height}px;
 `;
 
 const DragAndReorderButton = styled(Button)`
-  height: 40px;
+  height: ${p => p.theme.form.md.height}px;
 `;
 
 export default ColumnEditCollection;

static/app/views/eventsV2/table/queryField.tsx

@@ -814,14 +814,12 @@ class BufferedInput extends Component<BufferedInputProps, InputState> {
 
 // Set a min-width to allow shrinkage in grid.
 const StyledInput = styled(Input)`
-  /* Match the height of the select boxes */
-  height: 41px;
   min-width: 50px;
 `;
 
 const BlankSpace = styled('div')`
   /* Match the height of the select boxes */
-  height: 41px;
+  height: ${p => p.theme.form.md.height}px;
   min-width: 50px;
   background: ${p => p.theme.backgroundSecondary};
   border-radius: ${p => p.theme.borderRadius};