diff --git a/frontend/src/features/about/system/SystemVersionComponent.tsx b/frontend/src/features/about/system/SystemVersionComponent.tsx index 39fa583..a9d317f 100644 --- a/frontend/src/features/about/system/SystemVersionComponent.tsx +++ b/frontend/src/features/about/system/SystemVersionComponent.tsx @@ -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: { - fontSize: "0.9rem", - fontWeight: theme.typography.fontWeightMedium - }, - versionAvatar: { - backgroundColor: theme.palette.secondary.main - } -}); +const VersionAvatar = styled(Avatar)(({ theme }) => ({ + backgroundColor: theme.palette.secondary.main +})); + +const VersionLabel = styled("span")(({ theme }) => ({ + fontSize: "0.9rem", + fontWeight: theme.typography.fontWeightMedium +})); type Props = { data: dtos.SystemVersion; @@ -35,7 +26,6 @@ type Props = { const SystemVersionComponent: React.FC = ({ 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 = ({ data }) => { > - + - + + {t("About.System.Version.Server", { version: data.server.version })} - + } secondary={t("About.System.Version.LastReleaseDate", { date: lastReleaseDate.server @@ -94,17 +84,17 @@ const SystemVersionComponent: React.FC = ({ data }) => { - + - + + {t("About.System.Version.Api", { version: data.api.version })} - + } secondary={t("About.System.Version.LastReleaseDate", { date: lastReleaseDate.api @@ -113,17 +103,17 @@ const SystemVersionComponent: React.FC = ({ data }) => { - + - + + {t("About.System.Version.Frontend", { version: process.env.APP_VERSION ?? packageData.version })} - + } secondary={t("About.System.Version.LastReleaseDate", { date: lastReleaseDate.frontend