Fix Logo to Navbar (#18)

* chore: add logo to navbar, remove from dashboard. * clean up comments
TorturedEngineersDept · Jun 16, 2024 · 9e3d0f7 · 9e3d0f7
1 parent 1d94e69
commit 9e3d0f7
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 3 deletions.
diff --git a/server/website/src/components/Navbar.css b/server/website/src/components/Navbar.css
@@ -1,3 +1,4 @@
+/* Navbar.css */
 .navbar {
     background-color: #fff;
     border-bottom: 1px solid #ddd;
@@ -37,6 +38,17 @@
     color: black;
 }
 
+.logo-container {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+}
+
+.navbar-logo {
+    height: 40px;
+    /* Adjust the height as needed */
+}
+
 .login-container {
     display: flex;
     align-items: center;

diff --git a/server/website/src/components/Navbar.js b/server/website/src/components/Navbar.js
@@ -4,6 +4,7 @@ import { NavLink } from 'react-router-dom';
 import './Navbar.css';
 import { handleLoginSubmit as login } from '../utils/loginUtils';
 import { GlobalContext } from '../context/GlobalState';
+import logo from '../images/logo.png'; // Import the logo
 
 const Navbar = () => {
     const [botId, setBotId] = useState('');
@@ -36,6 +37,9 @@ const Navbar = () => {
                     </NavLink>
                 </li>
             </ul>
+            <div className="logo-container">
+                <img src={logo} alt="logo" className="navbar-logo" />
+            </div>
             <div className="login-container">
                 <form onSubmit={handleLogin} className="login-form">
                     <input

diff --git a/server/website/src/pages/Dashboard.js b/server/website/src/pages/Dashboard.js
@@ -1,3 +1,4 @@
+// src/components/Dashboard.js
 import React, { useState, useEffect, useContext } from 'react';
 import './Dashboard.css';
 import CanvasJSReact from '@canvasjs/react-charts';
@@ -7,8 +8,6 @@ import { initializeMQTT, sendTuning, sendPingMessage } from '../utils/mqttServic
 import { GlobalContext } from '../context/GlobalState';
 import BatteryGraph from '../components/BatteryGraph';
 import PowerGraph from '../components/PowerGraph';
-import logo from '../images/logo.png';
-
 
 const CanvasJSChart = CanvasJSReact.CanvasJSChart;
 
@@ -195,7 +194,6 @@ const Dashboard = () => {
                     <h2>Server Connection</h2>
                     <button className="test-button" onClick={handlePingTest}>Test Server Connectivity</button>
                     <p>RTT: {rtt !== null ? `${rtt} ms` : '-- ms'}</p>
-                    <img src={logo} alt='logo' className='logo' /> {/* Use the imported image */}
                 </div>
             </div>
         </div>