From 9527bee77edbe9d3b80164a857d5cae106151c2c Mon Sep 17 00:00:00 2001
From: Alexander Bentkamp <bentkamp@gmail.com>
Date: Tue, 24 Jan 2023 10:40:10 +0100
Subject: [PATCH] rename message-panel to introduction-panel

---
 client/src/components/Level.tsx | 6 +++---
 client/src/components/level.css | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/client/src/components/Level.tsx b/client/src/components/Level.tsx
index 468acd0..aa3cf78 100644
--- a/client/src/components/Level.tsx
+++ b/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">
diff --git a/client/src/components/level.css b/client/src/components/level.css
index 8fed3d6..5d70d46 100644
--- a/client/src/components/level.css
+++ b/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);
 }