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