From d8dbe51e7a74595999d3514f4e32818689b8a848 Mon Sep 17 00:00:00 2001 From: Alex Andreev Date: Tue, 28 Dec 2021 17:10:06 +0300 Subject: [PATCH] Fix close button overflow in Preferences (#4611) * Adding basic colors to tailwind theme Signed-off-by: Alex Andreev * Using tailwind inline to style close button Signed-off-by: Alex Andreev * Make Select look similar to inputs Signed-off-by: Alex Andreev * Moving styles into separate module Signed-off-by: Alex Andreev * Convert tailwind commands to css Signed-off-by: Alex Andreev --- .../layout/close-button.module.scss | 52 +++++++++++++++++++ .../components/layout/close-button.tsx | 41 +++++++++++++++ .../components/layout/setting-layout.scss | 36 +------------ .../components/layout/setting-layout.tsx | 11 ++-- src/renderer/components/select/select.scss | 7 ++- tailwind.config.js | 9 +++- 6 files changed, 111 insertions(+), 45 deletions(-) create mode 100644 src/renderer/components/layout/close-button.module.scss create mode 100644 src/renderer/components/layout/close-button.tsx diff --git a/src/renderer/components/layout/close-button.module.scss b/src/renderer/components/layout/close-button.module.scss new file mode 100644 index 0000000000..57a7296339 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/renderer/components/layout/close-button.tsx b/src/renderer/components/layout/close-button.tsx new file mode 100644 index 0000000000..9bdf78f0bd --- /dev/null +++ b/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 { +} + +export function CloseButton(props: Props) { + return ( +
+
+ +
+ +
+ ); +} diff --git a/src/renderer/components/layout/setting-layout.scss b/src/renderer/components/layout/setting-layout.scss index 03472f5579..abb8db3e48 100644 --- a/src/renderer/components/layout/setting-layout.scss +++ b/src/renderer/components/layout/setting-layout.scss @@ -138,41 +138,7 @@ } > .toolsRegion { - .fixedTools { - 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; - } - } + width: 45px; } } diff --git a/src/renderer/components/layout/setting-layout.tsx b/src/renderer/components/layout/setting-layout.tsx index 282eed0dcb..96fad8ea1f 100644 --- a/src/renderer/components/layout/setting-layout.tsx +++ b/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 { className?: IClassName; @@ -104,13 +104,8 @@ export class SettingLayout extends React.Component {
{ this.props.provideBackButtonNavigation && ( -
-
- -
- +
+
) } diff --git a/src/renderer/components/select/select.scss b/src/renderer/components/select/select.scss index 8f5a3fa0e9..7e731a9aca 100644 --- a/src/renderer/components/select/select.scss +++ b/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 { diff --git a/tailwind.config.js b/tailwind.config.js index 1d2f2c9506..7357650c87 100644 --- a/tailwind.config.js +++ b/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: {},