Refactor SystemVersionComponent to update styling and add dtos to types

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<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