From 5090c323fb19f7cdf32bc4c05c4aede0fc640619 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Fri, 12 Aug 2022 10:06:30 +0300
Subject: [PATCH] Use css modules for the Controls component

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../__snapshots__/download-logs.test.tsx.snap         |  6 ++----
 .../components/dock/logs/controls.module.scss         | 11 +++++++++++
 src/renderer/components/dock/logs/controls.scss       | 11 -----------
 src/renderer/components/dock/logs/controls.tsx        |  7 +++----
 4 files changed, 16 insertions(+), 19 deletions(-)
 create mode 100644 src/renderer/components/dock/logs/controls.module.scss
 delete mode 100644 src/renderer/components/dock/logs/controls.scss

diff --git a/src/renderer/components/dock/logs/__test__/__snapshots__/download-logs.test.tsx.snap b/src/renderer/components/dock/logs/__test__/__snapshots__/download-logs.test.tsx.snap
index 0b7f3b72d2..7fa5ec8433 100644
--- a/src/renderer/components/dock/logs/__test__/__snapshots__/download-logs.test.tsx.snap
+++ b/src/renderer/components/dock/logs/__test__/__snapshots__/download-logs.test.tsx.snap
@@ -784,11 +784,9 @@ exports[`download logs options in pod logs dock tab when opening pod logs render
                 </div>
               </div>
               <div
-                class="LogControls flex gaps align-center justify-space-between wrap"
+                class="controls"
               >
-                <div
-                  class="time-range"
-                >
+                <div>
                   <span>
                     Logs from
                      
diff --git a/src/renderer/components/dock/logs/controls.module.scss b/src/renderer/components/dock/logs/controls.module.scss
new file mode 100644
index 0000000000..27eefd3dab
--- /dev/null
+++ b/src/renderer/components/dock/logs/controls.module.scss
@@ -0,0 +1,11 @@
+.controls {
+  @include hidden-scrollbar;
+
+  display: flex;
+  gap: var(--padding);
+  align-items: center;
+  justify-content: space-between;
+  flex-flow: row wrap;
+  background: var(--dockInfoBackground);
+  padding: var(--padding) calc(var(--padding) * 2);
+}
\ No newline at end of file
diff --git a/src/renderer/components/dock/logs/controls.scss b/src/renderer/components/dock/logs/controls.scss
deleted file mode 100644
index 1a5c3f751c..0000000000
--- a/src/renderer/components/dock/logs/controls.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-.LogControls {
-  @include hidden-scrollbar;
-
-  background: var(--dockInfoBackground);
-  padding: $padding $padding * 2;
-}
diff --git a/src/renderer/components/dock/logs/controls.tsx b/src/renderer/components/dock/logs/controls.tsx
index c78162f950..2bea8c8f4b 100644
--- a/src/renderer/components/dock/logs/controls.tsx
+++ b/src/renderer/components/dock/logs/controls.tsx
@@ -3,12 +3,11 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import "./controls.scss";
+import styles from "./controls.module.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
 
-import { cssNames } from "../../../utils";
 import { Checkbox } from "../../checkbox";
 import type { LogTabViewModel } from "./logs-view-model";
 import { withInjectables } from "@ogre-tools/injectable-react";
@@ -72,8 +71,8 @@ const NonInjectedLogControls = observer(({ openSaveFileDialog, model, callForLog
   };
 
   return (
-    <div className={cssNames("LogControls flex gaps align-center justify-space-between wrap")}>
-      <div className="time-range">
+    <div className={styles.controls}>
+      <div>
         {since && (
           <span>
             Logs from