Add background-color, box-shadow and padding to .ClusterStatus (#3582)

src/renderer/components/cluster-manager/cluster-status.module.css

@@ -0,0 +1,39 @@
+.status {
+  --flex-gap: 16px;
+
+  position: relative;
+  min-width: 350px;
+  margin: auto;
+  text-align: center;
+  z-index: 1;
+  background: var(--mainBackground);
+  width: 100%;
+  height: 100%;
+
+  pre {
+    max-width: 70vw;
+    max-height: 40vh;
+    white-space: pre-line;
+    overflow: auto;
+    line-height: 1.7;
+
+    p {
+      margin-bottom: var(--margin);
+    }
+  }
+
+  a {
+    cursor: pointer;
+  }
+}
+
+.spinner {
+  --spinner-size: 38px;
+  --spinner-border: calc(var(--spinner-size) / 10);
+}
+
+.icon {
+  --size: 70px;
+  margin: auto;
+  color: var(--colorError);
+}

src/renderer/components/cluster-manager/cluster-status.scss

@@ -1,55 +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.
- */
-
-.ClusterStatus {
-  --flex-gap: #{$padding * 2};
-
-  position: relative;
-  min-width: 350px;
-  margin: auto;
-  text-align: center;
-  z-index: 1;
-
-  pre {
-    @include hidden-scrollbar;
-    max-width: 70vw;
-    max-height: 40vh;
-    white-space: pre-line;
-
-    p {
-      margin-bottom: $margin;
-    }
-  }
-
-  .Spinner {
-    --spinner-size: 38px;
-    --spinner-border: calc(var(--spinner-size) / 10);
-  }
-
-  .Icon {
-    --size: 70px;
-    margin: auto;
-  }
-
-  a.interactive {
-    cursor: pointer
-  }
-}

src/renderer/components/cluster-manager/cluster-status.tsx

@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import "./cluster-status.scss";
+import styles from "./cluster-status.module.css";
 
 import { ipcRenderer } from "electron";
 import { computed, observable, makeObservable } from "mobx";
@@ -100,31 +100,31 @@ export class ClusterStatus extends React.Component<Props> {
 
     if (!hasErrors || this.isReconnecting) {
       return (
-        <>
-          <Spinner singleColor={false} />
+        <div className="flex items-center column gaps">
+          <Spinner singleColor={false} className={styles.spinner} />
           <pre className="kube-auth-out">
             <p>{this.isReconnecting ? "Reconnecting" : "Connecting"}&hellip;</p>
             {authOutput.map(({ data, error }, index) => {
               return <p key={index} className={cssNames({ error })}>{data}</p>;
             })}
           </pre>
-        </>
+        </div>
       );
     }
 
     return (
-      <>
-        <Icon material="cloud_off" className="error" />
+      <div className="flex items-center column gaps">
+        <Icon material="cloud_off" className={styles.icon} />
         <h2>
           {cluster.preferences.clusterName}
         </h2>
-        <pre className="kube-auth-out">
+        <pre>
           {authOutput.map(({ data, error }, index) => {
             return <p key={index} className={cssNames({ error })}>{data}</p>;
           })}
         </pre>
         {failureReason && (
-          <div className="failure-reason error">{failureReason}</div>
+          <div className="error">{failureReason}</div>
         )}
         <Button
           primary
@@ -138,13 +138,13 @@ export class ClusterStatus extends React.Component<Props> {
           onClick={this.manageProxySettings}>
           Manage Proxy Settings
         </a>
-      </>
+      </div>
     );
   }
 
   render() {
     return (
-      <div className={cssNames("ClusterStatus flex column gaps box center align-center justify-center", this.props.className)}>
+      <div className={cssNames(styles.status, "flex column box center align-center justify-center", this.props.className)}>
         {this.renderContent()}
       </div>
     );