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

src/renderer/components/select/select.scss

@@ -3,11 +3,9 @@
 
 html {
   $menuBackgroundColor: $contentColor;
-  $menuSelectedOptionBgc: $layoutBackground;
 
   --select-menu-bgc: #{$menuBackgroundColor};
   --select-menu-border-color: #{$halfGray};
-  --select-option-selected-bgc: #{$menuSelectedOptionBgc};
   --select-option-selected-color: #{$selectOptionHoveredColor};
   --select-option-focused-bgc: #{$colorInfo};
   --select-option-focused-color: #{$textColorAccent};
@@ -95,7 +93,7 @@ html {
       }
 
       &--is-selected {
-        background: var(--select-option-selected-bgc);
+        background: var(--menuSelectedOptionBgc);
         color: var(--select-option-selected-color);
       }
 
@@ -148,7 +146,6 @@ html {
     &.theme-light {
       --select-menu-bgc: white;
       --select-option-selected-color: $textColorSecondary;
-      --select-option-selected-bgc: $textColorSecondary;
 
       .Select {
         &__multi-value {