chore: Enable HMR for frontend code (#2024)

* chore: Enable HMR for frontend code
closes #2021

* revert

app/components/Button.js

@@ -134,30 +134,32 @@ export type Props = {|
   "data-event-action"?: string,
 |};
 
-function Button({
-  type = "text",
-  icon,
-  children,
-  value,
-  disclosure,
-  innerRef,
-  neutral,
-  ...rest
-}: Props) {
-  const hasText = children !== undefined || value !== undefined;
-  const hasIcon = icon !== undefined;
+const Button = React.forwardRef<Props>(
+  (
+    {
+      type = "text",
+      icon,
+      children,
+      value,
+      disclosure,
+      neutral,
+      ...rest
+    }: Props,
+    innerRef
+  ) => {
+    const hasText = children !== undefined || value !== undefined;
+    const hasIcon = icon !== undefined;
 
-  return (
-    <RealButton type={type} ref={innerRef} $neutral={neutral} {...rest}>
-      <Inner hasIcon={hasIcon} hasText={hasText} disclosure={disclosure}>
-        {hasIcon && icon}
-        {hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}
-        {disclosure && <ExpandedIcon />}
-      </Inner>
-    </RealButton>
-  );
-}
+    return (
+      <RealButton type={type} ref={innerRef} $neutral={neutral} {...rest}>
+        <Inner hasIcon={hasIcon} hasText={hasText} disclosure={disclosure}>
+          {hasIcon && icon}
+          {hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}
+          {disclosure && <ExpandedIcon />}
+        </Inner>
+      </RealButton>
+    );
+  }
+);
 
-export default React.forwardRef<Props, typeof Button>((props, ref) => (
-  <Button {...props} innerRef={ref} />
-));
+export default Button;

app/components/Theme.js

@@ -1,17 +1,18 @@
 // @flow
-import { inject, observer } from "mobx-react";
+import { observer } from "mobx-react";
 import * as React from "react";
 import { ThemeProvider } from "styled-components";
 import GlobalStyles from "shared/styles/globals";
 import { dark, light } from "shared/styles/theme";
-import UiStore from "stores/UiStore";
+import useStores from "hooks/useStores";
 
-type Props = {
-  ui: UiStore,
+type Props = {|
   children: React.Node,
-};
+|};
+
+function Theme({ children }: Props) {
+  const { ui } = useStores();
 
-function Theme({ children, ui }: Props) {
   return (
     <ThemeProvider theme={ui.resolvedTheme === "dark" ? dark : light}>
       <>
@@ -22,4 +23,4 @@ function Theme({ children, ui }: Props) {
   );
 }
 
-export default inject("ui")(observer(Theme));
+export default observer(Theme);