Using css module for <Sidebar/>

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

src/renderer/components/layout/sidebar.module.css

@@ -0,0 +1,55 @@
+/**
+ * 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.
+ */
+
+.sidebarNav {
+  @apply flex overflow-auto flex-col;
+  width: var(--sidebar-width);
+  padding-bottom: calc(var(--padding) * 3);
+
+  /* Shadow above scrolling content from https://gist.github.com/distinctgrey/7548778 */
+  background:
+    linear-gradient(var(--sidebarBackground) 30%, rgba(255,255,255,0)),
+    linear-gradient(rgba(255,255,255,0), var(--sidebarBackground) 70%) 0 100%,
+    radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
+    radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
+  background-repeat: no-repeat;
+  background-size: 100% 40px, 100% 40px, 100% 12px, 100% 12px;
+  background-attachment: local, local, scroll, scroll;
+}
+
+.sidebarNav :global(.Icon) {
+  box-sizing: content-box;
+  padding: 3px;
+  border-radius: 50%;
+}
+
+.cluster {
+  @apply flex items-center m-5;
+}
+
+.clusterName {
+  @apply break-words font-bold overflow-hidden;
+  color: var(--textColorAccent);
+  display: -webkit-box;
+  /* Simulate text-overflow:ellipsis styles but for multiple text lines */
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}

src/renderer/components/layout/sidebar.scss

@@ -1,75 +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.
- */
-
-.Sidebar {
-  $iconSize: 24px;
-  $itemSpacing: floor($unit / 2.6) floor($unit / 1.6);
-
-  .sidebar-nav {
-    width: var(--sidebar-width);
-    padding-bottom: calc(var(--padding) * 3);
-    overflow: auto;
-
-    /* Shadow above scrolling content from https://gist.github.com/distinctgrey/7548778 */
-    background:
-      linear-gradient(var(--sidebarBackground) 30%, rgba(255,255,255,0)),
-      linear-gradient(rgba(255,255,255,0), var(--sidebarBackground) 70%) 0 100%,
-      radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
-      radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
-    background-repeat: no-repeat;
-    background-size: 100% 40px, 100% 40px, 100% 12px, 100% 12px;
-    background-attachment: local, local, scroll, scroll;
-
-    .Icon {
-      --size: #{$iconSize};
-
-      box-sizing: content-box;
-      padding: floor($padding / 2.6);
-      border-radius: 50%;
-    }
-
-    hr {
-      background-color: transparent;
-    }
-  }
-
-  .loading {
-    padding: $padding;
-    text-align: center;
-  }
-
-  .cluster-description {
-    display: flex;
-    align-items: center;
-    padding: 1.25rem;
-  }
-
-  .cluster-name {
-    word-break: break-word;
-    font-weight: bold;
-    color: var(--textColorAccent);
-    display: -webkit-box;
-    /* Simulate text-overflow:ellipsis styles but for multiple text lines */
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-}

src/renderer/components/layout/sidebar.tsx

@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import "./sidebar.scss";
+import styles from "./sidebar.module.css";
 import type { TabLayoutRoute } from "./tab-layout";
 
 import React from "react";
@@ -186,9 +186,9 @@ export class Sidebar extends React.Component<Props> {
     const { className } = this.props;
 
     return (
-      <div className={cssNames(Sidebar.displayName, "flex column", className)}>
+      <div className={cssNames("flex flex-col", className)}>
         {this.clusterEntity && (
-          <div className="cluster-description">
+          <div className={styles.cluster}>
             <HotbarIcon
               uid={this.clusterEntity.metadata.uid}
               title={this.clusterEntity.metadata.name}
@@ -196,12 +196,12 @@ export class Sidebar extends React.Component<Props> {
               src={this.clusterEntity.spec.icon?.src}
               className="mr-5"
             />
-            <div className="cluster-name">
+            <div className={styles.clusterName}>
               {this.clusterEntity.metadata.name}
             </div>
           </div>
         )}
-        <div className={cssNames("sidebar-nav flex column box grow-fixed")}>
+        <div className={styles.sidebarNav}>
           <SidebarItem
             id="cluster"
             text="Cluster"