From 8b4d9bfba749ab060e2f5bd6f9bf13835fa5f675 Mon Sep 17 00:00:00 2001 From: MCarreiro Date: Thu, 25 Jun 2020 18:00:33 -0700 Subject: [PATCH] Set up Material UI Theme in accordance with Style Guide #517 --- client/src/theme/colors.js | 21 ++++++ client/src/theme/newTheme.js | 126 +++++++++++++++++++++++++++++++++ client/src/ui/PrimaryButton.js | 109 ++++++++++++++++++++++++++++ client/src/ui/index.js | 5 ++ 4 files changed, 261 insertions(+) create mode 100644 client/src/theme/colors.js create mode 100644 client/src/theme/newTheme.js create mode 100644 client/src/ui/PrimaryButton.js create mode 100644 client/src/ui/index.js diff --git a/client/src/theme/colors.js b/client/src/theme/colors.js new file mode 100644 index 000000000..b4d8b82d1 --- /dev/null +++ b/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, +}; diff --git a/client/src/theme/newTheme.js b/client/src/theme/newTheme.js new file mode 100644 index 000000000..f31abab98 --- /dev/null +++ b/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; diff --git a/client/src/ui/PrimaryButton.js b/client/src/ui/PrimaryButton.js new file mode 100644 index 000000000..4007091dc --- /dev/null +++ b/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 ( + + ); +}; + +CustomButton.propTypes = { + children: PropTypes.node, + variant: PropTypes.string, + color: PropTypes.string, + size: PropTypes.string, + disabled: PropTypes.bool, +}; + +export default CustomButton; diff --git a/client/src/ui/index.js b/client/src/ui/index.js new file mode 100644 index 000000000..09d270534 --- /dev/null +++ b/client/src/ui/index.js @@ -0,0 +1,5 @@ +import { PrimaryButton } from "./PrimaryButton"; + +export default { + PrimaryButton, +};