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 SystemVersionComponent to update styling and add dtos to types

master^2
Tudor Stanciu 2024-11-10 02:27:30 +02:00
parent 5f234938b8
commit 9389058b1f
1 changed files with 21 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
frontend/src/features/about/system/SystemVersionComponent.tsx
View File

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