rename message-panel to introduction-panel

client/src/components/Level.tsx

@@ -105,7 +105,7 @@ function Level() {
 
   const codeviewRef = useRef<HTMLDivElement>(null)
   const infoviewRef = useRef<HTMLDivElement>(null)
-  const messagePanelRef = useRef<HTMLDivElement>(null)
+  const introductionPanelRef = useRef<HTMLDivElement>(null)
 
   const [showSidePanel, setShowSidePanel] = useState(true)
 
@@ -117,7 +117,7 @@ function Level() {
 
   useEffect(() => {
     // Scroll to top when loading a new level
-    messagePanelRef.current!.scrollTo(0,0)
+    introductionPanelRef.current!.scrollTo(0,0)
   }, [levelId])
 
   const connection = React.useContext(ConnectionContext)
@@ -165,7 +165,7 @@ function Level() {
       </Drawer>
       <Grid container columnSpacing={{ xs: 1, sm: 2, md: 3 }} sx={{ flexGrow: 1, p: 3 }} className="main-grid">
         <Grid xs={8} className="main-panel">
-          <div ref={messagePanelRef} className="message-panel">
+          <div ref={introductionPanelRef} className="introduction-panel">
             <Markdown>{level?.data?.introduction}</Markdown>
           </div>
           <div className="exercise">

client/src/components/level.css

@@ -15,7 +15,7 @@
   flex-flow: column;
 }
 
-.message-panel {
+.introduction-panel {
   width: 100%;
 }
 
@@ -56,12 +56,12 @@ mjx-container[jax="CHTML"][display="true"] {
 
 
 /* Styling tables for Markdown */
-.message-panel table, .message-panel th, .message-panel td {
+.introduction-panel table, .introduction-panel th, .introduction-panel td {
   /* border: 1px solid rgb(0, 0, 0, 0.12); */
   border-collapse: collapse;
 }
 
-.message-panel th, .message-panel td {
+.introduction-panel th, .introduction-panel td {
   padding-left: .5em;
   padding-right: .5em;
 }
@@ -97,7 +97,7 @@ td code  {
   border: 1px solid rgb(230, 122, 0);
 }
 
-.message-panel {
+.introduction-panel {
   border: 1px solid rgb(192, 18, 178);
 }