Refactor SystemVersionComponent to update styling and add dtos to types
parent
5f234938b8
commit
9389058b1f
|
@ -1,5 +1,5 @@
|
|||
import React, { useMemo } from "react";
|
||||
import { List, ListItem, ListItemText, ListItemAvatar, Theme } from "@mui/material";
|
||||
import { List, ListItem, ListItemText, ListItemAvatar, Theme, styled } from "@mui/material";
|
||||
import Avatar from "@mui/material/Avatar";
|
||||
import WebAssetIcon from "@mui/icons-material/WebAsset";
|
||||
import DeveloperBoardIcon from "@mui/icons-material/DeveloperBoard";
|
||||
|
@ -10,23 +10,14 @@ import Paper from "@mui/material/Paper";
|
|||
import { useTheme } from "@mui/material/styles";
|
||||
import { dtos } from "types";
|
||||
|
||||
const getStyles = (theme: Theme) => ({
|
||||
horizontally: {
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
padding: 0
|
||||
},
|
||||
vertical: {
|
||||
width: "100%"
|
||||
},
|
||||
value: {
|
||||
const VersionAvatar = styled(Avatar)(({ theme }) => ({
|
||||
backgroundColor: theme.palette.secondary.main
|
||||
}));
|
||||
|
||||
const VersionLabel = styled("span")(({ theme }) => ({
|
||||
fontSize: "0.9rem",
|
||||
fontWeight: theme.typography.fontWeightMedium
|
||||
},
|
||||
versionAvatar: {
|
||||
backgroundColor: theme.palette.secondary.main
|
||||
}
|
||||
});
|
||||
}));
|
||||
|
||||
type Props = {
|
||||
data: dtos.SystemVersion;
|
||||
|
@ -35,7 +26,6 @@ type Props = {
|
|||
const SystemVersionComponent: React.FC<Props> = ({ data }) => {
|
||||
const { t } = useTranslation();
|
||||
const theme = useTheme();
|
||||
const styles = useMemo(() => getStyles(theme), [theme]);
|
||||
|
||||
const lastReleaseDate = useMemo(() => {
|
||||
const format = "DD-MM-YYYY HH:mm:ss";
|
||||
|
@ -75,17 +65,17 @@ const SystemVersionComponent: React.FC<Props> = ({ data }) => {
|
|||
>
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<Avatar sx={styles.versionAvatar}>
|
||||
<VersionAvatar>
|
||||
<DeveloperBoardIcon />
|
||||
</Avatar>
|
||||
</VersionAvatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText
|
||||
primary={
|
||||
<span style={styles.value}>
|
||||
<VersionLabel>
|
||||
{t("About.System.Version.Server", {
|
||||
version: data.server.version
|
||||
})}
|
||||
</span>
|
||||
</VersionLabel>
|
||||
}
|
||||
secondary={t("About.System.Version.LastReleaseDate", {
|
||||
date: lastReleaseDate.server
|
||||
|
@ -94,17 +84,17 @@ const SystemVersionComponent: React.FC<Props> = ({ data }) => {
|
|||
</ListItem>
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<Avatar sx={styles.versionAvatar}>
|
||||
<VersionAvatar>
|
||||
<SettingsInputSvideoIcon />
|
||||
</Avatar>
|
||||
</VersionAvatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText
|
||||
primary={
|
||||
<span style={styles.value}>
|
||||
<VersionLabel>
|
||||
{t("About.System.Version.Api", {
|
||||
version: data.api.version
|
||||
})}
|
||||
</span>
|
||||
</VersionLabel>
|
||||
}
|
||||
secondary={t("About.System.Version.LastReleaseDate", {
|
||||
date: lastReleaseDate.api
|
||||
|
@ -113,17 +103,17 @@ const SystemVersionComponent: React.FC<Props> = ({ data }) => {
|
|||
</ListItem>
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<Avatar sx={styles.versionAvatar}>
|
||||
<VersionAvatar>
|
||||
<WebAssetIcon />
|
||||
</Avatar>
|
||||
</VersionAvatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText
|
||||
primary={
|
||||
<span style={styles.value}>
|
||||
<VersionLabel>
|
||||
{t("About.System.Version.Frontend", {
|
||||
version: process.env.APP_VERSION ?? packageData.version
|
||||
})}
|
||||
</span>
|
||||
</VersionLabel>
|
||||
}
|
||||
secondary={t("About.System.Version.LastReleaseDate", {
|
||||
date: lastReleaseDate.frontend
|
||||
|
|
Loading…
Reference in New Issue