Cluster overview css fixes (#4104)

src/renderer/components/+cluster/cluster-issues.tsx

@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import "./cluster-issues.scss";
+import styles from "./cluster-issues.module.css";
 
 import React from "react";
 import { observer } from "mobx-react";
@@ -121,10 +121,10 @@ export class ClusterIssues extends React.Component<Props> {
         selected={selfLink === kubeSelectedUrlParam.get()}
         onClick={prevDefault(() => toggleDetails(selfLink))}
       >
-        <TableCell className="message">
+        <TableCell className={styles.message}>
           {message}
         </TableCell>
-        <TableCell className="object">
+        <TableCell className={styles.object}>
           {getName()}
         </TableCell>
         <TableCell className="kind">
@@ -148,8 +148,8 @@ export class ClusterIssues extends React.Component<Props> {
 
     if (!warnings.length) {
       return (
-        <div className="no-issues flex column box grow gaps align-center justify-center">
-          <div><Icon material="check" big sticker/></div>
+        <div className={cssNames(styles.noIssues, "flex column box grow gaps align-center justify-center")}>
+          <div><Icon className={styles.allGood} material="check" big sticker/></div>
           <div className="ok-title">No issues found</div>
           <span>Everything is fine in the Cluster</span>
         </div>
@@ -158,7 +158,7 @@ export class ClusterIssues extends React.Component<Props> {
 
     return (
       <>
-        <SubHeader>
+        <SubHeader className={styles.SubHeader}>
           <Icon material="error_outline"/>{" "}
           <>Warnings: {warnings.length}</>
         </SubHeader>
@@ -186,7 +186,7 @@ export class ClusterIssues extends React.Component<Props> {
 
   render() {
     return (
-      <div className={cssNames("ClusterIssues flex column", this.props.className)}>
+      <div className={cssNames(styles.ClusterIssues, "flex column", this.props.className)}>
         {this.renderContent()}
       </div>
     );