From c7e4d249c6a2f24385e7a071db067651be660390 Mon Sep 17 00:00:00 2001 From: Tudor Stanciu Date: Sun, 4 Jul 2021 14:16:25 +0300 Subject: [PATCH] fix --- src/components/App.js | 12 ++++----- src/components/Layout/Layout.js | 2 +- src/components/Notification/index.js | 2 ++ src/components/PageTitle/index.js | 2 ++ src/components/Sidebar/index.js | 2 ++ src/components/Sidebar/menu.js | 8 +++--- src/components/Widget/Widget.js | 27 ++++++++++++------- src/components/Widget/index.js | 2 ++ src/components/Wrappers/Wrappers.js | 40 ++++++++++++++-------------- src/components/Wrappers/index.js | 1 + src/pages/tables/Tables.js | 17 +++++++----- 11 files changed, 68 insertions(+), 47 deletions(-) create mode 100644 src/components/Notification/index.js create mode 100644 src/components/PageTitle/index.js create mode 100644 src/components/Sidebar/index.js create mode 100644 src/components/Widget/index.js create mode 100644 src/components/Wrappers/index.js diff --git a/src/components/App.js b/src/components/App.js index 5b2d6a9..3da89e7 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -2,7 +2,7 @@ import React from "react"; import { HashRouter, Route, Switch, Redirect } from "react-router-dom"; // components -import Layout from "./Layout"; +import Layout from "./Layout/Layout"; // pages import Error from "../pages/error"; @@ -37,7 +37,7 @@ export default function App() { return ( + render={(props) => isAuthenticated ? ( React.createElement(component, props) ) : ( @@ -45,8 +45,8 @@ export default function App() { to={{ pathname: "/login", state: { - from: props.location, - }, + from: props.location + } }} /> ) @@ -59,11 +59,11 @@ export default function App() { return ( + render={(props) => isAuthenticated ? ( ) : ( diff --git a/src/components/Layout/Layout.js b/src/components/Layout/Layout.js index 882fb5d..255348d 100644 --- a/src/components/Layout/Layout.js +++ b/src/components/Layout/Layout.js @@ -2,7 +2,7 @@ import React from "react"; import { withRouter } from "react-router-dom"; // components -import Header from "../Header"; +import Header from "../Header/Header"; import Sidebar from "../Sidebar"; import Content from "./Content"; diff --git a/src/components/Notification/index.js b/src/components/Notification/index.js new file mode 100644 index 0000000..73629c0 --- /dev/null +++ b/src/components/Notification/index.js @@ -0,0 +1,2 @@ +import Notification from "./Notification"; +export default Notification; diff --git a/src/components/PageTitle/index.js b/src/components/PageTitle/index.js new file mode 100644 index 0000000..a28ec98 --- /dev/null +++ b/src/components/PageTitle/index.js @@ -0,0 +1,2 @@ +import PageTitle from "./PageTitle"; +export default PageTitle; diff --git a/src/components/Sidebar/index.js b/src/components/Sidebar/index.js new file mode 100644 index 0000000..3067c49 --- /dev/null +++ b/src/components/Sidebar/index.js @@ -0,0 +1,2 @@ +import Sidebar from "./Sidebar"; +export default Sidebar; diff --git a/src/components/Sidebar/menu.js b/src/components/Sidebar/menu.js index 8b1ec73..ed7e99f 100644 --- a/src/components/Sidebar/menu.js +++ b/src/components/Sidebar/menu.js @@ -24,7 +24,7 @@ const menu = [ { id: 1, label: "Resources", - link: "/app/typography", + link: "/app/resources", icon: }, @@ -33,13 +33,13 @@ const menu = [ { id: 4, label: "Admin", - link: "/app/typography", + link: "/app/admin", icon: }, { id: 5, label: "Settings", - link: "/app/typography", + link: "/app/settings", icon: , children: [ { @@ -53,7 +53,7 @@ const menu = [ { id: 6, label: "Health", - link: "/app/typography", + link: "/app/health", icon: }, { id: 7, type: "divider" }, diff --git a/src/components/Widget/Widget.js b/src/components/Widget/Widget.js index 2ca8468..bd3b110 100644 --- a/src/components/Widget/Widget.js +++ b/src/components/Widget/Widget.js @@ -4,7 +4,7 @@ import { IconButton, Menu, MenuItem, - Typography, + Typography } from "@material-ui/core"; import { MoreVert as MoreIcon } from "@material-ui/icons"; import classnames from "classnames"; @@ -32,14 +32,21 @@ export default function Widget({ var [isMoreMenuOpen, setMoreMenuOpen] = useState(false); return ( -
- -
+
+ +
{header ? ( header ) : ( @@ -65,7 +72,7 @@ export default function Widget({
{children} diff --git a/src/components/Widget/index.js b/src/components/Widget/index.js new file mode 100644 index 0000000..bf5aefc --- /dev/null +++ b/src/components/Widget/index.js @@ -0,0 +1,2 @@ +import Widget from "./Widget"; +export default Widget; diff --git a/src/components/Wrappers/Wrappers.js b/src/components/Wrappers/Wrappers.js index 19c2b97..0f02dff 100644 --- a/src/components/Wrappers/Wrappers.js +++ b/src/components/Wrappers/Wrappers.js @@ -3,18 +3,18 @@ import { withStyles, Badge as BadgeBase, Typography as TypographyBase, - Button as ButtonBase, + Button as ButtonBase } from "@material-ui/core"; import { useTheme, makeStyles } from "@material-ui/styles"; import classnames from "classnames"; // styles -var useStyles = makeStyles(theme => ({ +var useStyles = makeStyles((theme) => ({ badge: { fontWeight: 600, height: 16, - minWidth: 16, - }, + minWidth: 16 + } })); function Badge({ children, colorBrightness, color, ...props }) { @@ -22,16 +22,16 @@ function Badge({ children, colorBrightness, color, ...props }) { var theme = useTheme(); var Styled = createStyled({ badge: { - backgroundColor: getColor(color, theme, colorBrightness), - }, + backgroundColor: getColor(color, theme, colorBrightness) + } }); return ( - {styledProps => ( + {(styledProps) => ( @@ -57,7 +57,7 @@ function Typography({ style={{ color: getColor(color, theme, colorBrightness), fontWeight: getFontWeight(weight), - fontSize: getFontSize(size, props.variant, theme), + fontSize: getFontSize(size, props.variant, theme) }} {...props} > @@ -71,7 +71,7 @@ function Button({ children, color, className, ...props }) { var Styled = createStyled({ root: { - color: getColor(color, theme), + color: getColor(color, theme) }, contained: { backgroundColor: getColor(color, theme), @@ -79,20 +79,20 @@ function Button({ children, color, className, ...props }) { color: `${color ? "white" : theme.palette.text.primary} !important`, "&:hover": { backgroundColor: getColor(color, theme, "light"), - boxShadow: theme.customShadows.widgetWide, + boxShadow: theme.customShadows.widgetWide }, "&:active": { - boxShadow: theme.customShadows.widgetWide, - }, + boxShadow: theme.customShadows.widgetWide + } }, outlined: { color: getColor(color, theme), - borderColor: getColor(color, theme), + borderColor: getColor(color, theme) }, select: { backgroundColor: theme.palette.primary.main, - color: "#fff", - }, + color: "#fff" + } }); return ( @@ -102,14 +102,14 @@ function Button({ children, color, className, ...props }) { classes={{ contained: classes.contained, root: classes.root, - outlined: classes.outlined, + outlined: classes.outlined }} {...props} className={classnames( { - [classes.select]: props.select, + [classes.select]: props.select }, - className, + className )} > {children} @@ -172,7 +172,7 @@ function getFontSize(size, variant = "", theme) { } function createStyled(styles, options) { - var Styled = function(props) { + var Styled = function (props) { const { children, ...other } = props; return children(other); }; diff --git a/src/components/Wrappers/index.js b/src/components/Wrappers/index.js new file mode 100644 index 0000000..78be62e --- /dev/null +++ b/src/components/Wrappers/index.js @@ -0,0 +1 @@ +export { Badge, Typography, Button } from "./Wrappers"; diff --git a/src/pages/tables/Tables.js b/src/pages/tables/Tables.js index 6bf85b5..108cf53 100644 --- a/src/pages/tables/Tables.js +++ b/src/pages/tables/Tables.js @@ -28,14 +28,14 @@ const datatableData = [ ["Anna Siranush", "Example Inc.", "Yonkers", "NY"], ["Avram Sylva", "Example Inc.", "Hartford", "CT"], ["Serafima Babatunde", "Example Inc.", "Tampa", "FL"], - ["Gaston Festus", "Example Inc.", "Tampa", "FL"], + ["Gaston Festus", "Example Inc.", "Tampa", "FL"] ]; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ tableOverflow: { - overflow: 'auto' + overflow: "auto" } -})) +})); export default function Tables() { const classes = useStyles(); @@ -49,12 +49,17 @@ export default function Tables() { data={datatableData} columns={["Name", "Company", "City", "State"]} options={{ - filterType: "checkbox", + filterType: "checkbox" }} /> - +