css for introduction panel

client/src/components/level.css

@@ -251,3 +251,10 @@ td code  {
   /* border: 3px solid #5191d1; */
   box-shadow: .0em .0em .4em .1em var(--clr-primary);
 }
+
+.introduction-panel {
+  max-width: 900px;
+  width: 80%;
+  margin-left: auto;
+  margin-right: auto;
+}

client/src/components/level.tsx

@@ -336,28 +336,24 @@ function PlayableLevel({worldId, levelId}) {
 
 export default Level
 
+/** The site with the introduction text of a world */
 function Introduction({worldId}) {
   const gameId = React.useContext(GameIdContext)
   const gameInfo = useGetGameInfoQuery({game: gameId})
 
   return <>
     <div style={gameInfo.isLoading ? null : {display: "none"}} className="app-content loading"><CircularProgress /></div>
-    <LevelAppBar isLoading={gameInfo.isLoading} levelTitle="Einführung" worldId={worldId} levelId={0} />
+    <LevelAppBar isLoading={gameInfo.isLoading} levelTitle="Introduction" worldId={worldId} levelId={0} />
-    <div style={gameInfo.isLoading ? {display: "none"} : null} className="exercise-panel">
+    <div style={gameInfo.isLoading ? {display: "none"} : null} className="introduction-panel">
-      <div className="introduction-panel">
+      <Markdown>
-        <div className="message information">
+        {gameInfo.data?.worlds.nodes[worldId].introduction}
-            <Markdown>
+      </Markdown>
-              {gameInfo.data?.worlds.nodes[worldId].introduction}
+      {gameInfo.data?.worldSize[worldId] == 0 ?
-            </Markdown>
-          </div>
-      </div>
-      <div className="conclusion">
-        {0 == gameInfo.data?.worldSize[worldId] ?
         <Button to={`/${gameId}`}><FontAwesomeIcon icon={faHome} /></Button> :
         <Button to={`/${gameId}/world/${worldId}/level/1`}>
           Start&nbsp;<FontAwesomeIcon icon={faArrowRight} />
-        </Button>}
+        </Button>
-      </div>
+      }
     </div>
   </>
 }