Refactor SystemVersionComponent styles

master^2
Tudor Stanciu 2024-03-25 02:57:40 +02:00
parent f29f159cc3
commit 1a53110db1
1 changed files with 29 additions and 30 deletions

View File

@ -1,6 +1,5 @@
import React, { useMemo, useEffect, useState } from "react"; import React, { useMemo, useEffect, useState } from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { makeStyles } from "@mui/material/styles";
import { List, ListItem, ListItemText, ListItemAvatar } from "@mui/material"; import { List, ListItem, ListItemText, ListItemAvatar } from "@mui/material";
import Avatar from "@mui/material/Avatar"; import Avatar from "@mui/material/Avatar";
import WebAssetIcon from "@mui/icons-material/WebAsset"; import WebAssetIcon from "@mui/icons-material/WebAsset";
@ -9,37 +8,37 @@ import SettingsInputSvideoIcon from "@mui/icons-material/SettingsInputSvideo";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import packageData from "../../../../package.json"; import packageData from "../../../../package.json";
import Paper from "@mui/material/Paper"; import Paper from "@mui/material/Paper";
import { useTheme } from "@mui/material/styles";
const useStyles = makeStyles(theme => { const getStyles = theme => ({
return { horizontally: {
horizontally: { display: "flex",
display: "flex", flexDirection: "row",
flexDirection: "row", padding: 0
padding: 0 },
}, vertical: {
vertical: { width: "100%"
width: "100%" },
}, value: {
value: { fontSize: "0.9rem",
fontSize: "0.9rem", fontWeight: theme.typography.fontWeightMedium
fontWeight: theme.typography.fontWeightMedium },
}, versionAvatar: {
versionAvatar: { backgroundColor: theme.palette.secondary.main
backgroundColor: theme.palette.secondary.main }
}
};
}); });
const SystemVersionComponent = ({ data }) => { const SystemVersionComponent = ({ data }) => {
const classes = useStyles(); const [listClass, setListClass] = useState(styles.horizontally);
const [listClass, setListClass] = useState(classes.horizontally);
const { t } = useTranslation(); const { t } = useTranslation();
const theme = useTheme();
const styles = getStyles(theme);
useEffect(() => { useEffect(() => {
const mediaQuery = window.matchMedia("(max-width: 800px)"); const mediaQuery = window.matchMedia("(max-width: 800px)");
function handleMatches(event) { function handleMatches(event) {
const cssClass = event.matches ? classes.vertical : classes.horizontally; const cssClass = event.matches ? styles.vertical : styles.horizontally;
setListClass(cssClass); setListClass(cssClass);
} }
@ -49,7 +48,7 @@ const SystemVersionComponent = ({ data }) => {
return () => { return () => {
mediaQuery.removeListener(handleMatches); mediaQuery.removeListener(handleMatches);
}; };
}, [classes.horizontally, classes.vertical]); }, []);
const lastReleaseDate = useMemo(() => { const lastReleaseDate = useMemo(() => {
const format = "DD-MM-YYYY HH:mm:ss"; const format = "DD-MM-YYYY HH:mm:ss";
@ -79,16 +78,16 @@ const SystemVersionComponent = ({ data }) => {
return ( return (
<Paper variant="outlined"> <Paper variant="outlined">
<List className={listClass}> <List sx={listClass}>
<ListItem> <ListItem>
<ListItemAvatar> <ListItemAvatar>
<Avatar className={classes.versionAvatar}> <Avatar sx={styles.versionAvatar}>
<DeveloperBoardIcon /> <DeveloperBoardIcon />
</Avatar> </Avatar>
</ListItemAvatar> </ListItemAvatar>
<ListItemText <ListItemText
primary={ primary={
<span className={classes.value}> <span style={styles.value}>
{t("About.System.Version.Server", { {t("About.System.Version.Server", {
version: data.server.version version: data.server.version
})} })}
@ -101,13 +100,13 @@ const SystemVersionComponent = ({ data }) => {
</ListItem> </ListItem>
<ListItem> <ListItem>
<ListItemAvatar> <ListItemAvatar>
<Avatar className={classes.versionAvatar}> <Avatar sx={styles.versionAvatar}>
<SettingsInputSvideoIcon /> <SettingsInputSvideoIcon />
</Avatar> </Avatar>
</ListItemAvatar> </ListItemAvatar>
<ListItemText <ListItemText
primary={ primary={
<span className={classes.value}> <span style={styles.value}>
{t("About.System.Version.Api", { {t("About.System.Version.Api", {
version: data.api.version version: data.api.version
})} })}
@ -120,13 +119,13 @@ const SystemVersionComponent = ({ data }) => {
</ListItem> </ListItem>
<ListItem> <ListItem>
<ListItemAvatar> <ListItemAvatar>
<Avatar className={classes.versionAvatar}> <Avatar sx={styles.versionAvatar}>
<WebAssetIcon /> <WebAssetIcon />
</Avatar> </Avatar>
</ListItemAvatar> </ListItemAvatar>
<ListItemText <ListItemText
primary={ primary={
<span className={classes.value}> <span style={styles.value}>
{t("About.System.Version.Frontend", { {t("About.System.Version.Frontend", {
version: process.env.APP_VERSION ?? packageData.version version: process.env.APP_VERSION ?? packageData.version
})} })}