Styling Kubernetes page

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

src/renderer/components/+preferences/kubeconfig-syncs.tsx

@@ -143,7 +143,7 @@ export class KubeconfigSyncs extends React.Component {
 
     if (!entries) {
       return (
-        <div className="loading-spinner">
+        <div className="m-auto">
           <Spinner />
         </div>
       );

src/renderer/components/+preferences/kubectl-binaries.tsx

@@ -46,7 +46,7 @@ export const KubectlBinaries = observer(() => {
 
   return (
     <>
-      <section>
+      <section className="mb-12">
         <SubTitle title="Kubectl binary download"/>
         <FormSwitch
           control={
@@ -60,7 +60,7 @@ export const KubectlBinaries = observer(() => {
         />
       </section>
 
-      <section>
+      <section className="mb-12">
         <SubTitle title="Download mirror" />
         <Select
           placeholder="Download mirror for kubectl"
@@ -73,7 +73,7 @@ export const KubectlBinaries = observer(() => {
         />
       </section>
 
-      <section>
+      <section className="mb-12">
         <SubTitle title="Directory for binaries" />
         <Input
           theme="round-black"
@@ -84,7 +84,7 @@ export const KubectlBinaries = observer(() => {
           onBlur={save}
           disabled={!userStore.downloadKubectlBinaries}
         />
-        <div className="hint">
+        <div className="pt-4">
           The directory to download binaries into.
         </div>
       </section>

src/renderer/components/+preferences/kubernetes.tsx

@@ -28,16 +28,16 @@ import { KubectlBinaries } from "./kubectl-binaries";
 export const Kubernetes = observer(() => {
   return (
     <section id="kubernetes">
-      <section id="kubectl">
+      <section id="kubectl" className="mb-12">
         <h2 data-testid="kubernetes-header">Kubernetes</h2>
         <KubectlBinaries />
       </section>
-      <hr/>
-      <section id="kube-sync">
+      <hr className="mb-12"/>
+      <section id="kube-sync" className="mb-12">
         <h2 data-testid="kubernetes-sync-header">Kubeconfig Syncs</h2>
         <KubeconfigSyncs />
       </section>
-      <hr/>
+      <hr className="mb-12"/>
       <section id="helm">
         <h2>Helm Charts</h2>
         <HelmCharts/>

src/renderer/components/+preferences/preferences.scss

@@ -1,26 +0,0 @@
-/**
- * Copyright (c) 2021 OpenLens Authors
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of
- * this software and associated documentation files (the "Software"), to deal in
- * the Software without restriction, including without limitation the rights to
- * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
- * the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
- * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
- * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
- * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
-.Preferences {
-  .loading-spinner {
-    margin: auto;
-  }
-}

src/renderer/components/+preferences/preferences.tsx

@@ -18,7 +18,6 @@
  * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
-import "./preferences.scss";
 import tabStyles from "../layout/settings-layout.module.css";
 
 import { makeObservable, observable } from "mobx";