diff --git a/src/components/AppLayout/AppLayout.tsx b/src/components/AppLayout/AppLayout.tsx index 0362dc578..32517e68e 100644 --- a/src/components/AppLayout/AppLayout.tsx +++ b/src/components/AppLayout/AppLayout.tsx @@ -64,6 +64,12 @@ const useStyles = makeStyles( marginLeft: theme.spacing(2), transition: theme.transitions.duration.standard + "ms" }, + avatar: { + "&&": { + height: 32, + width: 32 + } + }, content: { [theme.breakpoints.down("sm")]: { paddingLeft: 0 @@ -79,9 +85,16 @@ const useStyles = makeStyles( paddingLeft: drawerWidth }, darkThemeSwitch: { + [theme.breakpoints.down("sm")]: { + marginRight: -theme.spacing(1.5) + }, marginRight: theme.spacing(2) }, header: { + [theme.breakpoints.down("sm")]: { + height: 88, + marginBottom: 0 + }, display: "flex", height: 40, marginBottom: theme.spacing(3) @@ -179,6 +192,9 @@ const useStyles = makeStyles( [theme.breakpoints.up("md")]: { display: "none" }, + [theme.breakpoints.down("sm")]: { + left: 0 + }, background: theme.palette.background.paper, borderRadius: "50%", cursor: "pointer", @@ -239,12 +255,20 @@ const useStyles = makeStyles( flex: 1 }, userBar: { + [theme.breakpoints.down("sm")]: { + alignItems: "flex-end", + flexDirection: "column-reverse", + overflow: "hidden" + }, alignItems: "center", display: "flex" }, userChip: { backgroundColor: theme.palette.background.paper, - color: theme.palette.text.primary + borderRadius: 24, + color: theme.palette.text.primary, + height: 40, + padding: theme.spacing(0.5) }, userMenuContainer: { position: "relative" @@ -415,6 +439,9 @@ const AppLayout: React.FC = ({ children }) => { ) } + classes={{ + avatar: classes.avatar + }} className={classes.userChip} label={ <> @@ -433,7 +460,6 @@ const AppLayout: React.FC = ({ children }) => { open={isMenuOpened} anchorEl={anchor.current} transition - disablePortal placement="bottom-end" > {({ TransitionProps, placement }) => ( diff --git a/src/components/AppLayout/MenuNested.tsx b/src/components/AppLayout/MenuNested.tsx index 85ed202bb..314156aa9 100644 --- a/src/components/AppLayout/MenuNested.tsx +++ b/src/components/AppLayout/MenuNested.tsx @@ -75,6 +75,7 @@ const useStyles = makeStyles(theme => ({ zIndex: 2 }, right: -300, + width: drawerWidthExpanded, zIndex: -1 }, subHeader: { diff --git a/src/components/ColumnPicker/ColumnPicker.tsx b/src/components/ColumnPicker/ColumnPicker.tsx index aa1f55275..83b05f306 100644 --- a/src/components/ColumnPicker/ColumnPicker.tsx +++ b/src/components/ColumnPicker/ColumnPicker.tsx @@ -29,7 +29,7 @@ const useStyles = makeStyles( popper: { boxShadow: `0px 5px 10px 0 ${fade(theme.palette.common.black, 0.05)}`, marginTop: theme.spacing(2), - zIndex: 1 + zIndex: 2 } }), { diff --git a/src/components/ColumnPicker/ColumnPickerContent.tsx b/src/components/ColumnPicker/ColumnPickerContent.tsx index 8580d4391..5977f5f55 100644 --- a/src/components/ColumnPicker/ColumnPickerContent.tsx +++ b/src/components/ColumnPicker/ColumnPickerContent.tsx @@ -43,6 +43,9 @@ const useStyles = makeStyles(theme => ({ marginRight: theme.spacing(2) }, content: { + [theme.breakpoints.down("sm")]: { + gridTemplateColumns: "repeat(2, 1fr)" + }, display: "grid", gridColumnGap: theme.spacing(3), gridTemplateColumns: "repeat(3, 1fr)", diff --git a/src/components/Container.tsx b/src/components/Container.tsx index c2e48752a..3f4e5533b 100644 --- a/src/components/Container.tsx +++ b/src/components/Container.tsx @@ -2,19 +2,24 @@ import { makeStyles } from "@material-ui/core/styles"; import classNames from "classnames"; import React from "react"; -const useStyles = makeStyles(theme => ({ - root: { - [theme.breakpoints.up("lg")]: { - marginLeft: "auto", - marginRight: "auto", - maxWidth: theme.breakpoints.width("lg") - }, - [theme.breakpoints.up("sm")]: { - padding: theme.spacing(0, 3) - }, - padding: theme.spacing(0, 1) +const useStyles = makeStyles( + theme => ({ + root: { + [theme.breakpoints.up("lg")]: { + marginLeft: "auto", + marginRight: "auto", + maxWidth: theme.breakpoints.width("lg") + }, + [theme.breakpoints.up("sm")]: { + padding: theme.spacing(0, 3) + }, + padding: theme.spacing(0, 1) + } + }), + { + name: "Container" } -})); +); interface ContainerProps { className?: string; diff --git a/src/components/ExtendedPageHeader/ExtendedPageHeader.tsx b/src/components/ExtendedPageHeader/ExtendedPageHeader.tsx index 5972b3619..e34fbb468 100644 --- a/src/components/ExtendedPageHeader/ExtendedPageHeader.tsx +++ b/src/components/ExtendedPageHeader/ExtendedPageHeader.tsx @@ -6,7 +6,7 @@ const useStyles = makeStyles(theme => ({ action: { flex: "0 0 auto", [theme.breakpoints.down("sm")]: { - paddingLeft: 10 + marginTop: theme.spacing() } }, grid: { diff --git a/src/components/PageHeader/PageHeader.tsx b/src/components/PageHeader/PageHeader.tsx index 3800a254e..515e9aa9f 100644 --- a/src/components/PageHeader/PageHeader.tsx +++ b/src/components/PageHeader/PageHeader.tsx @@ -12,8 +12,8 @@ const useStyles = makeStyles(theme => ({ title: { [theme.breakpoints.down("sm")]: { fontSize: 20, - paddingBottom: 20, - paddingLeft: 10 + marginTop: theme.spacing(2), + padding: 0 }, flex: 1, fontSize: 24,