Move SettingsLayout styles to css modules

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

src/renderer/components/layout/setting-layout.scss

@@ -21,18 +21,15 @@
 
 .SettingLayout {
   --nav-column-width: 30vw;
-  width: 100%;
-  height: 100%;
-  display: grid;
-  color: var(--settingsColor);
   position: fixed;
-  z-index: 13!important;
-  left: 0;
   top: 0;
   right: 0;
   bottom: 0;
-  height: unset;
+  left: 0;
+  display: grid;
+  color: var(--settingsColor);
   background-color: var(--settingsBackground);
+  z-index: 100;
 
   &.showNavigation {
     grid-template-columns: var(--nav-column-width) 1fr;

src/renderer/components/layout/setting-layout.tsx

@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import "./setting-layout.scss";
+import styles from "./settings-layout.module.css";
 
 import React from "react";
 import { observer } from "mobx-react";
@@ -29,16 +29,13 @@ import { Icon } from "../icon";
 
 export interface SettingLayoutProps extends React.DOMAttributes<any> {
   className?: IClassName;
-  contentClass?: IClassName;
   provideBackButtonNavigation?: boolean;
-  contentGaps?: boolean;
   navigation?: React.ReactNode;
   back?: (evt: React.MouseEvent | KeyboardEvent) => void;
 }
 
 const defaultProps: Partial<SettingLayoutProps> = {
   provideBackButtonNavigation: true,
-  contentGaps: true,
   back: () => navigation.goBack(),
 };
 
@@ -76,32 +73,32 @@ export class SettingLayout extends React.Component<SettingLayoutProps> {
 
   render() {
     const {
-      contentClass, provideBackButtonNavigation,
+      provideBackButtonNavigation,
-      contentGaps, navigation, children, back, ...elemProps
+      navigation, children, back, ...elemProps
     } = this.props;
-    const className = cssNames("SettingLayout", { showNavigation: navigation }, this.props.className);
+    const className = cssNames(styles.Settings, { [styles.showNavigation]: navigation }, this.props.className);
 
     return (
       <div {...elemProps} className={className}>
         { navigation && (
-          <nav className="sidebarRegion">
+          <nav className={styles.sidebarRegion}>
-            <div className="sidebar">
+            <div className={styles.sidebar}>
               {navigation}
             </div>
           </nav>
         )}
-        <div className="contentRegion" id="ScrollSpyRoot">
+        <div className={styles.contentRegion}>
-          <div className={cssNames("content", contentClass, contentGaps && "flex column gaps")}>
+          <div className={styles.content}>
             {children}
           </div>
-          <div className="toolsRegion">
+          <div className={styles.toolsRegion}>
             {
               this.props.provideBackButtonNavigation && (
-                <div className="fixedTools">
+                <div className={styles.tools}>
-                  <div className="closeBtn" role="button" aria-label="Close" onClick={back}>
+                  <div className={styles.closeBtn} role="button" aria-label="Close" onClick={back}>
                     <Icon material="close" />
                   </div>
-                  <div className="esc" aria-hidden="true">
+                  <div className={styles.esc} aria-hidden="true">
                     ESC
                   </div>
                 </div>

src/renderer/components/layout/settings-layout.module.css

@@ -0,0 +1,147 @@
+/**
+ * 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.
+ */
+
+.Settings {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: grid;
+  background-color: var(--settingsBackground);
+  z-index: 100;
+
+  &.showNavigation {
+    grid-template-columns: 30vw 1fr;
+
+    .contentRegion {
+      justify-content: flex-start;
+    }
+  }
+
+  section {
+    h2 {
+      font-size: 20px;
+      line-height: 20px;
+      font-weight: 600;
+      margin-bottom: 20px;
+      color: var(--textColorAccent);
+    }
+
+    a {
+      color: var(--colorInfo);
+    }
+
+    hr {
+      height: 1px;
+      border-top: thin solid var(--hrColor);
+    }
+  }
+}
+
+.sidebarRegion {
+  display: flex;
+  justify-content: flex-end;
+  overflow-y: auto;
+  background-color: var(--secondaryBackground);
+}
+
+.sidebar {
+  width: 218px;
+  padding: 60px 0 60px 20px;
+
+  h2 {
+    font-size: 15px;
+    overflow-wrap: anywhere;
+    color: var(--textColorAccent);
+    font-weight: 600;
+    padding-right: 20px;
+    word-break: break-word;
+  }
+
+  hr {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    margin-left: 10px;
+    margin-right: 20px;
+    height: 1px;
+    border-top: thin solid var(--hrColor);
+
+    &:first-child {
+      display: none;
+    }
+  }
+}
+
+.contentRegion {
+  display: flex;
+  overflow: auto;
+  justify-content: center;
+}
+
+.content {
+  width: 100%;
+  max-width: 740px;
+  min-width: 460px;
+  padding: 60px 40px 0;
+  height: max-content;
+  margin-bottom: 60px;
+}
+
+.toolsRegion {
+  width: 45px;
+}
+
+.tools {
+  position: fixed;
+  top: 60px;
+}
+
+.closeBtn {
+  width: 35px;
+  height: 35px;
+  display: grid;
+  place-items: center;
+  border: 2px solid var(--textColorDimmed);
+  border-radius: 50%;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #72767d4d;
+  }
+
+  &:active {
+    transform: translateY(1px);
+  }
+
+  .Icon {
+    color: var(--textColorTertiary);
+  }
+}
+
+.esc {
+  text-align: center;
+  margin-top: 4px;
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--textColorDimmed);
+  pointer-events: none;
+}