Fixing log tab layout colors (#1995)

* Making "since" date visible as bolded text

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fixing colors in log tab elements

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/dock/info-panel.scss

@@ -1,12 +1,16 @@
 .InfoPanel {
   @include hidden-scrollbar;
 
-  background: $dockInfoBackground;
-  padding: $padding $padding * 2;
+  background: var(--dockInfoBackground);
+  padding: var(--padding) calc(var(--padding) * 2);
   flex-shrink: 0;
 
   .Spinner {
-    margin-right: $padding;
+    margin-right: var(--padding);
+  }
+
+  .Badge {
+    background-color: var(--dockBadgeBackground);
   }
 
   > .controls {
@@ -15,8 +19,8 @@
 
     &:not(:empty) + .info {
       min-height: 25px;
-      padding-left: $padding;
-      padding-right: $padding;
+      padding-left: var(--padding);
+      padding-right: var(--padding);
     }
   }
 }

src/renderer/components/dock/log-controls.tsx

@@ -41,7 +41,12 @@ export const LogControls = observer((props: Props) => {
   return (
     <div className={cssNames("LogControls flex gaps align-center justify-space-between wrap")}>
       <div className="time-range">
-        {since && `Logs from ${new Date(since[0]).toLocaleString()}`}
+        {since && (
+          <span>
+            Logs from{" "}
+            <b>{new Date(since[0]).toLocaleString()}</b>
+          </span>
+        )}
       </div>
       <div className="flex gaps align-center">
         <Checkbox