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>

src/behaviours/helm-charts/__snapshots__/add-custom-helm-repository-in-preferences.test.ts.snap

@@ -886,8 +886,9 @@ 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>
                         <div
                           class="repoName"
                           data-testid="helm-repository-Some active repository"
@@ -899,6 +900,7 @@ exports[`add custom helm repository in preferences when navigating to preference
                         >
                           some-url
                         </div>
+                      </div>
                       <i
                         class="Icon material interactive focusable"
                         data-testid="remove-helm-repository-Some active repository"
@@ -1370,8 +1372,9 @@ 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>
                         <div
                           class="repoName"
                           data-testid="helm-repository-Some active repository"
@@ -1383,6 +1386,7 @@ exports[`add custom helm repository in preferences when navigating to preference
                         >
                           some-url
                         </div>
+                      </div>
                       <i
                         class="Icon material interactive focusable"
                         data-testid="remove-helm-repository-Some active repository"
@@ -1963,8 +1967,9 @@ 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>
                         <div
                           class="repoName"
                           data-testid="helm-repository-Some active repository"
@@ -1976,6 +1981,7 @@ exports[`add custom helm repository in preferences when navigating to preference
                         >
                           some-url
                         </div>
+                      </div>
                       <i
                         class="Icon material interactive focusable"
                         data-testid="remove-helm-repository-Some active repository"
@@ -2455,8 +2461,9 @@ 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>
                         <div
                           class="repoName"
                           data-testid="helm-repository-Some active repository"
@@ -2468,6 +2475,7 @@ exports[`add custom helm repository in preferences when navigating to preference
                         >
                           some-url
                         </div>
+                      </div>
                       <i
                         class="Icon material interactive focusable"
                         data-testid="remove-helm-repository-Some active repository"
@@ -3048,8 +3056,9 @@ 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>
                         <div
                           class="repoName"
                           data-testid="helm-repository-Some active repository"
@@ -3061,6 +3070,7 @@ exports[`add custom helm repository in preferences when navigating to preference
                         >
                           some-url
                         </div>
+                      </div>
                       <i
                         class="Icon material interactive focusable"
                         data-testid="remove-helm-repository-Some active repository"
@@ -3817,8 +3827,9 @@ 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>
                         <div
                           class="repoName"
                           data-testid="helm-repository-Some active repository"
@@ -3830,6 +3841,7 @@ exports[`add custom helm repository in preferences when navigating to preference
                         >
                           some-url
                         </div>
+                      </div>
                       <i
                         class="Icon material interactive focusable"
                         data-testid="remove-helm-repository-Some active repository"
@@ -4410,8 +4422,9 @@ 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>
                         <div
                           class="repoName"
                           data-testid="helm-repository-Some active repository"
@@ -4423,6 +4436,7 @@ exports[`add custom helm repository in preferences when navigating to preference
                         >
                           some-url
                         </div>
+                      </div>
                       <i
                         class="Icon material interactive focusable"
                         data-testid="remove-helm-repository-Some active repository"
@@ -5179,8 +5193,9 @@ 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>
                         <div
                           class="repoName"
                           data-testid="helm-repository-Some active repository"
@@ -5192,6 +5207,7 @@ exports[`add custom helm repository in preferences when navigating to preference
                         >
                           some-url
                         </div>
+                      </div>
                       <i
                         class="Icon material interactive focusable"
                         data-testid="remove-helm-repository-Some active repository"
@@ -5772,8 +5788,9 @@ 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>
                         <div
                           class="repoName"
                           data-testid="helm-repository-Some active repository"
@@ -5785,6 +5802,7 @@ exports[`add custom helm repository in preferences when navigating to preference
                         >
                           some-url
                         </div>
+                      </div>
                       <i
                         class="Icon material interactive focusable"
                         data-testid="remove-helm-repository-Some active repository"

src/behaviours/helm-charts/__snapshots__/add-helm-repository-from-list-in-preferences.test.ts.snap

@@ -886,8 +886,9 @@ 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>
                         <div
                           class="repoName"
                           data-testid="helm-repository-Some already active repository"
@@ -899,6 +900,7 @@ exports[`add helm repository from list in preferences when navigating to prefere
                         >
                           some-url
                         </div>
+                      </div>
                       <i
                         class="Icon material interactive focusable"
                         data-testid="remove-helm-repository-Some already active repository"
@@ -1372,8 +1374,9 @@ 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>
                         <div
                           class="repoName"
                           data-testid="helm-repository-Some already active repository"
@@ -1385,6 +1388,7 @@ exports[`add helm repository from list in preferences when navigating to prefere
                         >
                           some-url
                         </div>
+                      </div>
                       <i
                         class="Icon material interactive focusable"
                         data-testid="remove-helm-repository-Some already active repository"
@@ -1907,8 +1911,9 @@ 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>
                         <div
                           class="repoName"
                           data-testid="helm-repository-Some already active repository"
@@ -1920,6 +1925,7 @@ exports[`add helm repository from list in preferences when navigating to prefere
                         >
                           some-url
                         </div>
+                      </div>
                       <i
                         class="Icon material interactive focusable"
                         data-testid="remove-helm-repository-Some already active repository"
@@ -2391,8 +2397,9 @@ 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>
                         <div
                           class="repoName"
                           data-testid="helm-repository-Some already active repository"
@@ -2404,6 +2411,7 @@ exports[`add helm repository from list in preferences when navigating to prefere
                         >
                           some-url
                         </div>
+                      </div>
                       <i
                         class="Icon material interactive focusable"
                         data-testid="remove-helm-repository-Some already active repository"
@@ -3354,8 +3362,9 @@ 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>
                         <div
                           class="repoName"
                           data-testid="helm-repository-Some already active repository"
@@ -3367,6 +3376,7 @@ exports[`add helm repository from list in preferences when navigating to prefere
                         >
                           some-url
                         </div>
+                      </div>
                       <i
                         class="Icon material interactive focusable"
                         data-testid="remove-helm-repository-Some already active repository"
@@ -3382,8 +3392,9 @@ 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>
                         <div
                           class="repoName"
                           data-testid="helm-repository-Some to be added repository"
@@ -3395,6 +3406,7 @@ exports[`add helm repository from list in preferences when navigating to prefere
                         >
                           some-other-url
                         </div>
+                      </div>
                       <i
                         class="Icon material interactive focusable"
                         data-testid="remove-helm-repository-Some to be added repository"
@@ -3868,8 +3880,9 @@ 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>
                         <div
                           class="repoName"
                           data-testid="helm-repository-Some already active repository"
@@ -3881,6 +3894,7 @@ exports[`add helm repository from list in preferences when navigating to prefere
                         >
                           some-url
                         </div>
+                      </div>
                       <i
                         class="Icon material interactive focusable"
                         data-testid="remove-helm-repository-Some already active repository"
@@ -3896,8 +3910,9 @@ 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>
                         <div
                           class="repoName"
                           data-testid="helm-repository-Some to be added repository"
@@ -3909,6 +3924,7 @@ exports[`add helm repository from list in preferences when navigating to prefere
                         >
                           some-other-url
                         </div>
+                      </div>
                       <i
                         class="Icon material interactive focusable"
                         data-testid="remove-helm-repository-Some to be added repository"
@@ -4441,8 +4457,9 @@ 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>
                         <div
                           class="repoName"
                           data-testid="helm-repository-Some already active repository"
@@ -4454,6 +4471,7 @@ exports[`add helm repository from list in preferences when navigating to prefere
                         >
                           some-url
                         </div>
+                      </div>
                       <i
                         class="Icon material interactive focusable"
                         data-testid="remove-helm-repository-Some already active repository"
@@ -4469,8 +4487,9 @@ 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>
                         <div
                           class="repoName"
                           data-testid="helm-repository-Some to be added repository"
@@ -4482,6 +4501,7 @@ exports[`add helm repository from list in preferences when navigating to prefere
                         >
                           some-other-url
                         </div>
+                      </div>
                       <i
                         class="Icon material interactive focusable"
                         data-testid="remove-helm-repository-Some to be added repository"

src/behaviours/helm-charts/__snapshots__/listing-active-helm-repositories-in-preferences.test.ts.snap

@@ -3065,8 +3065,9 @@ 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>
                         <div
                           class="repoName"
                           data-testid="helm-repository-some-repository"
@@ -3078,6 +3079,7 @@ exports[`listing active helm repositories in preferences when navigating to pref
                         >
                           some-repository-url
                         </div>
+                      </div>
                       <i
                         class="Icon material interactive focusable"
                         data-testid="remove-helm-repository-some-repository"
@@ -3093,8 +3095,9 @@ 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>
                         <div
                           class="repoName"
                           data-testid="helm-repository-some-other-repository"
@@ -3106,6 +3109,7 @@ exports[`listing active helm repositories in preferences when navigating to pref
                         >
                           some-other-repository-url
                         </div>
+                      </div>
                       <i
                         class="Icon material interactive focusable"
                         data-testid="remove-helm-repository-some-other-repository"

src/behaviours/helm-charts/__snapshots__/remove-helm-repository-from-list-of-active-repository-in-preferences.test.ts.snap

@@ -886,8 +886,9 @@ 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>
                         <div
                           class="repoName"
                           data-testid="helm-repository-some-active-repository"
@@ -899,6 +900,7 @@ exports[`remove helm repository from list of active repositories in preferences
                         >
                           some-url
                         </div>
+                      </div>
                       <i
                         class="Icon material interactive focusable"
                         data-testid="remove-helm-repository-some-active-repository"
@@ -1370,8 +1372,9 @@ 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>
                         <div
                           class="repoName"
                           data-testid="helm-repository-some-active-repository"
@@ -1383,6 +1386,7 @@ exports[`remove helm repository from list of active repositories in preferences
                         >
                           some-url
                         </div>
+                      </div>
                       <i
                         class="Icon material interactive focusable"
                         data-testid="remove-helm-repository-some-active-repository"

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);
 }

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);
 }

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;
     }
   }
 

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 {

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>
             <div data-testid={`helm-repository-${repository.name}`} className={styles.repoName}>
               {repository.name}
             </div>
 
             <div className={styles.repoUrl}>{repository.url}</div>
+          </div>
         </RemovableItem>
       ))}
     </div>

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);
 }

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);

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;
 }

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"

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);
 }

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();

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-top: -10px;
-  margin-left: 1.25rem;
 }
 
 .avatar {
   font-weight: 500;
-  margin-right: 1.25rem;
+  margin-right: calc(var(--margin) * 1.5);
 }
 
 .loadingAvatar {

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 {

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 {