djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix tabs style in dark mode

Browse source
This commit is contained in:
Krzysztof Bialoglowicz 2019-09-10 18:23:59 +02:00
parent c0cc82aae1
commit ec7f2366cf
3 changed files with 14 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/components/Tab/Tab.tsx
View file

@ -4,13 +4,16 @@ import {
withStyles, withStyles,
WithStyles WithStyles
} from "@material-ui/core/styles"; } from "@material-ui/core/styles";
import { fade } from "@material-ui/core/styles/colorManipulator";
import Typography from "@material-ui/core/Typography"; import Typography from "@material-ui/core/Typography";
import classNames from "classnames"; import classNames from "classnames";
import React from "react"; import React from "react";
const styles = (theme: Theme) => const styles = (theme: Theme) =>
createStyles({ createStyles({
active: {}, active: {
color: theme.typography.caption.color
},
root: { root: {
"&$active": { "&$active": {
borderBottomColor: theme.palette.primary.main, borderBottomColor: theme.palette.primary.main,
@ -23,7 +26,7 @@ const styles = (theme: Theme) =>
color: theme.palette.primary.main color: theme.palette.primary.main
}, },
borderBottom: "1px solid transparent", borderBottom: "1px solid transparent",
color: theme.typography.caption.color, color: fade(theme.typography.caption.color, 0.6),
cursor: "pointer", cursor: "pointer",
display: "inline-block", display: "inline-block",
fontWeight: theme.typography.fontWeightRegular, fontWeight: theme.typography.fontWeightRegular,

6
src/components/Theme/ThemeProvider.tsx
View file

@ -20,7 +20,8 @@ const dark: IThemeColors = {
button: "#202124", button: "#202124",
default: "#FCFCFC", default: "#FCFCFC",
gray: "#9E9D9D", gray: "#9E9D9D",
textButton: "#FFFFFF" textButton: "#FFFFFF",
textDisabled: "#FCFCFC"
}, },
gray: { gray: {
default: "#202124", default: "#202124",
@ -53,7 +54,8 @@ const light: IThemeColors = {
button: "#FFFFFF", button: "#FFFFFF",
default: "#3D3D3D", default: "#3D3D3D",
gray: "#616161", gray: "#616161",
textButton: "#06847B" textButton: "#06847B",
textDisabled: "#616161"
}, },
gray: { gray: {
default: "#C8C8C8", default: "#C8C8C8",

6
src/theme.ts
View file

@ -19,7 +19,10 @@ export type IThemeColors = Record<
} & { } & {
checkbox: Record<"default" | "disabled", string>; checkbox: Record<"default" | "disabled", string>;
} & { } & {
font: Record<"default" | "gray" | "button" | "textButton", string>; font: Record<
"default" | "gray" | "button" | "textButton" | "textDisabled",
string
>;
} & { } & {
gray: Record<"default" | "disabled", string>; gray: Record<"default" | "disabled", string>;
} & { } & {
@ -397,6 +400,7 @@ export default (colors: IThemeColors): Theme =>
}, },
primary: { primary: {
contrastText: "#ffffff", contrastText: "#ffffff",
dark: colors.font.textDisabled,
main: colors.primary main: colors.primary
}, },
secondary: { secondary: {