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">
+        <div className="log-nav-container">
-          {["all", "info", "warning", "error"].map((type) => (
+          <div className="log-nav-wrapper">
-            <button
+            {["all", "info", "warning", "error"].map((type) => (
-              title="log-type"
+              <button
-              key={type}
+                title="log-type"
-              className={`log-nav ${selectedTab === type ? "active" : ""}`}
+                key={type}
-              onClick={() => setSelectedTab(type as any)}
+                className={`log-nav ${selectedTab === type ? "active" : ""}`}
-            >
+                onClick={() => setSelectedTab(type as any)}
-              {`${type.charAt(0).toUpperCase() + type.slice(1)} Logs`}
+              >
-            </button>
+                {`${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) => (
+          {filteredLogs.length > 0 ? (
-            <div key={log.id} className={`log-entry ${log.type}`}>
+            filteredLogs.map((log) => (
-              <div className="log-icon">{GetLogIcon(log.type)}</div>
+              <div key={log.id} className={`log-entry ${log.type}`}>
-              <div className="log-entry-message-container">
+                <div className="log-icon">{GetLogIcon(log.type)}</div>
-                <div className="log-entry-message">{log.message}</div>
+                <div className="log-entry-message-container">
-                <div className="message-time">
+                  <div className="log-entry-message">{log.message}</div>
-                  {formatTimestamp(log.timestamp)}
+                  <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>

app/src/styles/components/logs/logs.scss

@@ -28,9 +28,9 @@
         display: flex;
         align-items: center;
         gap: 6px;
-        .icon{
+        .icon {
           @include flex-center;
-          scale: .8;
+          scale: 0.8;
         }
       }
 
@@ -43,24 +43,38 @@
         svg {
           scale: 1.6;
         }
-        &:hover{
+        &:hover {
           background: var(--background-color);
         }
       }
     }
+    .log-nav-container {
+      @include flex-space-between;
+      align-items: flex-end;
+      .log-nav-wrapper {
+        display: flex;
+        gap: 6px;
 
-    .log-nav-wrapper {
+        .log-nav {
-      display: flex;
+          padding: 8px 16px;
-      gap: 6px;
+          border-radius: 19px;
+        }
 
-      .log-nav {
+        .log-nav.active {
-        padding: 8px 16px;
+          background-color: var(--background-color-accent);
-        border-radius: 19px;
+          color: var(--text-button-color);
+        }
       }
-
+      .clear-button{
-      .log-nav.active {
+        margin: 0 6px;
-        background-color: var(--background-color-accent);
+        padding: 4px 12px;
-        color: var(--text-button-color);
+        color: var(--text-disabled);
+        border-radius: #{$border-radius-large};
+        &:hover{
+          font-weight: 300;
+          color: var(--text-color);
+          background: var(--background-color-solid-gradient);
+        }
       }
     }
 
@@ -98,7 +112,7 @@
             text-wrap: nowrap;
             height: 100%;
           }
-          .log-entry-message{
+          .log-entry-message {
             width: 100%;
           }
         }
@@ -108,5 +122,10 @@
         }
       }
     }
+    .no-log{
+      padding: 20px;
+      text-align: center;
+      color: var(--text-color);
+    }
   }
 }