autodisol/components/styles.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.theme = exports.blueColor = exports.yellowColorLight = exports.yellowColor = exports.successColorLight = exports.successColor = exports.errorColorLight = exports.errorColor = exports.secondaryColorExtraLight = exports.secondaryColorLight = exports.secondaryColor = exports.secondaryColorDark = exports.primaryColor = void 0;

var _react = _interopRequireDefault(require("react"));

var _styles = require("@material-ui/core/styles");

var _ArrowDropDown = _interopRequireDefault(require("@material-ui/icons/ArrowDropDown"));

var _root;

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var primaryColor = '#ff6c3b';
exports.primaryColor = primaryColor;
var secondaryColorDark = '#414b56';
exports.secondaryColorDark = secondaryColorDark;
var secondaryColor = '#868F98';
exports.secondaryColor = secondaryColor;
var secondaryColorLight = '#D2D6D9';
exports.secondaryColorLight = secondaryColorLight;
var secondaryColorExtraLight = '#F5F5F5';
exports.secondaryColorExtraLight = secondaryColorExtraLight;
var errorColor = '#DC241F';
exports.errorColor = errorColor;
var errorColorLight = '#FC241F';
exports.errorColorLight = errorColorLight;
var successColor = '#068857';
exports.successColor = successColor;
var successColorLight = '#66CDAA';
exports.successColorLight = successColorLight;
var yellowColor = '#FFA500';
exports.yellowColor = yellowColor;
var yellowColorLight = '#FFB955';
exports.yellowColorLight = yellowColorLight;
var blueColor = '#6495ED';
exports.blueColor = blueColor;
var defaultTheme = (0, _styles.createMuiTheme)();
var theme = {
  palette: {
    text: {
      primary: secondaryColorDark,
      secondary: primaryColor
    },
    primary: {
      main: primaryColor,
      contrastText: '#FFFFFF'
    },
    secondary: {
      light: secondaryColorLight,
      main: secondaryColor,
      dark: secondaryColorDark,
      contrastText: secondaryColorDark
    },
    error: {
      main: errorColor,
      light: errorColorLight
    },
    success: {
      main: successColor,
      light: successColorLight
    },
    yellow: {
      main: yellowColor,
      light: yellowColorLight
    },
    blue: {
      main: blueColor
    }
  },
  typography: {
    fontFamily: 'Lato,Roboto,sans-serif',
    fontWeight: 700,
    fontSize: 16,
    useNextVariants: true,
    h1: {
      fontWeight: 900,
      fontSize: ' 0.875rem',
      textTransform: 'uppercase'
    },
    h2: {
      fontWeight: 700,
      fontSize: '1.125rem'
    },
    h3: {
      fontWeight: 700,
      fontSize: ' 0.875rem'
    },
    h4: {
      fontWeight: 900,
      fontSize: '1rem'
    },
    h5: {
      fontFamily: 'Poppins !important',
      fontWeight: '500',
      fontSize: '1rem',
      color: secondaryColorDark
    },
    subtitle1: {
      fontWeight: 900,
      fontSize: '0.875rem'
    },
    body1: {
      fontWeight: 700,
      fontSize: '1rem'
    },
    body2: {
      fontWeight: 400,
      fontSize: '1rem'
    },
    caption: {
      fontWeight: 700,
      fontSize: '0.75rem'
    },
    button: {
      textTransform: 'none',
      fontWeight: 700,
      fontSize: '1rem'
    }
  },
  overrides: {
    MuiBottomNavigation: {
      root: {
        borderTop: "1px solid ".concat(secondaryColorLight)
      }
    },
    MuiBottomNavigationAction: {
      root: {
        padding: '0.5rem 0',
        maxWidth: 'none',
        '&:not(:last-child)': {
          '& $wrapper': {
            borderRight: "1px solid ".concat(secondaryColorLight, " !important")
          }
        },
        '&$selected': {
          '&>$wrapper': {
            color: primaryColor
          }
        }
      },
      wrapper: {
        padding: '0 0.75rem',
        color: secondaryColorDark
      },
      label: {
        fontWeight: 900,
        fontSize: '0.625rem',
        textTransform: 'uppercase',
        color: secondaryColorDark,
        '&$selected': {
          fontSize: '0.625rem'
        }
      }
    },
    MuiButton: {
      root: {
        borderRadius: 8,
        boxShadow: 'none !important',
        lineHeight: 1.25
      },
      label: {
        fontWeight: '700',
        fontSize: '1rem'
      }
    },
    MuiDialogActions: {
      root: {
        alignSelf: 'center',
        margin: '20px 0'
      }
    },
    MuiDialogTitle: {
      root: {
        textTransform: 'uppercase',
        fontSize: '0.875rem',
        fontWeight: 900,
        color: secondaryColorDark,
        textAlign: 'center',
        marginBottom: 20
      }
    },
    MuiDrawer: {
      paper: {
        padding: '10px 20px 0 20px',
        width: '80%',
        maxWidth: 350
      }
    },
    MuiExpansionPanel: {
      root: {
        boxShadow: 'none',
        '&:before': {
          content: null
        },
        border: "1px solid ".concat(secondaryColorLight),
        borderRadius: 5,
        marginBottom: '1rem',
        '&:last-child': {
          marginBottom: 0
        }
      }
    },
    MuiExpansionPanelDetails: {
      root: {
        paddingLeft: '0.5rem',
        paddingRight: '0.5rem'
      }
    },
    MuiExpansionPanelSummary: {
      root: {
        fontWeight: 900,
        fontSize: '1rem',
        minHeight: null,
        paddingLeft: '0.5rem',
        '&$expanded': {
          minHeight: 0,
          borderBottom: 'none'
        }
      },
      content: {
        margin: '0.5rem 0',
        '&$expanded': {
          margin: '0.5rem 0'
        }
      }
    },
    MuiFormControlLabel: {
      label: {
        color: secondaryColorDark,
        fontSize: '0.875rem',
        fontWeight: 700
      }
    },
    MuiFormHelperText: {
      root: {
        fontSize: '0.75rem',
        fontWeight: 700,
        margin: '0.5rem 1.34rem 0'
      }
    },
    MuiFormLabel: {
      root: {
        color: secondaryColorDark,
        fontSize: '0.875rem',
        fontWeight: 700
      }
    },
    MuiInputAdornment: {
      positionStart: {
        marginLeft: 15
      }
    },
    MuiInputBase: {
      root: {
        transition: 'border-color 0.3s ease',
        margin: '0px !important',
        caretColor: primaryColor,
        borderRadius: 8,
        border: "2px solid ".concat(secondaryColorLight),
        '&$focused': {
          borderColor: secondaryColorDark
        },
        '&$disabled': {
          borderColor: 'transparent',
          // Prevents input from moving when removing border
          backgroundColor: secondaryColorExtraLight
        },
        '&$error': {
          borderColor: errorColor
        }
      },
      input: {
        padding: '1.33rem 1rem',
        fontSize: '0.875rem',
        lineHeight: '1.25',
        fontWeight: 700
      },
      inputType: {
        height: 'auto'
      }
    },
    MuiInputLabel: {
      shrink: {
        fontWeight: 700,
        fontSize: '0.875rem',
        padding: '0 0.25rem',
        backgroundColor: '#FFFFFF',
        transform: 'translate(0.8rem, -0.5rem)'
      },
      root: {
        zIndex: 1,
        // Needed to make label appear above Input background when disabled
        color: secondaryColorDark,
        '&$focused': {
          color: secondaryColorDark,
          '&$error': {
            color: errorColor
          }
        },
        '&$disabled': {
          color: secondaryColorDark,
          backgroundColor: 'transparent',
          '&$error': {
            backgroundColor: '#FFFFFF',
            color: errorColor
          }
        }
      }
    },
    MuiRadio: {
      colorSecondary: {
        color: secondaryColorDark,
        '&$checked': {
          color: secondaryColorDark
        }
      }
    },
    MuiSnackbarContent: {
      root: {
        backgroundColor: secondaryColorDark,
        width: 450
      }
    },
    MuiSvgIcon: {
      fontSizeSmall: {
        fontSize: '1rem'
      }
    },
    MuiSwitch: {
      bar: {
        backgroundColor: '#D2D6D9',
        width: '3rem',
        height: '1.5rem',
        borderRadius: '0.75rem',
        // Height / 2
        marginTop: '-0.75rem',
        // -Height / 2
        marginLeft: '-1.375rem',
        // -Width / 2
        opacity: 1
      },
      checked: {},
      icon: {
        width: '1rem',
        height: '1rem',
        color: 'white'
      },
      switchBase: {
        '&$checked': {
          transform: 'translateX(1.2rem)',
          '& + $bar': {
            backgroundColor: primaryColor,
            opacity: 1
          }
        }
      }
    },
    MuiTableCell: {
      head: {
        fontSize: '0.875rem',
        fontWeight: 700,
        color: secondaryColor
      },
      body: {
        fontSize: '0.875rem',
        fontWeight: 700,
        color: secondaryColorDark
      },
      root: {
        paddingTop: '1rem',
        paddingBottom: '1rem'
      }
    },
    MuiTablePagination: {
      selectIcon: {
        top: null,
        right: -5
      },
      input: {
        border: 'none'
      },
      toolbar: _defineProperty({}, defaultTheme.breakpoints.down('xs'), {
        padding: '0 !important',
        display: 'flex',
        flexFlow: 'row wrap',
        justifyContent: 'center',
        height: 'fit-content'
      }),
      actions: _defineProperty({}, defaultTheme.breakpoints.down('xs'), {
        width: '100%',
        marginLeft: 0,
        display: 'flex',
        justifyContent: 'center'
      }),
      select: {
        fontSize: '0.75rem'
      }
    },
    MuiTab: {
      root: (_root = {
        padding: '0 1.5rem 0 1.5rem',
        borderRight: '1px solid #ccc'
      }, _defineProperty(_root, defaultTheme.breakpoints.down('sm'), {
        flexGrow: 1
      }), _defineProperty(_root, '&$selected', {
        backgroundColor: 'white'
      }), _root),
      wrapper: {
        flexDirection: 'row'
      },
      labelContainer: _defineProperty({
        width: 'fit-content',
        paddingLeft: '0.5rem !important',
        paddingRight: '0.5rem !important'
      }, defaultTheme.breakpoints.down('sm'), {
        display: 'none'
      }),
      labelIcon: _defineProperty({
        paddingTop: 0,
        minHeight: 64
      }, defaultTheme.breakpoints.down('sm'), {
        minHeight: 48
      })
    },
    MuiTabs: {
      root: {
        background: '#f2f2f2',
        boxShadow: 'inset 0 -1px #ccc'
      },
      indicator: {
        opacity: 0
      }
    },
    MuiToolbar: {
      root: {
        backgroundColor: 'white',
        color: secondaryColorDark
      },
      regular: {
        minHeight: '64px !important'
      }
    }
  },
  props: {
    MuiDialogTitle: {
      disableTypography: true
    },
    MuiExpansionPanelSummary: {
      expandIcon: _react["default"].createElement(_ArrowDropDown["default"], null)
    },
    MuiInput: {
      disableUnderline: true
    },
    MuiInputLabel: {
      shrink: true
    },
    MuiFormControl: {
      fullWidth: true
    },
    MuiSwitch: {
      color: 'default'
    }
  },
  customClasses: {
    secondaryButton: {
      backgroundColor: secondaryColorDark,
      color: '#FFFFFF',
      '&:hover': {
        backgroundColor: secondaryColor
      }
    },
    shortButton: {
      paddingTop: '0.59rem',
      paddingBottom: '0.59rem'
    },
    tallButton: {
      paddingTop: '1.25rem',
      paddingBottom: '1.25rem'
    },
    tertiaryButton: {
      backgroundColor: secondaryColorLight,
      color: secondaryColorDark
    },
    limitedSizeButton: _defineProperty({}, defaultTheme.breakpoints.up('sm'), {
      maxWidth: 350
    })
  }
};
exports.theme = theme;