Mirrors/rowy
1
0
Fork 0
mirror of https://github.com/rowyio/rowy.git synced 2025-12-29 00:16:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix table dark mode colors

Browse Source
This commit is contained in:
Sidney Alcantara
2021-09-08 17:45:21 +10:00
parent 9205b0d525
commit 9b77f32fee
2 changed files with 42 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/RichTooltip.tsx
View File

@@ -10,10 +10,23 @@ import {
ButtonProps,
} from "@material-ui/core";
import { colord, extend } from "colord";
import mixPlugin from "colord/plugins/lch";
extend([mixPlugin]);
const useStyles = makeStyles((theme) =>
createStyles({
popper: {
zIndex: theme.zIndex.drawer - 1,
},
tooltip: {
backgroundColor: theme.palette.background.default,
backgroundColor:
theme.palette.mode === "light"
? theme.palette.background.default
: colord(theme.palette.background.paper)
.mix("#fff", 0.16)
.toHslString(),
boxShadow: theme.shadows[8],
...theme.typography.body2,
@@ -23,8 +36,13 @@ const useStyles = makeStyles((theme) =>
arrow: {
"&::before": {
backgroundColor: theme.palette.background.default,
boxShadow: theme.shadows[2],
backgroundColor:
theme.palette.mode === "light"
? theme.palette.background.default
: colord(theme.palette.background.paper)
.mix("#fff", 0.16)
.toHslString(),
boxShadow: theme.shadows[8],
},
},
@@ -89,7 +107,11 @@ export default function RichTooltip({
arrow
open={open}
onClose={closeTooltip}
classes={{ tooltip: classes.tooltip, arrow: classes.arrow }}
classes={{
popper: classes.popper,
tooltip: classes.tooltip,
arrow: classes.arrow,
}}
title={
<div className={classes.grid} onClick={closeTooltip}>
<span className={classes.icon}>{icon}</span>

22
src/components/Table/styles.ts
View File

@@ -1,8 +1,12 @@
import { makeStyles, createStyles } from "@material-ui/styles";
import { alpha, emphasize, darken, lighten } from "@material-ui/core";
import { alpha, darken, lighten } from "@material-ui/core";
import { APP_BAR_HEIGHT } from "components/Navigation";
import { DRAWER_COLLAPSED_WIDTH } from "components/SideDrawer";
import { colord, extend } from "colord";
import mixPlugin from "colord/plugins/lch";
extend([mixPlugin]);
export const useStyles = makeStyles((theme) =>
createStyles({
tableWrapper: {
@@ -29,12 +33,18 @@ export const useStyles = makeStyles((theme) =>
"--color": theme.palette.text.primary,
"--border-color": theme.palette.divider,
// "--summary-border-color": "#aaa",
"--background-color": theme.palette.background.paper,
"--background-color":
theme.palette.mode === "light"
? theme.palette.background.paper
: colord(theme.palette.background.paper)
.mix("#fff", 0.04)
.alpha(1)
.toHslString(),
"--header-background-color": theme.palette.background.default,
"--row-hover-background-color": emphasize(
theme.palette.background.paper,
0.04
),
"--row-hover-background-color": colord(theme.palette.background.paper)
.mix(theme.palette.action.hover, theme.palette.action.hoverOpacity)
.alpha(1)
.toHslString(),
"--row-selected-background-color":
theme.palette.mode === "light"
? lighten(theme.palette.primary.main, 0.9)