tudor.stanciu
/
network-resurrector
mirror of https://dev.azure.com/tstanciu94/NetworkResurrector/_git/NetworkResurrector
1
0
Fork 0
Code Issues 1 Packages Projects Releases Wiki Activity

Refactor DataLabel component styles

master^2
Tudor Stanciu 2024-03-25 02:33:37 +02:00
parent 77c0264963
commit 8174e63a6e
1 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/components/common/DataLabel.js
View File

@ -1,9 +1,9 @@
import React, { useMemo } from "react"; import React, { useMemo } from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import Typography from "@mui/material/Typography"; import Typography from "@mui/material/Typography";
import { makeStyles } from "@mui/material/styles"; import { useTheme } from "@mui/material/styles";
const useStyles = makeStyles(theme => ({ const getStyles = theme => ({
panel: { panel: {
display: "flex" display: "flex"
}, },
@ -13,18 +13,19 @@ const useStyles = makeStyles(theme => ({
data: { data: {
fontWeight: theme.typography.fontWeightMedium fontWeight: theme.typography.fontWeightMedium
} }
})); });
const DataLabel = ({ label, data }) => { const DataLabel = ({ label, data }) => {
const classes = useStyles(); const theme = useTheme();
const lbl = useMemo(() => (label.endsWith(":") ? label : `${label}:`), [label]); const lbl = useMemo(() => (label.endsWith(":") ? label : `${label}:`), [label]);
const styles = getStyles(theme);
return ( return (
<div className={classes.panel}> <div style={styles.panel}>
<Typography variant="body2" className={classes.label}> <Typography variant="body2" sx={styles.label}>
{lbl} {lbl}
</Typography> </Typography>
<Typography variant="body2" className={classes.data}> <Typography variant="body2" sx={styles.data}>
{data} {data}
</Typography> </Typography>
</div> </div>