css

client/src/components/Level.tsx

@@ -179,9 +179,9 @@ function PlayableLevel({worldId, levelId}) {
     <Split minSize={0} snapOffset={200} sizes={[50, 25, 25]} className={`app-content level ${level.isLoading ? 'hidden' : ''}`}>
       <div className="exercise-panel">
         <div ref={introductionPanelRef} className="introduction-panel">
-          <Alert severity="info" sx={{ mt: 1 }}>
+          <div className="message info">
             <Markdown>{level?.data?.introduction}</Markdown>
-          </Alert>
+          </div>
         </div>
         <div className="exercise">
           {/* <h4>Aufgabe:</h4> */}
@@ -205,9 +205,9 @@ function PlayableLevel({worldId, levelId}) {
         </EditorContext.Provider>
 
         {completed && <div className="conclusion">
-          <Alert severity="info" sx={{ mt: 1 }}>
+          <div className="message info">
             <Markdown>{level?.data?.conclusion}</Markdown>
-          </Alert>
+          </div>
           {levelId >= gameInfo.data?.worldSize[worldId] ?
           <Button to={`/`}><FontAwesomeIcon icon={faHome} /></Button> :
           <Button to={`/world/${worldId}/level/${levelId + 1}`}>
@@ -237,11 +237,11 @@ function Introduction({worldId}) {
     <LevelAppBar isLoading={gameInfo.isLoading} levelTitle="Einführung" worldId={worldId} levelId={0} />
     <div style={gameInfo.isLoading ? {display: "none"} : null} className="exercise-panel">
       <div className="introduction-panel">
-        <Alert severity="info" sx={{ mt: 1 }}>
+        <div className="message info">
           <Markdown>
             {gameInfo.data?.worlds.nodes[worldId].introduction}
           </Markdown>
-        </Alert>
+        </div>
       </div>
       <div className="conclusion">
         {0 == gameInfo.data?.worldSize[worldId] ?

client/src/components/infoview/hints.tsx

@@ -4,7 +4,7 @@ import { Alert, FormControlLabel, Switch } from '@mui/material';
 import Markdown from '../Markdown';
 
 function Hint({hint} : {hint: GameHint}) {
-  return <Alert severity="info" sx={{ mt: 1 }}><Markdown>{hint.text}</Markdown></Alert>
+  return <div className="message info"><Markdown>{hint.text}</Markdown></div>
 }
 
 export function Hints({hints} : {hints: GameHint[]}) {

client/src/components/infoview/infoview.css

@@ -4,9 +4,9 @@
   padding: 5px 10px;
   border-radius: 3px 3px 3px 3px;
 }
-.message.information {
-  color: #059;
-  background-color: #BEF;
+.message.info {
+  /* color: #059; */
+  background-color: #DDF6FF;
 }
 .message.warning {
   color: #9F6000;