web: have InstrumentedButton use MUI Button instead of a plain ol' bu…

…tton (#4874)

web/src/OverviewButton.tsx

@@ -1,8 +1,14 @@
 import styled from "styled-components"
 import { ApiButton } from "./ApiButton"
-import { AnimDuration, Color, Font } from "./style-helpers"
+import {
+  AnimDuration,
+  Color,
+  Font,
+  mixinResetButtonStyle,
+} from "./style-helpers"
 
 export const OverviewButtonMixin = `
+  ${mixinResetButtonStyle};
   font-family: ${Font.sansSerif};
   display: flex;
   align-items: center;

web/src/instrumentedComponents.tsx

@@ -1,10 +1,10 @@
-import React, { LegacyRef } from "react"
+import { Button, ButtonProps } from "@material-ui/core"
+import React from "react"
 import { AnalyticsAction, incr, Tags } from "./analytics"
 
-export type InstrumentedButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+export type InstrumentedButtonProps = ButtonProps & {
   analyticsName: string
   analyticsTags?: Tags
-  ref?: LegacyRef<HTMLButtonElement>
 }
 
 export function InstrumentedButton(props: InstrumentedButtonProps) {
@@ -18,5 +18,12 @@ export function InstrumentedButton(props: InstrumentedButtonProps) {
       onClick(e)
     }
   }
-  return <button onClick={instrumentedOnClick} {...buttonProps} />
+  return (
+    <Button
+      variant="outlined"
+      disableRipple={true}
+      onClick={instrumentedOnClick}
+      {...buttonProps}
+    />
+  )
 }

web/src/style-helpers.ts

@@ -102,6 +102,17 @@ export const mixinResetButtonStyle = `
   margin: 0;
   font-family: inherit;
   cursor: pointer;
+
+  // undo Material UI's Button styling
+  // TODO - maybe we should be doing it like this? https://material-ui.com/customization/globals/#css
+  letter-spacing: normal;
+  min-width: 0px;
+  text-transform: none;
+  line-height: normal;
+  font-size: ${FontSize.smallest};
+  &:hover {
+    background-color: transparent;
+  }
 `
 
 export const mixinTruncateText = `