diff --git a/src/components/Filter/Filter.tsx b/src/components/Filter/Filter.tsx index 4f9fa8eed..8fa185205 100644 --- a/src/components/Filter/Filter.tsx +++ b/src/components/Filter/Filter.tsx @@ -71,12 +71,12 @@ const styles = (theme: Theme) => top: -5 }, paper: { - marginTop: theme.spacing.unit * 2, - padding: theme.spacing.unit * 2, - width: 240, "& p": { paddingBottom: 10 - } + }, + marginTop: theme.spacing.unit * 2, + padding: theme.spacing.unit * 2, + width: 240 }, popover: { zIndex: 1 @@ -134,9 +134,7 @@ const Filter = withStyles(styles, { name: "Filter" })( }} > - - {filterLabel} - + {filterLabel} padding: 8, position: "absolute", right: 0, - zIndex: 2 + zIndex: 22 } }); diff --git a/src/components/SingleSelectField/SingleSelectField.tsx b/src/components/SingleSelectField/SingleSelectField.tsx index d8be758e8..8c5dddb77 100644 --- a/src/components/SingleSelectField/SingleSelectField.tsx +++ b/src/components/SingleSelectField/SingleSelectField.tsx @@ -1,8 +1,8 @@ -import OutlinedInput from "@material-ui/core/OutlinedInput"; import FormControl from "@material-ui/core/FormControl"; import FormHelperText from "@material-ui/core/FormHelperText"; import InputLabel from "@material-ui/core/InputLabel"; import MenuItem from "@material-ui/core/MenuItem"; +import OutlinedInput from "@material-ui/core/OutlinedInput"; import Select, { SelectProps } from "@material-ui/core/Select"; import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles"; import classNames from "classnames"; diff --git a/src/components/TableFilter/FilterChips.tsx b/src/components/TableFilter/FilterChips.tsx index fe11eacb7..8a584f29a 100644 --- a/src/components/TableFilter/FilterChips.tsx +++ b/src/components/TableFilter/FilterChips.tsx @@ -45,8 +45,9 @@ const useStyles = makeStyles( actionContainer: { display: "flex", flexWrap: "wrap", - padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit * - 3}px ${theme.spacing.unit / 2}px ${theme.spacing.unit * 3}px` + padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit * 3}px ${ + theme.spacing.unit + }px ${theme.spacing.unit * 3}px` }, filterButton: { alignItems: "center", diff --git a/src/components/TablePagination/TablePaginationActions.tsx b/src/components/TablePagination/TablePaginationActions.tsx index 8dd4d764c..244777cb6 100644 --- a/src/components/TablePagination/TablePaginationActions.tsx +++ b/src/components/TablePagination/TablePaginationActions.tsx @@ -31,15 +31,15 @@ const styles = (theme: Theme) => }, disabled: {}, iconButton: { - "& svg": { - border: `solid 1px #BDBDBD`, - borderRadius: "50%" - }, "& > span:first-of-type": { backgroundColor: theme.palette.background.default, borderRadius: "100%", transition: theme.transitions.duration.standard + "ms" }, + "& svg": { + border: `solid 1px #BDBDBD`, + borderRadius: "50%" + }, "&:focus, &:hover": { "& > span:first-of-type": { backgroundColor: fade(theme.palette.primary.main, 0.2) @@ -48,12 +48,12 @@ const styles = (theme: Theme) => } }, root: { - color: theme.palette.text.secondary, - flexShrink: 0, - margin: `0 ${theme.spacing.unit * 2.5}px`, "& button": { padding: 6 - } + }, + color: theme.palette.text.secondary, + flexShrink: 0, + margin: `0 ${theme.spacing.unit * 2.5}px` } }); diff --git a/src/components/Theme/ThemeProvider.tsx b/src/components/Theme/ThemeProvider.tsx index 4e00ebe0f..0fe66f7f4 100644 --- a/src/components/Theme/ThemeProvider.tsx +++ b/src/components/Theme/ThemeProvider.tsx @@ -28,6 +28,7 @@ const dark: IThemeColors = { default: "#25262A", disabled: "#393939", disabledBackground: "#292A2D", + disabledText: "#9D9D9D", text: "#FCFCFC", textHover: "#616161" }, diff --git a/src/components/Timeline/Timeline.tsx b/src/components/Timeline/Timeline.tsx index 91f7bfe54..0621193fe 100644 --- a/src/components/Timeline/Timeline.tsx +++ b/src/components/Timeline/Timeline.tsx @@ -96,9 +96,6 @@ export const TimelineAddNote = withStyles(styles, { name: "TimelineAddNote" })( placeholder={intl.formatMessage({ defaultMessage: "Leave your note here..." })} - // label={intl.formatMessage({ - // defaultMessage: "Leave your note here..." - // })} onChange={onChange} value={message} name="message" diff --git a/src/theme.ts b/src/theme.ts index d7f0ddeb8..93eafa6d3 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -136,13 +136,14 @@ export default (colors: IThemeColors): Theme => "&$shrink": { transform: "translate(12px, 6px) scale(0.75)" }, - transform: "translate(14px, 14px) scale(1)" + transform: "translate(14px, 14px) scale(1)", + zIndex: 9 }, root: { - color: colors.input.text, "&$disabled": { color: `${fade(colors.primary, 0.4)} !important` as any - } + }, + color: colors.input.text }, shrink: { // Negates x0.75 scale @@ -178,14 +179,30 @@ export default (colors: IThemeColors): Theme => }, MuiMenuItem: { root: { - "&:hover, &$selected, &$selected:focus": { - backgroundColor: colors.input.default + "&$selected, &$selected:focus": { + backgroundColor: [colors.background.default, "!important"] as any, + color: colors.primary, + fontWeight: 700 + }, + "&:hover": { + backgroundColor: [colors.background.default, "!important"] as any, + color: colors.font.default, + fontWeight: 400 }, borderRadius: 4 - } + }, + selected: {} }, MuiOutlinedInput: { input: { + "&:-webkit-autofill": { + boxShadow: `0 0 0px 1000px rgba(19, 190, 187, 0.1) inset`, + left: 1, + position: "relative", + top: -3, + width: `calc(100% - 26px)`, + zIndex: 0 + }, "&::placeholder": { opacity: [[0], "!important"] as any }, @@ -243,6 +260,19 @@ export default (colors: IThemeColors): Theme => padding: ["15px 12px 17px", "!important"] as any } }, + MuiSnackbarContent: { + action: { + "& $MuiIconButton": { + "& svg": { + color: colors.font.default + } + } + }, + root: { + backgroundColor: colors.background.paper, + color: colors.font.default + } + }, MuiSwitch: { bar: { "$colorPrimary$checked + &": {