Add macewan logo to chatbot

front-end/src/components/ChatHeader.js

@@ -1,3 +1,5 @@
+import ChatbotIcon from '../images/ChatbotMacewanIcon.png';
+
 /**
  * ChatHeader Component
  * Displays the chat header with a title and a button to clear the chat.
@@ -7,7 +9,13 @@
  */
 const ChatHeader = ({ clearChat }) => (
   <header>
-    <h3>MacEwan Assistant</h3>
+    <h3>
+      <img
+        src={ChatbotIcon}
+        alt="MacEwan Logo"
+        style={{ width: "125px",  marginRight: "8px" }}
+      />
+    </h3>
     <button onClick={clearChat} id="clear-btn" title="Clear chat">
       🗑️
     </button>

front-end/src/styles.css

@@ -5,7 +5,6 @@
   padding: 0;
   box-sizing: border-box;
   font-family: "Poppins", sans-serif;
-
 }
 
 body {
@@ -19,8 +18,8 @@ body {
 }
 
 #app-container {
-  background-image: url('./images/ExampleMacewanHomepage.jpg');
-  background-size: cover;
+  background-image: url("./images/ExampleMacewanHomepage.jpg");
+  background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   height: 100vh;
@@ -59,7 +58,8 @@ body {
   height: 50vh;
   background-color: white;
   border-radius: 1rem;
-  box-shadow: 0 0 128px rgba(0, 0, 0, 0.1), 0 32px 54px -48px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 50px 100px rgba(0, 0, 0, 0.7), 0 -20px 40px rgba(0, 0, 0, 0.3),
+    40px 0 80px rgba(0, 0, 0, 0.5), -20px 0 40px rgba(0, 0, 0, 0.3);
   transform: scale(0);
   opacity: 0;
   pointer-events: none;
@@ -115,7 +115,8 @@ body {
   flex-direction: column;
   gap: 0.5rem;
   word-wrap: break-word;
-  border-bottom: rgb(187, 187, 187) solid 1px;}
+  border-bottom: rgb(187, 187, 187) solid 1px;
+}
 
 .chat-area .chat {
   display: flex;
@@ -161,12 +162,12 @@ body {
   display: flex;
   gap: 1rem;
   background-color: white;
-  align-items: center;  
+  align-items: center;
 }
 
 .chatbot-container textarea {
   flex-grow: 1;
-  height: 2.5rem;
+  max-height: 2.5rem;
   border: 1px solid #ccc;
   outline: none;
   font-size: 1rem;
@@ -234,4 +235,11 @@ body {
     bottom: 5%;
     right: 5%;
   }
+
+  #app-container {
+    background-image: url("./images/ExampleMacewanHomepagePhone.jpeg");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
 }