Merge pull request #36 from fahad-ali1/Fahad_branch

Adds macewan logo to chatbot
fahad-ali1 · Jan 9, 2025 · 10d8a24 · 10d8a24
2 parents 09de852 + e1b307a
commit 10d8a24
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 2 deletions.
diff --git a/front-end/src/components/ChatHeader.js b/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>

diff --git a/front-end/src/images/ChatbotMacewanIcon.png b/front-end/src/images/ChatbotMacewanIcon.png
diff --git a/front-end/src/images/ExampleMacewanHomepagePhone.jpeg b/front-end/src/images/ExampleMacewanHomepagePhone.jpeg
diff --git a/front-end/src/styles.css b/front-end/src/styles.css
@@ -167,7 +167,7 @@ body {
 
 .chatbot-container textarea {
   flex-grow: 1;
-  height: 2.5rem;
+  max-height: 2.5rem;
   border: 1px solid #ccc;
   outline: none;
   font-size: 1rem;
@@ -235,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;
+  }
 }