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,6 +47,7 @@ const LogList: React.FC = () => {
         </div>
 
         {/* Tabs */}
+        <div className="log-nav-container">
           <div className="log-nav-wrapper">
             {["all", "info", "warning", "error"].map((type) => (
               <button
@@ -58,10 +60,15 @@ const LogList: React.FC = () => {
               </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 ? (
+            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">
@@ -71,7 +78,10 @@ const LogList: React.FC = () => {
                   </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

@@ -30,7 +30,7 @@
         gap: 6px;
         .icon {
           @include flex-center;
-          scale: .8;
+          scale: 0.8;
         }
       }
 
@@ -48,7 +48,9 @@
         }
       }
     }
-
+    .log-nav-container {
+      @include flex-space-between;
+      align-items: flex-end;
       .log-nav-wrapper {
         display: flex;
         gap: 6px;
@@ -63,6 +65,18 @@
           color: var(--text-button-color);
         }
       }
+      .clear-button{
+        margin: 0 6px;
+        padding: 4px 12px;
+        color: var(--text-disabled);
+        border-radius: #{$border-radius-large};
+        &:hover{
+          font-weight: 300;
+          color: var(--text-color);
+          background: var(--background-color-solid-gradient);
+        }
+      }
+    }
 
     .log-entry-wrapper {
       height: calc(100% - 80px);
@@ -108,5 +122,10 @@
         }
       }
     }
+    .no-log{
+      padding: 20px;
+      text-align: center;
+      color: var(--text-color);
+    }
   }
 }