From 3a1d3609fd12841e4968ad45f815ca92ff27734e Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Mon, 10 Jan 2022 08:13:37 +0300
Subject: [PATCH] Removing preferences.scss file

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../+preferences/kubeconfig-syncs.tsx         |  8 +++---
 .../components/+preferences/preferences.scss  | 26 -------------------
 .../components/+preferences/preferences.tsx   | 19 ++++++++------
 3 files changed, 15 insertions(+), 38 deletions(-)
 delete mode 100644 src/renderer/components/+preferences/preferences.scss

diff --git a/src/renderer/components/+preferences/kubeconfig-syncs.tsx b/src/renderer/components/+preferences/kubeconfig-syncs.tsx
index 0b148d2178..0372279ac1 100644
--- a/src/renderer/components/+preferences/kubeconfig-syncs.tsx
+++ b/src/renderer/components/+preferences/kubeconfig-syncs.tsx
@@ -143,9 +143,7 @@ export class KubeconfigSyncs extends React.Component {
 
     if (!entries) {
       return (
-        <div className="loading-spinner">
-          <Spinner />
-        </div>
+        <Spinner center />
       );
     }
 
@@ -202,7 +200,9 @@ export class KubeconfigSyncs extends React.Component {
       <>
         {this.renderSyncButtons()}
         <SubTitle title="Synced Items" className="pt-5"/>
-        {this.renderEntries()}
+        <div className="relative">
+          {this.renderEntries()}
+        </div>
       </>
     );
   }
diff --git a/src/renderer/components/+preferences/preferences.scss b/src/renderer/components/+preferences/preferences.scss
deleted file mode 100644
index d1cdd66f20..0000000000
--- a/src/renderer/components/+preferences/preferences.scss
+++ /dev/null
@@ -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;
-  }
-}
diff --git a/src/renderer/components/+preferences/preferences.tsx b/src/renderer/components/+preferences/preferences.tsx
index f2fb5b34a1..d1bd6b9eed 100644
--- a/src/renderer/components/+preferences/preferences.tsx
+++ b/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 { IComputedValue, makeObservable, observable } from "mobx";
 import { observer } from "mobx-react";
@@ -55,6 +54,7 @@ import { withInjectables } from "@ogre-tools/injectable-react";
 import type { InstalledExtension } from "../../../extensions/extension-discovery";
 import userExtensionsInjectable from "../+extensions/user-extensions/user-extensions.injectable";
 import { ExtensionSettingsPage } from "./extension-settings-page";
+import { Icon } from "../icon";
 
 interface Dependencies {
   userExtensions: IComputedValue<InstalledExtension[]>;
@@ -96,13 +96,16 @@ class Preferences extends React.Component<Dependencies> {
         {extensions.length > 0 && (
           <div data-testid="custom-settings">
             <hr/>
-            {extensions.map(extension => (
-              <Tab key={extension.id} value={extensionSettingsURL({
-                params: {
-                  extensionId: encodeURIComponent(extension.manifest.name),
-                },
-              })} label={extension.manifest.name} active={currentLocation.includes(encodeURIComponent(extension.manifest.name))}/>
-            ))}
+            <div className="header flex items-center"><Icon material="extension" smallest className="mr-3"/> Custom settings</div>
+            <div>
+              {extensions.map(extension => (
+                <Tab key={extension.id} value={extensionSettingsURL({
+                  params: {
+                    extensionId: encodeURIComponent(extension.manifest.name),
+                  },
+                })} label={extension.manifest.name} active={currentLocation.includes(encodeURIComponent(extension.manifest.name))}/>
+              ))}
+            </div>
           </div>
         )}
       </Tabs>