diff --git a/frontend/package.json b/frontend/package.json index a9d844448f..ac78e76e4d 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -40,6 +40,10 @@ "main": "./index.js", "dependencies": {}, "devDependencies": { + "@material-ui/core": "^4.11.3", + "@material-ui/icons": "^4.11.2", + "classnames": "^2.2.6", + "date-fns": "^2.17.0", "@babel/core": "^7.9.0", "@babel/plugin-proposal-class-properties": "^7.8.3", "@babel/plugin-proposal-decorators": "^7.8.3", diff --git a/frontend/src/app.css b/frontend/src/app.css new file mode 100644 index 0000000000..266f5ebcd1 --- /dev/null +++ b/frontend/src/app.css @@ -0,0 +1,26 @@ +:root { + /* FONT SIZE */ + --h1-size: 1.25rem; + --p-size: 1.1rem; + + /* PADDING */ + --card-padding: 2rem; + --card-padding-x: 2rem; + --card-padding-y: 2rem; + + /* MARGIN */ + --card-margin-y: 1rem; + --card-margin-x: 1rem; + + /* COLORS*/ + --success: #3bd86e; + --danger: #d95e5e; + --warning: #d67c3d; +} + +h1, +h2 { + padding: 0; + margin: 0; + line-height: 24px; +} diff --git a/frontend/src/component/common/conditionally-render.jsx b/frontend/src/component/common/conditionally-render.jsx new file mode 100644 index 0000000000..8e74dec4a0 --- /dev/null +++ b/frontend/src/component/common/conditionally-render.jsx @@ -0,0 +1,32 @@ +const ConditionallyRender = ({ condition, show, elseShow }) => { + const handleFunction = renderFunc => { + const result = renderFunc(); + if (!result) { + /* eslint-disable-next-line */ + console.warn( + 'Nothing was returned from your render function. Verify that you are returning a valid react component' + ); + return null; + } + return result; + }; + + const isFunc = param => typeof param === 'function'; + + if (condition && show) { + if (isFunc(show)) { + return handleFunction(show); + } + + return show; + } + if (!condition && elseShow) { + if (isFunc(elseShow)) { + return handleFunction(elseShow); + } + return elseShow; + } + return null; +}; + +export default ConditionallyRender; diff --git a/frontend/src/component/common/select.jsx b/frontend/src/component/common/select.jsx index f77fa51203..de30592b1e 100644 --- a/frontend/src/component/common/select.jsx +++ b/frontend/src/component/common/select.jsx @@ -1,11 +1,15 @@ import React from 'react'; +import classnames from 'classnames'; import PropTypes from 'prop-types'; -const Select = ({ name, value, label, options, style, onChange, disabled = false, filled }) => { +const Select = ({ name, value, label, options, style, onChange, disabled = false, filled, className }) => { const wrapper = Object.assign({ width: 'auto' }, style); return (