Set up Material UI Theme in accordance with Style Guide

client/src/theme/colors.js

@@ -0,0 +1,21 @@
+const white = "#FFFFFF";
+const primaryColor = "#19334D";
+const secondaryColor = "#E57109";
+const hoverColor = "#4C99E5";
+const successColor = "#219653";
+const errorColor = "#CC3333";
+const bodyTextColor = "#1B1B1B";
+const inactiveButtonColor = "#F0F0F0";
+const inactiveButtonTextColor = "#4D4D4D";
+
+export {
+  white,
+  primaryColor,
+  secondaryColor,
+  hoverColor,
+  successColor,
+  errorColor,
+  bodyTextColor,
+  inactiveButtonColor,
+  inactiveButtonTextColor,
+};

client/src/theme/newTheme.js

@@ -0,0 +1,126 @@
+import { createMuiTheme } from "@material-ui/core/styles";
+import {
+  white,
+  primaryColor,
+  secondaryColor,
+  successColor,
+  errorColor,
+  bodyTextColor,
+} from "./colors";
+
+const customTheme = createMuiTheme({
+  palette: {
+    common: {
+      black: bodyTextColor,
+      white: white,
+    },
+    primary: {
+      main: primaryColor,
+    },
+    secondary: {
+      main: secondaryColor,
+    },
+    success: {
+      main: successColor,
+    },
+    error: {
+      main: errorColor,
+    },
+  },
+  typography: {
+    fontFamily: ["Helvetica Neue", "Arial", "sans-serif"].join(","),
+    // Heading 1
+    h1: {
+      fontSize: 40,
+      fontWeight: "500",
+      lineHeight: "49px",
+    },
+    // Heading 2
+    h2: {
+      fontSize: 32,
+      fontWeight: "500",
+      lineHeight: "39px",
+    },
+    // Heading 3
+    h3: {
+      fontSize: 20,
+      fontWeight: "500",
+      lineHeight: "24px",
+    },
+    // Body Big 1
+    h4: {
+      fontSize: 18,
+      fontWeight: "500",
+      lineHeight: "27px",
+    },
+    // Body Big 2
+    h5: {
+      fontSize: 18,
+      lineHeight: "27px",
+    },
+    // Body Small 1
+    h6: {
+      fontSize: 16,
+      fontWeight: "500",
+      lineHeight: "24px",
+    },
+    // Body Small 2
+    body1: {
+      fontSize: 16,
+      lineHeight: "24px",
+    },
+    // Body Small Italic
+    body2: {
+      fontSize: 16,
+      fontStyle: "italic",
+      lineHeight: "24px",
+    },
+    // Button Small
+    button: {
+      fontSize: 14,
+      fontWeight: "500",
+      letterSpacing: "0.04em",
+      textTransform: "uppercase",
+      lineHeight: "18px",
+    },
+    // Button Big
+    overline: {
+      fontSize: 18,
+      fontWeight: "500",
+      letterSpacing: "0.04em",
+      textTransform: "uppercase",
+      lineHeight: "18px",
+    },
+    // Small Text
+    caption: {
+      fontSize: 12,
+      lineHeight: "18px",
+    },
+  },
+  overrides: {
+    MuiButtonBase: {
+      root: {
+        "&:disabled": {
+          cursor: "not-allowed",
+          pointerEvents: "auto",
+        },
+      },
+    },
+    MuiTypography: {
+      root: {
+        color: bodyTextColor,
+      },
+    },
+  },
+  props: {
+    MuiButton: {
+      variant: "contained",
+    },
+    MuiButtonBase: {
+      disableRipple: true,
+      disableTouchRipple: true,
+    },
+  },
+});
+
+export default customTheme;

client/src/ui/PrimaryButton.js

@@ -0,0 +1,109 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import { Button } from "@material-ui/core";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+import {
+  white,
+  primaryColor,
+  hoverColor,
+  bodyTextColor,
+  inactiveButtonColor,
+  inactiveButtonTextColor,
+} from "../theme/colors";
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    color: white,
+  },
+  text: {
+    color: bodyTextColor,
+    borderRadius: 0,
+    "&:hover": {
+      backgroundColor: "transparent",
+      borderBottom: `3px solid ${hoverColor}`,
+      transition: "none",
+      margin: "-3px 0 -6px",
+    },
+    margin: "3px 0",
+  },
+  contained: {
+    backgroundColor: primaryColor,
+    "&:hover": {
+      backgroundColor: hoverColor,
+      "&:disabled": {
+        backgroundColor: inactiveButtonColor,
+      },
+    },
+    "&:disabled": {
+      backgroundColor: inactiveButtonColor,
+      color: inactiveButtonTextColor,
+    },
+    lineHeight: "17px",
+  },
+  outlined: {
+    backgroundColor: "transparent",
+    border: `1px solid ${primaryColor}`,
+    color: primaryColor,
+    "&:hover": {
+      backgroundColor: "transparent",
+      border: `1px solid ${hoverColor}`,
+      color: hoverColor,
+      "&:disabled": {
+        backgroundColor: "transparent",
+      },
+    },
+    "&:disabled": {
+      backgroundColor: "transparent",
+      border: `1px solid ${inactiveButtonTextColor}`,
+      color: inactiveButtonTextColor,
+    },
+  },
+  bigButtonStyles: theme.typography.overline,
+}));
+
+const CustomButton = (props) => {
+  let { children, color, variant, size, disabled } = props;
+  let showBigText = false;
+
+  const classes = useStyles();
+
+  // default size to medium
+  size = !size || typeof size === "undefined" ? "medium" : size;
+
+  // condition for when button text should be set to big
+  if ((size === "large" || size === "medium") && variant === "text") {
+    showBigText = true;
+  }
+
+  return (
+    <Button
+      variant={variant}
+      classes={{
+        root: showBigText
+          ? classNames(classes.root, classes.bigButtonStyles)
+          : classes.root,
+        label: classes.textLabel,
+        text: classes.text,
+        contained: classes.contained,
+        outlined: classes.outlined,
+        outlinedPrimary: classes.outlinedPrimaryStyles,
+      }}
+      color={color ? "default" : color}
+      size={size}
+      disabled={disabled}
+    >
+      {children}
+    </Button>
+  );
+};
+
+CustomButton.propTypes = {
+  children: PropTypes.node,
+  variant: PropTypes.string,
+  color: PropTypes.string,
+  size: PropTypes.string,
+  disabled: PropTypes.bool,
+};
+
+export default CustomButton;

client/src/ui/index.js

@@ -0,0 +1,5 @@
+import { PrimaryButton } from "./PrimaryButton";
+
+export default {
+  PrimaryButton,
+};