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;
+  background: var(--dockInfoBackground);
-  padding: $padding $padding * 2;
+  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-left: var(--padding);
-      padding-right: $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 {

src/renderer/themes/lens-dark.json

@@ -65,6 +65,7 @@
     "dockEditorKeyword": "#ffffff",
     "dockEditorComment": "#808080",
     "dockEditorActiveLineBackground": "#3a3d41",
+    "dockBadgeBackground": "#36393e",
     "logsBackground": "#000000",
     "logsForeground": "#ffffff",
     "logRowHoverBackground": "#35373a",
@@ -114,6 +115,7 @@
     "lineProgressBackground": "#414448",
     "radioActiveBackground": "#36393e",
     "menuActiveBackground": "#36393e",
+    "menuSelectedOptionBgc": "#36393e",
     "scrollBarColor": "#5f6064"
   }
 }

src/renderer/themes/lens-light.json

@@ -59,13 +59,14 @@
     "colorVague": "#ededed",
     "colorTerminated": "#9dabb5",
     "dockHeadBackground": "#e8e8e8",
-    "dockInfoBackground": "#e8e8e8",
+    "dockInfoBackground": "#f3f3f3",
     "dockInfoBorderColor": "#c9cfd3",
     "dockEditorBackground": "#24292e",
     "dockEditorTag": "#8e97a3",
     "dockEditorKeyword": "#ffffff",
     "dockEditorComment": "#808080",
     "dockEditorActiveLineBackground": "#3a3d41",
+    "dockBadgeBackground": "#dedede",
     "logsBackground": "#24292e",
     "logsForeground": "#ffffff",
     "logRowHoverBackground": "#35373a",
@@ -115,6 +116,7 @@
     "lineProgressBackground": "#e8e8e8",
     "radioActiveBackground": "#f1f1f1",
     "menuActiveBackground": "#e8e8e8",
+    "menuSelectedOptionBgc": "#e8e8e8",
     "scrollBarColor": "#bbbbbb",
     "canvasBackground": "#24292e"
   }

src/renderer/themes/theme-vars.scss

@@ -67,6 +67,7 @@ $helmDescriptionPreColor: var(--helmDescriptionPreColor);
 $dockHeadBackground: var(--dockHeadBackground);
 $dockInfoBackground: var(--dockInfoBackground);
 $dockInfoBorderColor: var(--dockInfoBorderColor);
+$dockBadgeBackground: var(--dockBadgeBackground);
 
 // Terminal
 $terminalBackground: var(--terminalBackground);
@@ -130,3 +131,4 @@ $selectOptionHoveredColor: var(--selectOptionHoveredColor);
 $lineProgressBackground: var(--lineProgressBackground);
 $radioActiveBackground: var(--radioActiveBackground);
 $menuActiveBackground: var(--menuActiveBackground);
+$menuSelectedOptionBgc: var(--menuSelectedOptionBgc);