Backport changes from mui/material-ui#22295.

Author: rothbart

src/onepirate/Privacy.tsx

@@ -19,6 +19,10 @@ function Privacy() {
       .then((responseText) => setMarkdown(responseText));
   });
 
+  if (!markdown) {
+    return <div />;
+  }
+
   return (
     <React.Fragment>
       <AppAppBar />

src/onepirate/Terms.tsx

@@ -19,6 +19,10 @@ function Terms() {
       .then((responseText) => setMarkdown(responseText));
   });
 
+  if (!markdown) {
+    return <div />;
+  }
+
   return (
     <React.Fragment>
       <AppAppBar />

src/onepirate/modules/components/Paper.tsx

@@ -3,6 +3,12 @@ import clsx from "clsx";
 import MuiPaper, { PaperProps } from "@material-ui/core/Paper";
 import { withStyles, Theme, WithStyles } from "@material-ui/core/styles";
 
+const backgroundStyleMapping = {
+  light: "backgroundLight",
+  main: "backgroundMain",
+  dark: "backgroundDark",
+};
+
 const styles = (theme: Theme) => ({
   [backgroundStyleMapping["light"]]: {
     backgroundColor: theme.palette.secondary.light,
@@ -23,16 +29,10 @@ interface ExtraPaperProps {
   padding?: boolean;
 }
 
-const backgroundStyleMapping = {
-  light: "backgroundLight",
-  main: "backgroundMain",
-  dark: "backgroundDark",
-};
-
 function Paper(
   props: PaperProps & ExtraPaperProps & WithStyles<typeof styles>
 ) {
-  const { background, classes, className, padding = false, ...other } = props;
+  const { background, classes, className, padding, ...other } = props;
 
   return (
     <MuiPaper
@@ -41,7 +41,7 @@ function Paper(
       className={clsx(
         classes[backgroundStyleMapping[background]],
         {
-          [classes.padding]: padding,
+          [classes.padding]: !!padding,
         },
         className
       )}
@@ -50,8 +50,4 @@ function Paper(
   );
 }
 
-Paper.defaultProps = {
-  padding: false,
-};
-
 export default withStyles(styles)(Paper);

src/onepirate/modules/components/Snackbar.tsx

@@ -79,9 +79,7 @@ function Snackbar(
           aria-label="close"
           color="inherit"
           className={classes.close}
-          onClick={() => {
-            closeFunc && closeFunc();
-          }}
+          onClick={() => closeFunc && closeFunc()}
         >
           <CloseIcon />
         </IconButton>,

src/onepirate/modules/components/TextField.tsx

@@ -3,6 +3,13 @@ import clsx from "clsx";
 import { withStyles, WithStyles, createStyles } from "@material-ui/core/styles";
 import MuiTextField, { TextFieldProps } from "@material-ui/core/TextField";
 
+const inputSyleMapping = {
+  small: "inputSizeSmall",
+  medium: "inputSizeMedium",
+  large: "inputSizeLarge",
+  xlarge: "inputSizeXlarge",
+};
+
 const styles = (theme: any) =>
   createStyles({
     root: {
@@ -37,8 +44,8 @@ const styles = (theme: any) =>
     },
     [inputSyleMapping["large"]]: {
       fontSize: 18,
-      padding: 22,
-      width: `calc(100% - ${22 * 2}px)`,
+      padding: 20,
+      width: `calc(100% - ${20 * 2}px)`,
     },
     [inputSyleMapping["xlarge"]]: {
       fontSize: 20,
@@ -63,20 +70,13 @@ export interface OnePirateTextFieldProps extends Omit<TextFieldProps, "size"> {
   size?: "small" | "medium" | "large" | "xlarge";
 }
 
-const inputSyleMapping = {
-  small: "inputSizeSmall",
-  medium: "inputSizeMedium",
-  large: "inputSizeLarge",
-  xlarge: "inputSizeXlarge",
-};
-
 function TextField(props: OnePirateTextFieldProps & WithStyles<typeof styles>) {
   const {
     classes,
     InputProps = {},
     InputLabelProps,
-    noBorder = false,
-    size,
+    noBorder,
+    size = "medium",
     SelectProps,
     ...other
   } = props;
@@ -98,7 +98,7 @@ function TextField(props: OnePirateTextFieldProps & WithStyles<typeof styles>) {
           root: classes.root,
           input: clsx(
             classes.input,
-            classes[inputSyleMapping[size!]],
+            classes[inputSyleMapping[size]],
             {
               [classes.inputBorder]: !noBorder,
             },
@@ -126,9 +126,4 @@ function TextField(props: OnePirateTextFieldProps & WithStyles<typeof styles>) {
   );
 }
 
-TextField.defaultProps = {
-  size: "medium" as const,
-  noBorder: false,
-};
-
 export default withStyles(styles)(TextField);

src/onepirate/modules/components/Typography.tsx

@@ -7,36 +7,59 @@ import {
 } from "@material-ui/core/styles";
 import MuiTypography, { TypographyProps } from "@material-ui/core/Typography";
 
-export enum TypographyMarkType {
-  Center = "center",
-  Left = "left",
-  None = "none",
-}
+const markSyleMapping: {
+  [index: string]: { [subindex: string]: string };
+} = {
+  center: {
+    h1: "",
+    h2: "markedH2Center",
+    h3: "markedH3Center",
+    h4: "markedH4Center",
+    h5: "",
+    h6: "",
+  },
+  left: {
+    h1: "",
+    h2: "",
+    h3: "",
+    h4: "",
+    h5: "",
+    h6: "markedH6Left",
+  },
+  none: {
+    h1: "",
+    h2: "",
+    h3: "",
+    h4: "",
+    h5: "",
+    h6: "",
+  },
+};
 
 const styles = (theme: Theme) =>
   createStyles({
-    [markSyleMapping[TypographyMarkType.Center]["h2"]]: {
+    [markSyleMapping["center"]["h2"]]: {
       height: 4,
       width: 73,
       display: "block",
       margin: `${theme.spacing(1)}px auto 0`,
       backgroundColor: theme.palette.secondary.main,
     },
-    [markSyleMapping[TypographyMarkType.Center]["h3"]]: {
+    [markSyleMapping["center"]["h3"]]: {
       height: 4,
       width: 55,
       display: "block",
       margin: `${theme.spacing(1)}px auto 0`,
       backgroundColor: theme.palette.secondary.main,
     },
-    [markSyleMapping[TypographyMarkType.Center]["h4"]]: {
+    [markSyleMapping["center"]["h4"]]: {
       height: 4,
       width: 55,
       display: "block",
       margin: `${theme.spacing(1)}px auto 0`,
       backgroundColor: theme.palette.secondary.main,
     },
-    [markSyleMapping[TypographyMarkType.Left]["h6"]]: {
+    [markSyleMapping["left"]["h6"]]: {
       height: 2,
       width: 28,
       display: "block",
@@ -46,7 +69,7 @@ const styles = (theme: Theme) =>
   });
 
 interface ExtraTypographyProps {
-  marked?: TypographyMarkType;
+  marked?: "center" | "left" | "none";
 }
 
 const variantMapping = {
@@ -59,57 +82,24 @@ const variantMapping = {
   subtitle1: "h3",
 };
 
-const markSyleMapping: {
-  [index: string]: { [subindex: string]: string };
-} = {
-  [TypographyMarkType.Center]: {
-    h1: "",
-    h2: "markedH2Center",
-    h3: "markedH3Center",
-    h4: "markedH4Center",
-    h5: "",
-    h6: "",
-  },
-  [TypographyMarkType.Left]: {
-    h1: "",
-    h2: "",
-    h3: "",
-    h4: "",
-    h5: "",
-    h6: "markedH6Left",
-  },
-  [TypographyMarkType.None]: {
-    h1: "",
-    h2: "",
-    h3: "",
-    h4: "",
-    h5: "",
-    h6: "",
-  },
-};
-
 function Typography<C extends React.ElementType>(
   props: TypographyProps<C, { component?: C }> &
     WithStyles<typeof styles> &
     ExtraTypographyProps
 ) {
-  const { children, variant, classes, marked, ...other } = props;
+  const { children, variant, classes, marked = "none", ...other } = props;
 
-  let className = "";
-  if (marked && variant && variant in markSyleMapping[marked]) {
-    className = classes[markSyleMapping[marked][variant]];
+  let markedClassName = "";
+  if (variant && variant in markSyleMapping[marked]) {
+    markedClassName = classes[markSyleMapping[marked][variant]];
   }
 
   return (
     <MuiTypography variantMapping={variantMapping} variant={variant} {...other}>
       {children}
-      {marked ? <span className={className} /> : null}
+      {markedClassName ? <span className={markedClassName} /> : null}
     </MuiTypography>
   );
 }
 
-Typography.defaultProps = {
-  marked: TypographyMarkType.None,
-};
-
 export default withStyles(styles)(Typography);