From 8349d6aa4a299009dd18c85950f89c97f5f59fde Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Thu, 16 Jun 2022 02:38:10 +0300
Subject: [PATCH] Fix html font size and adjust usage of rem units (#5641)

* Leave default browser font-size for the html

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

* Fix preferences helm repos layout

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

* Adjust usage of rem units

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

* Adjust namespace select filter option sizes

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

* Fixing ToBottom btn sizing

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

* Fixing Remove Cluster dialog sizing

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

* Fixing catalog sidebar title font-size

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

* Fix Notice sizing

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

* Update snapshots

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

* Update more snapshots

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 ...elm-repository-in-preferences.test.ts.snap | 216 ++++++++--------
 ...tory-from-list-in-preferences.test.ts.snap | 240 ++++++++++--------
 ...m-repositories-in-preferences.test.ts.snap |  48 ++--
 ...ive-repository-in-preferences.test.ts.snap |  48 ++--
 .../+catalog/catalog-menu.module.scss         |   7 +-
 .../components/+extensions/notice.module.scss |   6 +-
 .../+namespaces/namespace-select-filter.scss  |   2 +
 .../helm-charts/helm-charts.module.scss       |  14 +-
 .../helm-charts/helm-repositories.tsx         |  12 +-
 .../+preferences/removable-item.module.scss   |   5 +-
 src/renderer/components/app.scss              |   3 +
 .../delete-cluster-dialog/view.module.scss    |  20 +-
 .../components/delete-cluster-dialog/view.tsx |   2 +-
 .../components/dock/dock-tab.module.scss      |   2 +-
 .../components/dock/logs/to-bottom.tsx        |   2 +-
 .../layout/sidebar-cluster.module.scss        |   7 +-
 .../layout/top-bar/top-bar.module.scss        |  12 +-
 .../components/switch/switch.module.scss      |   4 +-
 18 files changed, 364 insertions(+), 286 deletions(-)

diff --git a/src/behaviours/helm-charts/__snapshots__/add-custom-helm-repository-in-preferences.test.ts.snap b/src/behaviours/helm-charts/__snapshots__/add-custom-helm-repository-in-preferences.test.ts.snap
index 89c9537585..21803cf04a 100644
--- a/src/behaviours/helm-charts/__snapshots__/add-custom-helm-repository-in-preferences.test.ts.snap
+++ b/src/behaviours/helm-charts/__snapshots__/add-custom-helm-repository-in-preferences.test.ts.snap
@@ -886,18 +886,20 @@ exports[`add custom helm repository in preferences when navigating to preference
                     class="repos"
                   >
                     <div
-                      class="item flex gaps align-center justify-space-between mt-3"
+                      class="item flex gaps align-center justify-space-between repo"
                     >
-                      <div
-                        class="repoName"
-                        data-testid="helm-repository-Some active repository"
-                      >
-                        Some active repository
-                      </div>
-                      <div
-                        class="repoUrl"
-                      >
-                        some-url
+                      <div>
+                        <div
+                          class="repoName"
+                          data-testid="helm-repository-Some active repository"
+                        >
+                          Some active repository
+                        </div>
+                        <div
+                          class="repoUrl"
+                        >
+                          some-url
+                        </div>
                       </div>
                       <i
                         class="Icon material interactive focusable"
@@ -1370,18 +1372,20 @@ exports[`add custom helm repository in preferences when navigating to preference
                     class="repos"
                   >
                     <div
-                      class="item flex gaps align-center justify-space-between mt-3"
+                      class="item flex gaps align-center justify-space-between repo"
                     >
-                      <div
-                        class="repoName"
-                        data-testid="helm-repository-Some active repository"
-                      >
-                        Some active repository
-                      </div>
-                      <div
-                        class="repoUrl"
-                      >
-                        some-url
+                      <div>
+                        <div
+                          class="repoName"
+                          data-testid="helm-repository-Some active repository"
+                        >
+                          Some active repository
+                        </div>
+                        <div
+                          class="repoUrl"
+                        >
+                          some-url
+                        </div>
                       </div>
                       <i
                         class="Icon material interactive focusable"
@@ -1963,18 +1967,20 @@ exports[`add custom helm repository in preferences when navigating to preference
                     class="repos"
                   >
                     <div
-                      class="item flex gaps align-center justify-space-between mt-3"
+                      class="item flex gaps align-center justify-space-between repo"
                     >
-                      <div
-                        class="repoName"
-                        data-testid="helm-repository-Some active repository"
-                      >
-                        Some active repository
-                      </div>
-                      <div
-                        class="repoUrl"
-                      >
-                        some-url
+                      <div>
+                        <div
+                          class="repoName"
+                          data-testid="helm-repository-Some active repository"
+                        >
+                          Some active repository
+                        </div>
+                        <div
+                          class="repoUrl"
+                        >
+                          some-url
+                        </div>
                       </div>
                       <i
                         class="Icon material interactive focusable"
@@ -2455,18 +2461,20 @@ exports[`add custom helm repository in preferences when navigating to preference
                     class="repos"
                   >
                     <div
-                      class="item flex gaps align-center justify-space-between mt-3"
+                      class="item flex gaps align-center justify-space-between repo"
                     >
-                      <div
-                        class="repoName"
-                        data-testid="helm-repository-Some active repository"
-                      >
-                        Some active repository
-                      </div>
-                      <div
-                        class="repoUrl"
-                      >
-                        some-url
+                      <div>
+                        <div
+                          class="repoName"
+                          data-testid="helm-repository-Some active repository"
+                        >
+                          Some active repository
+                        </div>
+                        <div
+                          class="repoUrl"
+                        >
+                          some-url
+                        </div>
                       </div>
                       <i
                         class="Icon material interactive focusable"
@@ -3048,18 +3056,20 @@ exports[`add custom helm repository in preferences when navigating to preference
                     class="repos"
                   >
                     <div
-                      class="item flex gaps align-center justify-space-between mt-3"
+                      class="item flex gaps align-center justify-space-between repo"
                     >
-                      <div
-                        class="repoName"
-                        data-testid="helm-repository-Some active repository"
-                      >
-                        Some active repository
-                      </div>
-                      <div
-                        class="repoUrl"
-                      >
-                        some-url
+                      <div>
+                        <div
+                          class="repoName"
+                          data-testid="helm-repository-Some active repository"
+                        >
+                          Some active repository
+                        </div>
+                        <div
+                          class="repoUrl"
+                        >
+                          some-url
+                        </div>
                       </div>
                       <i
                         class="Icon material interactive focusable"
@@ -3817,18 +3827,20 @@ exports[`add custom helm repository in preferences when navigating to preference
                     class="repos"
                   >
                     <div
-                      class="item flex gaps align-center justify-space-between mt-3"
+                      class="item flex gaps align-center justify-space-between repo"
                     >
-                      <div
-                        class="repoName"
-                        data-testid="helm-repository-Some active repository"
-                      >
-                        Some active repository
-                      </div>
-                      <div
-                        class="repoUrl"
-                      >
-                        some-url
+                      <div>
+                        <div
+                          class="repoName"
+                          data-testid="helm-repository-Some active repository"
+                        >
+                          Some active repository
+                        </div>
+                        <div
+                          class="repoUrl"
+                        >
+                          some-url
+                        </div>
                       </div>
                       <i
                         class="Icon material interactive focusable"
@@ -4410,18 +4422,20 @@ exports[`add custom helm repository in preferences when navigating to preference
                     class="repos"
                   >
                     <div
-                      class="item flex gaps align-center justify-space-between mt-3"
+                      class="item flex gaps align-center justify-space-between repo"
                     >
-                      <div
-                        class="repoName"
-                        data-testid="helm-repository-Some active repository"
-                      >
-                        Some active repository
-                      </div>
-                      <div
-                        class="repoUrl"
-                      >
-                        some-url
+                      <div>
+                        <div
+                          class="repoName"
+                          data-testid="helm-repository-Some active repository"
+                        >
+                          Some active repository
+                        </div>
+                        <div
+                          class="repoUrl"
+                        >
+                          some-url
+                        </div>
                       </div>
                       <i
                         class="Icon material interactive focusable"
@@ -5179,18 +5193,20 @@ exports[`add custom helm repository in preferences when navigating to preference
                     class="repos"
                   >
                     <div
-                      class="item flex gaps align-center justify-space-between mt-3"
+                      class="item flex gaps align-center justify-space-between repo"
                     >
-                      <div
-                        class="repoName"
-                        data-testid="helm-repository-Some active repository"
-                      >
-                        Some active repository
-                      </div>
-                      <div
-                        class="repoUrl"
-                      >
-                        some-url
+                      <div>
+                        <div
+                          class="repoName"
+                          data-testid="helm-repository-Some active repository"
+                        >
+                          Some active repository
+                        </div>
+                        <div
+                          class="repoUrl"
+                        >
+                          some-url
+                        </div>
                       </div>
                       <i
                         class="Icon material interactive focusable"
@@ -5772,18 +5788,20 @@ exports[`add custom helm repository in preferences when navigating to preference
                     class="repos"
                   >
                     <div
-                      class="item flex gaps align-center justify-space-between mt-3"
+                      class="item flex gaps align-center justify-space-between repo"
                     >
-                      <div
-                        class="repoName"
-                        data-testid="helm-repository-Some active repository"
-                      >
-                        Some active repository
-                      </div>
-                      <div
-                        class="repoUrl"
-                      >
-                        some-url
+                      <div>
+                        <div
+                          class="repoName"
+                          data-testid="helm-repository-Some active repository"
+                        >
+                          Some active repository
+                        </div>
+                        <div
+                          class="repoUrl"
+                        >
+                          some-url
+                        </div>
                       </div>
                       <i
                         class="Icon material interactive focusable"
diff --git a/src/behaviours/helm-charts/__snapshots__/add-helm-repository-from-list-in-preferences.test.ts.snap b/src/behaviours/helm-charts/__snapshots__/add-helm-repository-from-list-in-preferences.test.ts.snap
index 68e904337a..82c9bfb7e4 100644
--- a/src/behaviours/helm-charts/__snapshots__/add-helm-repository-from-list-in-preferences.test.ts.snap
+++ b/src/behaviours/helm-charts/__snapshots__/add-helm-repository-from-list-in-preferences.test.ts.snap
@@ -886,18 +886,20 @@ exports[`add helm repository from list in preferences when navigating to prefere
                     class="repos"
                   >
                     <div
-                      class="item flex gaps align-center justify-space-between mt-3"
+                      class="item flex gaps align-center justify-space-between repo"
                     >
-                      <div
-                        class="repoName"
-                        data-testid="helm-repository-Some already active repository"
-                      >
-                        Some already active repository
-                      </div>
-                      <div
-                        class="repoUrl"
-                      >
-                        some-url
+                      <div>
+                        <div
+                          class="repoName"
+                          data-testid="helm-repository-Some already active repository"
+                        >
+                          Some already active repository
+                        </div>
+                        <div
+                          class="repoUrl"
+                        >
+                          some-url
+                        </div>
                       </div>
                       <i
                         class="Icon material interactive focusable"
@@ -1372,18 +1374,20 @@ exports[`add helm repository from list in preferences when navigating to prefere
                     class="repos"
                   >
                     <div
-                      class="item flex gaps align-center justify-space-between mt-3"
+                      class="item flex gaps align-center justify-space-between repo"
                     >
-                      <div
-                        class="repoName"
-                        data-testid="helm-repository-Some already active repository"
-                      >
-                        Some already active repository
-                      </div>
-                      <div
-                        class="repoUrl"
-                      >
-                        some-url
+                      <div>
+                        <div
+                          class="repoName"
+                          data-testid="helm-repository-Some already active repository"
+                        >
+                          Some already active repository
+                        </div>
+                        <div
+                          class="repoUrl"
+                        >
+                          some-url
+                        </div>
                       </div>
                       <i
                         class="Icon material interactive focusable"
@@ -1907,18 +1911,20 @@ exports[`add helm repository from list in preferences when navigating to prefere
                     class="repos"
                   >
                     <div
-                      class="item flex gaps align-center justify-space-between mt-3"
+                      class="item flex gaps align-center justify-space-between repo"
                     >
-                      <div
-                        class="repoName"
-                        data-testid="helm-repository-Some already active repository"
-                      >
-                        Some already active repository
-                      </div>
-                      <div
-                        class="repoUrl"
-                      >
-                        some-url
+                      <div>
+                        <div
+                          class="repoName"
+                          data-testid="helm-repository-Some already active repository"
+                        >
+                          Some already active repository
+                        </div>
+                        <div
+                          class="repoUrl"
+                        >
+                          some-url
+                        </div>
                       </div>
                       <i
                         class="Icon material interactive focusable"
@@ -2391,18 +2397,20 @@ exports[`add helm repository from list in preferences when navigating to prefere
                     class="repos"
                   >
                     <div
-                      class="item flex gaps align-center justify-space-between mt-3"
+                      class="item flex gaps align-center justify-space-between repo"
                     >
-                      <div
-                        class="repoName"
-                        data-testid="helm-repository-Some already active repository"
-                      >
-                        Some already active repository
-                      </div>
-                      <div
-                        class="repoUrl"
-                      >
-                        some-url
+                      <div>
+                        <div
+                          class="repoName"
+                          data-testid="helm-repository-Some already active repository"
+                        >
+                          Some already active repository
+                        </div>
+                        <div
+                          class="repoUrl"
+                        >
+                          some-url
+                        </div>
                       </div>
                       <i
                         class="Icon material interactive focusable"
@@ -3354,18 +3362,20 @@ exports[`add helm repository from list in preferences when navigating to prefere
                     class="repos"
                   >
                     <div
-                      class="item flex gaps align-center justify-space-between mt-3"
+                      class="item flex gaps align-center justify-space-between repo"
                     >
-                      <div
-                        class="repoName"
-                        data-testid="helm-repository-Some already active repository"
-                      >
-                        Some already active repository
-                      </div>
-                      <div
-                        class="repoUrl"
-                      >
-                        some-url
+                      <div>
+                        <div
+                          class="repoName"
+                          data-testid="helm-repository-Some already active repository"
+                        >
+                          Some already active repository
+                        </div>
+                        <div
+                          class="repoUrl"
+                        >
+                          some-url
+                        </div>
                       </div>
                       <i
                         class="Icon material interactive focusable"
@@ -3382,18 +3392,20 @@ exports[`add helm repository from list in preferences when navigating to prefere
                       </i>
                     </div>
                     <div
-                      class="item flex gaps align-center justify-space-between mt-3"
+                      class="item flex gaps align-center justify-space-between repo"
                     >
-                      <div
-                        class="repoName"
-                        data-testid="helm-repository-Some to be added repository"
-                      >
-                        Some to be added repository
-                      </div>
-                      <div
-                        class="repoUrl"
-                      >
-                        some-other-url
+                      <div>
+                        <div
+                          class="repoName"
+                          data-testid="helm-repository-Some to be added repository"
+                        >
+                          Some to be added repository
+                        </div>
+                        <div
+                          class="repoUrl"
+                        >
+                          some-other-url
+                        </div>
                       </div>
                       <i
                         class="Icon material interactive focusable"
@@ -3868,18 +3880,20 @@ exports[`add helm repository from list in preferences when navigating to prefere
                     class="repos"
                   >
                     <div
-                      class="item flex gaps align-center justify-space-between mt-3"
+                      class="item flex gaps align-center justify-space-between repo"
                     >
-                      <div
-                        class="repoName"
-                        data-testid="helm-repository-Some already active repository"
-                      >
-                        Some already active repository
-                      </div>
-                      <div
-                        class="repoUrl"
-                      >
-                        some-url
+                      <div>
+                        <div
+                          class="repoName"
+                          data-testid="helm-repository-Some already active repository"
+                        >
+                          Some already active repository
+                        </div>
+                        <div
+                          class="repoUrl"
+                        >
+                          some-url
+                        </div>
                       </div>
                       <i
                         class="Icon material interactive focusable"
@@ -3896,18 +3910,20 @@ exports[`add helm repository from list in preferences when navigating to prefere
                       </i>
                     </div>
                     <div
-                      class="item flex gaps align-center justify-space-between mt-3"
+                      class="item flex gaps align-center justify-space-between repo"
                     >
-                      <div
-                        class="repoName"
-                        data-testid="helm-repository-Some to be added repository"
-                      >
-                        Some to be added repository
-                      </div>
-                      <div
-                        class="repoUrl"
-                      >
-                        some-other-url
+                      <div>
+                        <div
+                          class="repoName"
+                          data-testid="helm-repository-Some to be added repository"
+                        >
+                          Some to be added repository
+                        </div>
+                        <div
+                          class="repoUrl"
+                        >
+                          some-other-url
+                        </div>
                       </div>
                       <i
                         class="Icon material interactive focusable"
@@ -4441,18 +4457,20 @@ exports[`add helm repository from list in preferences when navigating to prefere
                     class="repos"
                   >
                     <div
-                      class="item flex gaps align-center justify-space-between mt-3"
+                      class="item flex gaps align-center justify-space-between repo"
                     >
-                      <div
-                        class="repoName"
-                        data-testid="helm-repository-Some already active repository"
-                      >
-                        Some already active repository
-                      </div>
-                      <div
-                        class="repoUrl"
-                      >
-                        some-url
+                      <div>
+                        <div
+                          class="repoName"
+                          data-testid="helm-repository-Some already active repository"
+                        >
+                          Some already active repository
+                        </div>
+                        <div
+                          class="repoUrl"
+                        >
+                          some-url
+                        </div>
                       </div>
                       <i
                         class="Icon material interactive focusable"
@@ -4469,18 +4487,20 @@ exports[`add helm repository from list in preferences when navigating to prefere
                       </i>
                     </div>
                     <div
-                      class="item flex gaps align-center justify-space-between mt-3"
+                      class="item flex gaps align-center justify-space-between repo"
                     >
-                      <div
-                        class="repoName"
-                        data-testid="helm-repository-Some to be added repository"
-                      >
-                        Some to be added repository
-                      </div>
-                      <div
-                        class="repoUrl"
-                      >
-                        some-other-url
+                      <div>
+                        <div
+                          class="repoName"
+                          data-testid="helm-repository-Some to be added repository"
+                        >
+                          Some to be added repository
+                        </div>
+                        <div
+                          class="repoUrl"
+                        >
+                          some-other-url
+                        </div>
                       </div>
                       <i
                         class="Icon material interactive focusable"
diff --git a/src/behaviours/helm-charts/__snapshots__/listing-active-helm-repositories-in-preferences.test.ts.snap b/src/behaviours/helm-charts/__snapshots__/listing-active-helm-repositories-in-preferences.test.ts.snap
index f4c53dce2e..d350470ef4 100644
--- a/src/behaviours/helm-charts/__snapshots__/listing-active-helm-repositories-in-preferences.test.ts.snap
+++ b/src/behaviours/helm-charts/__snapshots__/listing-active-helm-repositories-in-preferences.test.ts.snap
@@ -3065,18 +3065,20 @@ exports[`listing active helm repositories in preferences when navigating to pref
                     class="repos"
                   >
                     <div
-                      class="item flex gaps align-center justify-space-between mt-3"
+                      class="item flex gaps align-center justify-space-between repo"
                     >
-                      <div
-                        class="repoName"
-                        data-testid="helm-repository-some-repository"
-                      >
-                        some-repository
-                      </div>
-                      <div
-                        class="repoUrl"
-                      >
-                        some-repository-url
+                      <div>
+                        <div
+                          class="repoName"
+                          data-testid="helm-repository-some-repository"
+                        >
+                          some-repository
+                        </div>
+                        <div
+                          class="repoUrl"
+                        >
+                          some-repository-url
+                        </div>
                       </div>
                       <i
                         class="Icon material interactive focusable"
@@ -3093,18 +3095,20 @@ exports[`listing active helm repositories in preferences when navigating to pref
                       </i>
                     </div>
                     <div
-                      class="item flex gaps align-center justify-space-between mt-3"
+                      class="item flex gaps align-center justify-space-between repo"
                     >
-                      <div
-                        class="repoName"
-                        data-testid="helm-repository-some-other-repository"
-                      >
-                        some-other-repository
-                      </div>
-                      <div
-                        class="repoUrl"
-                      >
-                        some-other-repository-url
+                      <div>
+                        <div
+                          class="repoName"
+                          data-testid="helm-repository-some-other-repository"
+                        >
+                          some-other-repository
+                        </div>
+                        <div
+                          class="repoUrl"
+                        >
+                          some-other-repository-url
+                        </div>
                       </div>
                       <i
                         class="Icon material interactive focusable"
diff --git a/src/behaviours/helm-charts/__snapshots__/remove-helm-repository-from-list-of-active-repository-in-preferences.test.ts.snap b/src/behaviours/helm-charts/__snapshots__/remove-helm-repository-from-list-of-active-repository-in-preferences.test.ts.snap
index 778bdc5f9a..c913123fe3 100644
--- a/src/behaviours/helm-charts/__snapshots__/remove-helm-repository-from-list-of-active-repository-in-preferences.test.ts.snap
+++ b/src/behaviours/helm-charts/__snapshots__/remove-helm-repository-from-list-of-active-repository-in-preferences.test.ts.snap
@@ -886,18 +886,20 @@ exports[`remove helm repository from list of active repositories in preferences
                     class="repos"
                   >
                     <div
-                      class="item flex gaps align-center justify-space-between mt-3"
+                      class="item flex gaps align-center justify-space-between repo"
                     >
-                      <div
-                        class="repoName"
-                        data-testid="helm-repository-some-active-repository"
-                      >
-                        some-active-repository
-                      </div>
-                      <div
-                        class="repoUrl"
-                      >
-                        some-url
+                      <div>
+                        <div
+                          class="repoName"
+                          data-testid="helm-repository-some-active-repository"
+                        >
+                          some-active-repository
+                        </div>
+                        <div
+                          class="repoUrl"
+                        >
+                          some-url
+                        </div>
                       </div>
                       <i
                         class="Icon material interactive focusable"
@@ -1370,18 +1372,20 @@ exports[`remove helm repository from list of active repositories in preferences
                     class="repos"
                   >
                     <div
-                      class="item flex gaps align-center justify-space-between mt-3"
+                      class="item flex gaps align-center justify-space-between repo"
                     >
-                      <div
-                        class="repoName"
-                        data-testid="helm-repository-some-active-repository"
-                      >
-                        some-active-repository
-                      </div>
-                      <div
-                        class="repoUrl"
-                      >
-                        some-url
+                      <div>
+                        <div
+                          class="repoName"
+                          data-testid="helm-repository-some-active-repository"
+                        >
+                          some-active-repository
+                        </div>
+                        <div
+                          class="repoUrl"
+                        >
+                          some-url
+                        </div>
                       </div>
                       <i
                         class="Icon material interactive focusable"
diff --git a/src/renderer/components/+catalog/catalog-menu.module.scss b/src/renderer/components/+catalog/catalog-menu.module.scss
index de79bb22d2..cafed28964 100644
--- a/src/renderer/components/+catalog/catalog-menu.module.scss
+++ b/src/renderer/components/+catalog/catalog-menu.module.scss
@@ -8,12 +8,15 @@
 }
 
 .parent {
-  @apply uppercase font-bold;
   color: var(--textColorAccent);
   font-size: small;
+  text-transform: uppercase;
+  font-weight: bold;
 }
 
 .catalog {
-  @apply p-5 font-bold text-2xl;
+  font-size: medium;
+  padding: var(--padding) calc(var(--padding) * 1.5);
+  font-weight: bold;
   color: var(--textColorAccent);
 }
diff --git a/src/renderer/components/+extensions/notice.module.scss b/src/renderer/components/+extensions/notice.module.scss
index ec92333704..2f1963b663 100644
--- a/src/renderer/components/+extensions/notice.module.scss
+++ b/src/renderer/components/+extensions/notice.module.scss
@@ -4,8 +4,12 @@
  */
 
 .notice {
-  @apply p-8 flex flex-col gap-2 rounded-lg;
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--unit) * 2);
   background-color: var(--inputControlBackground);
   border: 1px solid var(--boxShadow);
   color: var(--textColorTertiary);
+  border-radius: 4px;
+  padding: calc(var(--padding) * 2);
 }
diff --git a/src/renderer/components/+namespaces/namespace-select-filter.scss b/src/renderer/components/+namespaces/namespace-select-filter.scss
index 00e067ddf5..5230fd7a84 100644
--- a/src/renderer/components/+namespaces/namespace-select-filter.scss
+++ b/src/renderer/components/+namespaces/namespace-select-filter.scss
@@ -59,6 +59,8 @@
     &__option {
       white-space: normal;
       word-break: break-all;
+      padding: 4px 8px;
+      border-radius: 3px;
     }
   }
 
diff --git a/src/renderer/components/+preferences/kubernetes/helm-charts/helm-charts.module.scss b/src/renderer/components/+preferences/kubernetes/helm-charts/helm-charts.module.scss
index eb60ab744b..0329e7f8f7 100644
--- a/src/renderer/components/+preferences/kubernetes/helm-charts/helm-charts.module.scss
+++ b/src/renderer/components/+preferences/kubernetes/helm-charts/helm-charts.module.scss
@@ -4,12 +4,22 @@
  */
 
 .repos {
-  @apply mt-6 flex flex-col;
+  display: flex;
+  flex-direction: column;
+  margin-top: calc(var(--margin) * 2);
+}
+
+.repos .repo + .repo {
+  margin-top: calc(var(--margin) * 1.5);
+}
+
+.contents {
+  display: flex;
+  gap: var(--padding);
 }
 
 .repoName {
   font-weight: 500;
-  margin-bottom: 8px;
 }
 
 .repoUrl {
diff --git a/src/renderer/components/+preferences/kubernetes/helm-charts/helm-repositories.tsx b/src/renderer/components/+preferences/kubernetes/helm-charts/helm-repositories.tsx
index 4eeee10182..d48f648e89 100644
--- a/src/renderer/components/+preferences/kubernetes/helm-charts/helm-repositories.tsx
+++ b/src/renderer/components/+preferences/kubernetes/helm-charts/helm-repositories.tsx
@@ -40,14 +40,16 @@ const NonInjectedActiveHelmRepositories = observer(({ activeHelmRepositories, re
         <RemovableItem
           key={repository.name}
           onRemove={() => removeRepository(repository)}
-          className="mt-3"
+          className={styles.repo}
           data-testid={`remove-helm-repository-${repository.name}`}
         >
-          <div data-testid={`helm-repository-${repository.name}`} className={styles.repoName}>
-            {repository.name}
-          </div>
+          <div>
+            <div data-testid={`helm-repository-${repository.name}`} className={styles.repoName}>
+              {repository.name}
+            </div>
 
-          <div className={styles.repoUrl}>{repository.url}</div>
+            <div className={styles.repoUrl}>{repository.url}</div>
+          </div>
         </RemovableItem>
       ))}
     </div>
diff --git a/src/renderer/components/+preferences/removable-item.module.scss b/src/renderer/components/+preferences/removable-item.module.scss
index e170da9532..6734dda5b9 100644
--- a/src/renderer/components/+preferences/removable-item.module.scss
+++ b/src/renderer/components/+preferences/removable-item.module.scss
@@ -1,7 +1,8 @@
 .item {
-  --flex-gap: 1.2rem;
+  --flex-gap: 0.5rem;
 
-  @apply rounded-md px-7 py-5 shadow-sm;
   background: var(--inputControlBackground);
   min-height: 65px;
+  border-radius: 3px;
+  padding: calc(var(--padding) * 1.5);
 }
\ No newline at end of file
diff --git a/src/renderer/components/app.scss b/src/renderer/components/app.scss
index 80317acb59..68cc6db3d9 100755
--- a/src/renderer/components/app.scss
+++ b/src/renderer/components/app.scss
@@ -68,6 +68,9 @@
 html, body {
   height: 100%;
   overflow: hidden;
+}
+
+body {
   color: var(--textColorPrimary);
   background-color: var(--mainBackground);
   font-size: var(--font-size);
diff --git a/src/renderer/components/delete-cluster-dialog/view.module.scss b/src/renderer/components/delete-cluster-dialog/view.module.scss
index 0c95c3d2a6..e8f513a991 100644
--- a/src/renderer/components/delete-cluster-dialog/view.module.scss
+++ b/src/renderer/components/delete-cluster-dialog/view.module.scss
@@ -1,17 +1,22 @@
 .warning {
-  @apply mt-4 flex py-4 px-6 rounded-md items-center;
+  display: flex;
+  margin-top: var(--margin);
+  padding: calc(var(--padding) * 2) calc(var(--padding) * 3);
+  border-radius: 4px;
+  align-items: center;
   background: #fad8d7;
   color: #797979;
 }
 
 .warningIcon {
-  @apply mr-5;
+  margin-right: calc(var(--margin) * 2.4);
   font-size: 26px;
 }
 
 .dialog {
   > div {
-    @apply rounded-md bg-white;
+    border-radius: 4px;
+    background-color: white;
     max-width: 600px;
     min-width: calc(45 * var(--unit));
   }
@@ -22,11 +27,14 @@
 }
 
 .dialogContent {
-  @apply p-9 leading-9;
+  padding: calc(var(--padding) * 2) calc(var(--padding) * 3);
 }
 
 .dialogButtons {
-  @apply flex justify-end p-7 rounded-md;
+  display: flex;
+  border-radius: 4px;
+  justify-content: flex-end;
+  padding: calc(var(--padding) * 2);
   background: #f4f4f4;
 
   > * {
@@ -35,7 +43,7 @@
 }
 
 .hr {
-  @apply mt-7;
+  margin-top: calc(var(--margin) * 3);
   height: 1px;
   background: #dfdfdf80;
 }
\ No newline at end of file
diff --git a/src/renderer/components/delete-cluster-dialog/view.tsx b/src/renderer/components/delete-cluster-dialog/view.tsx
index 79e0ea88ee..3d86bae4a9 100644
--- a/src/renderer/components/delete-cluster-dialog/view.tsx
+++ b/src/renderer/components/delete-cluster-dialog/view.tsx
@@ -204,9 +204,9 @@ class NonInjectedDeleteClusterDialog extends React.Component<Dependencies> {
         <div className={styles.dialogContent}>
           {this.renderDeleteMessage(state)}
           {this.renderWarning(state)}
-          <hr className={styles.hr} />
           {contexts.length > 0 && (
             <>
+              <hr className={styles.hr} />
               <div className="mt-4">
                 <Checkbox
                   data-testid="context-switch"
diff --git a/src/renderer/components/dock/dock-tab.module.scss b/src/renderer/components/dock/dock-tab.module.scss
index 3b803f32c7..64bd4768ff 100644
--- a/src/renderer/components/dock/dock-tab.module.scss
+++ b/src/renderer/components/dock/dock-tab.module.scss
@@ -94,5 +94,5 @@
 .title {
   overflow: hidden;
   text-overflow: ellipsis;
-  margin-right: 2.5rem;
+  margin-right: calc(var(--margin) * 3);
 }
diff --git a/src/renderer/components/dock/logs/to-bottom.tsx b/src/renderer/components/dock/logs/to-bottom.tsx
index 99df41a85c..f9b5cbb03e 100644
--- a/src/renderer/components/dock/logs/to-bottom.tsx
+++ b/src/renderer/components/dock/logs/to-bottom.tsx
@@ -8,7 +8,7 @@ import { Icon } from "../../icon";
 export function ToBottom({ onClick }: { onClick: () => void }) {
   return (
     <button
-      className="absolute top-3 right-3 z-10 rounded-md flex align-center px-1.5 py-1.5 pl-3.5"
+      className="absolute top-3 right-3 z-10 rounded-md flex align-center px-1 py-1 pl-3"
       style={{ backgroundColor: "var(--blue)" }}
       onClick={evt => {
         evt.currentTarget.blur();
diff --git a/src/renderer/components/layout/sidebar-cluster.module.scss b/src/renderer/components/layout/sidebar-cluster.module.scss
index e55afc8079..c1a188be75 100644
--- a/src/renderer/components/layout/sidebar-cluster.module.scss
+++ b/src/renderer/components/layout/sidebar-cluster.module.scss
@@ -6,7 +6,7 @@
 .SidebarCluster {
   display: flex;
   align-items: center;
-  padding: 1.25rem;
+  padding: calc(var(--padding) * 1.2);
   cursor: pointer;
 
   &:hover {
@@ -38,13 +38,12 @@
 
 .menu {
   width: 200px;
-  margin-top: -1.25rem;
-  margin-left: 1.25rem;
+  margin-top: -10px;
 }
 
 .avatar {
   font-weight: 500;
-  margin-right: 1.25rem;
+  margin-right: calc(var(--margin) * 1.5);
 }
 
 .loadingAvatar {
diff --git a/src/renderer/components/layout/top-bar/top-bar.module.scss b/src/renderer/components/layout/top-bar/top-bar.module.scss
index f8da7d01bc..18e67040de 100644
--- a/src/renderer/components/layout/top-bar/top-bar.module.scss
+++ b/src/renderer/components/layout/top-bar/top-bar.module.scss
@@ -24,18 +24,18 @@
   -webkit-app-region: no-drag;
 
   &:first-of-type {
-    padding-left: 1.5rem;
+    padding-left: calc(var(--padding) * 2);
 
     & > *:not(:empty) {
-      margin-right: 1rem;
+      margin-right: calc(var(--padding) * 1.5);
     }
   }
 
   &:last-of-type {
-    padding-right: 1.5rem;
+    padding-right: calc(var(--padding) * 2);
 
     & > *:not(:empty) {
-      margin-left: 1rem;
+      margin-left: calc(var(--padding) * 1.5);
     }
   }
 }
@@ -64,7 +64,7 @@
 
 .windowButtons {
   display: flex;
-  margin-right: -1.5rem;
+  margin-right: calc(var(--padding) * -2);
 
   > div {
     @apply flex items-center justify-center;
@@ -82,7 +82,7 @@
       width: 16px;
       height: 16px;
       border-radius: 50%;
-      margin-right: 1.1rem;
+      margin-right: calc(var(--padding) * -1.5);
       color: var(--textColorAccent);
 
       svg {
diff --git a/src/renderer/components/switch/switch.module.scss b/src/renderer/components/switch/switch.module.scss
index 217ef5dc9c..06321afa82 100644
--- a/src/renderer/components/switch/switch.module.scss
+++ b/src/renderer/components/switch/switch.module.scss
@@ -6,7 +6,7 @@
 @import "../../components/mixins.scss";
 
 .Switch {
-  --thumb-size: 2rem;
+  --thumb-size: 20px;
   --thumb-color: hsl(0 0% 100%);
   --thumb-color-highlight: hsl(0 0% 100% / 25%);
 
@@ -66,7 +66,7 @@
     }
 
     &:not(:disabled):hover::before {
-      --hover-highlight-size: .5rem;
+      --hover-highlight-size: .3rem;
     }
 
     &:checked {