QRunIO/qqq-frontend-material-dashboard
2
0
Fork 0
mirror of https://github.com/Kingsrook/qqq-frontend-material-dashboard.git synced 2025-07-17 12:50:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

CE-740 font sizes, colors, and padding

Browse Source
This commit is contained in:
darin.kelkhoff
2023-11-15 19:55:39 -06:00
parent 4f0469a04c
commit 6bdd8ed935
3 changed files with 45 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/qqq/components/widgets/tables/cells/DataTableBodyCell.tsx
View File

@ -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"
}
})}
>
<Box
display="initial"
width="max-content"
color="text"
color={colors.dark.main}
>
{children}
</Box>

21
src/qqq/components/widgets/tables/cells/DataTableHeadCell.tsx
View File

@ -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"
},
})}
>
<Box
{...rest}
sx={({typography: {size, fontWeightBold}}: Theme) => ({
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",
})}

14
src/qqq/components/widgets/tables/cells/DefaultCell.tsx
View File

@ -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 (
<MDTypography variant="button" fontWeight="regular" color="text">
<MDTypography variant="button" color={colors.dark.main} sx={{
fontWeight: 600,
"@media (min-width: 1440px)": {
fontSize: "1rem"
},
"@media (max-width: 1440px)": {
fontSize: "0.875rem"
},
"& a": {
color: colors.blueGray.main
}
}}>
{children}
</MDTypography>
);