feature: Slightly nicer looking logs and diagnostics pages (#427)

webui.dev/index.html

@@ -48,7 +48,7 @@
 		</header>
 
 		<main title = "main content">
-			<section id = "contentLogs" title = "Logs" hidden>
+			<section id = "contentLogs" title = "Logs" class = "box-shadow" hidden>
 				<div class = "toolbar">
 					<input placeholder = "Search for action name" id = "logSearchBox" />
 					<button id = "searchLogsClear" title = "Clear search filter" disabled>X</button>
@@ -66,15 +66,15 @@
 				</table>
 			</section>
 
-			<section id = "contentDiagnostics" title = "Diagnostics" hidden>
+			<section id = "contentDiagnostics" title = "Diagnostics" class = "box-shadow" hidden>
 				<div id = "diagnostics" class = "ta-left">
 					<p><strong>Note:</strong> Diagnostics are only generated on OliveTin startup - they are not updated in real-time or when you refresh this page. They are intended as a "quick reference" to help you.</p>
 					<p>If you are having problems with OliveTin and want to raise a support request, please don't take a screenshot or copy text from this page, but instead it is highly recommended to include a <a href = "https://docs.olivetin.app/sosreport.html">sosreport</a> which is more detailed, and makes it easier to help you.</p>
 					<table>
 						<tbody>
-							<th colspan = "0">SSH</th>
+							<th colspan = "99">SSH</th>
 							<tr>
-								<td>Found Key</td>
+								<td width = "10%">Found Key</td>
 								<td id = "diagnostics-sshfoundkey">?</td>
 							</tr>
 

webui.dev/style.css

@@ -175,12 +175,11 @@ table {
   background-color: white;
   border-collapse: collapse;
   width: 100%;
-  box-shadow: 0 0 5px 0 #444;
 }
 
 th,
 td {
-  border: 1px solid #efefef;
+  border-top: 1px solid #efefef;
   text-align: left;
   padding: 0.6em;
 }
@@ -488,12 +487,20 @@ span.annotation-value {
   color: black;
 }
 
+.box-shadow {
+  box-shadow: 0 0 5px 0 #444;
+}
+
+.box-shadow p {
+  padding: .6em;
+  background-color: #fff;
+  margin: 0;
+}
+
 div.toolbar {
   padding: .4em;
   text-align: left;
-  background-color: #efefef;
-  border: 1px solid #999;
-  border-bottom: 0;
+  background-color: #fff;
   display: flex;
   flex-direction: row;
 }
@@ -575,6 +582,14 @@ div.display {
     color: white;
   }
 
+  .box-shadow {
+    box-shadow: 0 0 6px 0 #ccc;
+  }
+
+  .box-shadow p {
+    background-color: #222;
+  }
+
   dialog {
     background-color: #222;
     color: white;
@@ -628,7 +643,7 @@ div.display {
   table,
   td,
   th {
-    border: 1px solid gray;
+    border-top: 1px solid gray;
   }
 
   td,