feat: Update log display messages for clarity; enhance log navigation styles and layout

app/src/components/footer/Footer.tsx

@@ -38,7 +38,7 @@ const Footer: React.FC = () => {
                 <span className="log-message">{lastLog.message}</span>
               </>
             ) : (
-              "No logs yet."
+              "There are no logs to display at the moment."
             )}
           </button>
         </div>

app/src/components/ui/log/LogList.tsx

@@ -23,6 +23,7 @@ const LogList: React.FC = () => {
       className="log-list-container"
       onClick={() => setIsLogListVisible(false)}
     >
+      {/* eslint-disable-next-line */}
       <div
         className="log-list-wrapper"
         onClick={(e) => {
@@ -46,32 +47,41 @@ const LogList: React.FC = () => {
         </div>
 
         {/* Tabs */}
-        <div className="log-nav-wrapper">
-          {["all", "info", "warning", "error"].map((type) => (
-            <button
-              title="log-type"
-              key={type}
-              className={`log-nav ${selectedTab === type ? "active" : ""}`}
-              onClick={() => setSelectedTab(type as any)}
-            >
-              {`${type.charAt(0).toUpperCase() + type.slice(1)} Logs`}
-            </button>
-          ))}
+        <div className="log-nav-container">
+          <div className="log-nav-wrapper">
+            {["all", "info", "warning", "error"].map((type) => (
+              <button
+                title="log-type"
+                key={type}
+                className={`log-nav ${selectedTab === type ? "active" : ""}`}
+                onClick={() => setSelectedTab(type as any)}
+              >
+                {`${type.charAt(0).toUpperCase() + type.slice(1)} Logs`}
+              </button>
+            ))}
+          </div>
+          <button title="clear-btn" className="clear-button" onClick={clear}>
+            clear
+          </button>
         </div>
 
         {/* Log Entries */}
         <div className="log-entry-wrapper">
-          {filteredLogs.map((log) => (
-            <div key={log.id} className={`log-entry ${log.type}`}>
-              <div className="log-icon">{GetLogIcon(log.type)}</div>
-              <div className="log-entry-message-container">
-                <div className="log-entry-message">{log.message}</div>
-                <div className="message-time">
-                  {formatTimestamp(log.timestamp)}
+          {filteredLogs.length > 0 ? (
+            filteredLogs.map((log) => (
+              <div key={log.id} className={`log-entry ${log.type}`}>
+                <div className="log-icon">{GetLogIcon(log.type)}</div>
+                <div className="log-entry-message-container">
+                  <div className="log-entry-message">{log.message}</div>
+                  <div className="message-time">
+                    {formatTimestamp(log.timestamp)}
+                  </div>
                 </div>
               </div>
-            </div>
-          ))}
+            ))
+          ) : (
+            <div className="no-log">There are no logs to display at the moment.</div>
+          )}
         </div>
       </div>
     </div>