ACHIEVEMENTS: Support achievements with no matching Steam achievement (#1953)

src/Achievements/AchievementsRoot.tsx

@@ -1,26 +1,30 @@
 import React from "react";
 
-import { Theme } from "@mui/material/styles";
 import { AchievementList } from "./AchievementList";
 import { achievements } from "./Achievements";
-import { Typography } from "@mui/material";
+import { Box, Typography } from "@mui/material";
 import { Player } from "@player";
 import { makeStyles } from "tss-react/mui";
 
-const useStyles = makeStyles()((theme: Theme) => ({
+const useStyles = makeStyles()({
   root: {
     width: 50,
-    padding: theme.spacing(2),
     userSelect: "none",
   },
-}));
+});
 
 export function AchievementsRoot(): JSX.Element {
   const { classes } = useStyles();
   return (
     <div className={classes.root} style={{ width: "90%" }}>
       <Typography variant="h4">Achievements</Typography>
-      <AchievementList achievements={Object.values(achievements)} playerAchievements={Player.achievements} />
+      <Box mx={2}>
+        <Typography>
+          Achievements are persistent rewards for various actions and challenges. A limited number of Bitburner
+          achievements have corresponding achievements in Steam.
+        </Typography>
+        <AchievementList achievements={Object.values(achievements)} playerAchievements={Player.achievements} />
+      </Box>
     </div>
   );
 }