diff --git a/src/qqq/components/widgets/tables/cells/DataTableBodyCell.tsx b/src/qqq/components/widgets/tables/cells/DataTableBodyCell.tsx index abc8773..46c2ad1 100644 --- a/src/qqq/components/widgets/tables/cells/DataTableBodyCell.tsx +++ b/src/qqq/components/widgets/tables/cells/DataTableBodyCell.tsx @@ -22,6 +22,7 @@ import Box from "@mui/material/Box"; import {Theme} from "@mui/material/styles"; import {ReactNode} from "react"; +import colors from "qqq/assets/theme/base/colors"; // Declaring prop types for DataTableBodyCell interface Props @@ -40,14 +41,26 @@ function DataTableBodyCell({noBorder, align, children}: Props): JSX.Element py={1.5} px={3} sx={({palette: {light}, typography: {size}, borders: {borderWidth}}: Theme) => ({ - fontSize: size.sm, - borderBottom: noBorder ? "none" : `${borderWidth[1]} solid ${light.main}`, + borderBottom: noBorder ? "none" : `${borderWidth[1]} solid ${colors.grayLines.main}`, + fontSize: "0.875rem", + "@media (min-width: 1440px)": { + fontSize: "1rem" + }, + "@media (max-width: 1440px)": { + fontSize: "0.875rem" + }, + "&:nth-child(1)": { + paddingLeft: "1rem" + }, + "&:last-child": { + paddingRight: "1rem" + } })} > {children} diff --git a/src/qqq/components/widgets/tables/cells/DataTableHeadCell.tsx b/src/qqq/components/widgets/tables/cells/DataTableHeadCell.tsx index b0fade0..20583f0 100644 --- a/src/qqq/components/widgets/tables/cells/DataTableHeadCell.tsx +++ b/src/qqq/components/widgets/tables/cells/DataTableHeadCell.tsx @@ -23,6 +23,7 @@ import Box from "@mui/material/Box"; import Icon from "@mui/material/Icon"; import {Theme} from "@mui/material/styles"; import {ReactNode} from "react"; +import colors from "qqq/assets/theme/base/colors"; import {useMaterialUIController} from "qqq/context"; // Declaring props types for DataTableHeadCell @@ -46,18 +47,28 @@ function DataTableHeadCell({width, children, sorted, align, ...rest}: Props): JS py={1.5} px={3} sx={({palette: {light}, borders: {borderWidth}}: Theme) => ({ - borderBottom: `${borderWidth[1]} solid ${light.main}`, + borderBottom: `${borderWidth[1]} solid ${colors.grayLines.main}`, + "&:nth-child(1)": { + paddingLeft: "1rem" + }, + "&:last-child": { + paddingRight: "1rem" + }, })} > ({ position: "relative", - opacity: "0.7", + color: colors.grey[700], textAlign: align, - fontSize: size.xxs, - fontWeight: fontWeightBold, - textTransform: "uppercase", + "@media (min-width: 1440px)": { + fontSize: "1rem" + }, + "@media (max-width: 1440px)": { + fontSize: "0.875rem" + }, + fontWeight: 600, cursor: sorted && "pointer", userSelect: sorted && "none", })} diff --git a/src/qqq/components/widgets/tables/cells/DefaultCell.tsx b/src/qqq/components/widgets/tables/cells/DefaultCell.tsx index 7370699..e5355e0 100644 --- a/src/qqq/components/widgets/tables/cells/DefaultCell.tsx +++ b/src/qqq/components/widgets/tables/cells/DefaultCell.tsx @@ -14,12 +14,24 @@ Coded by www.creative-tim.com */ import {ReactNode} from "react"; +import colors from "qqq/assets/theme/base/colors"; import MDTypography from "qqq/components/legacy/MDTypography"; function DefaultCell({children}: { children: ReactNode }): JSX.Element { return ( - + {children} );