Fix close button overflow in Preferences (#4611)

* Adding basic colors to tailwind theme

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

* Using tailwind inline to style close button

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

* Make Select look similar to inputs

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

* Moving styles into separate module

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

* Convert tailwind commands to css

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

src/renderer/components/layout/close-button.module.scss

@@ -0,0 +1,52 @@
+/**
+ * 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.
+ */
+
+.closeButton {
+  width: 35px;
+  height: 35px;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  border: 2px solid var(--textColorDimmed);
+  border-radius: 50%;
+
+  &:hover {
+    background-color: #72767d25;
+  }
+
+  &:active {
+    transform: translateY(1px);
+  }
+}
+
+.icon {
+  color: var(--textColorAccent);
+  opacity: 0.6;
+}
+
+.esc {
+  text-align: center;
+  margin-top: var(--margin);
+  font-weight: bold;
+  user-select: none;
+  color: var(--textColorDimmed);
+  pointer-events: none;
+}

src/renderer/components/layout/close-button.tsx

@@ -0,0 +1,41 @@
+/**
+ * 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.
+ */
+
+import styles from "./close-button.module.scss";
+
+import React, { HTMLAttributes } from "react";
+import { Icon } from "../icon";
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+}
+
+export function CloseButton(props: Props) {
+  return (
+    <div {...props}>
+      <div className={styles.closeButton} role="button" aria-label="Close">
+        <Icon material="close" className={styles.icon}/>
+      </div>
+      <div className={styles.esc} aria-hidden="true">
+        ESC
+      </div>
+    </div>
+  );
+}

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

@@ -138,41 +138,7 @@
     }
 
     > .toolsRegion {
-      .fixedTools {
+      width: 45px;
-        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;
-        }
-      }
     }
   }
 

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

@@ -25,8 +25,8 @@ import React from "react";
 import { observer } from "mobx-react";
 import { cssNames, IClassName } from "../../utils";
 import { navigation } from "../../navigation";
-import { Icon } from "../icon";
 import { catalogURL } from "../../../common/routes";
+import { CloseButton } from "./close-button";
 
 export interface SettingLayoutProps extends React.DOMAttributes<any> {
   className?: IClassName;
@@ -104,13 +104,8 @@ export class SettingLayout extends React.Component<SettingLayoutProps> {
           <div className="toolsRegion">
             {
               this.props.provideBackButtonNavigation && (
-                <div className="fixedTools">
+                <div className="fixed top-[60px]">
-                  <div className="closeBtn" role="button" aria-label="Close" onClick={back}>
+                  <CloseButton onClick={back}/>
-                    <Icon material="close" />
-                  </div>
-                  <div className="esc" aria-hidden="true">
-                    ESC
-                  </div>
                 </div>
               )
             }

src/renderer/components/select/select.scss

@@ -228,10 +228,15 @@ html {
       }
 
       .Select {
+        &__value-container {
+          margin-top: 2px;
+          margin-bottom: 2px;
+        }
+
         &__control {
           box-shadow: 0 0 0 1px var(--inputControlBorder);
           background: var(--inputControlBackground);
-          border-radius: 5px;
+          border-radius: var(--border-radius);
         }
 
         &__single-value {

tailwind.config.js

@@ -26,7 +26,14 @@ module.exports = {
     fontFamily: {
       sans: ["Roboto", "Helvetica", "Arial", "sans-serif"],
     },
-    extend: {},
+    extend: {
+      colors: {
+        textAccent: "var(--textColorAccent)",
+        textPrimary: "var(--textColorPrimary)",
+        textTertiary: "var(--textColorTertiary)",
+        textDimmed: "var(--textColorDimmed)",
+      },
+    },
   },
   variants: {
     extend: {},