mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
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>
This commit is contained in:
Alex Andreev
GitHub
parent
41aacb3db2
commit
d8dbe51e7a
52
src/renderer/components/layout/close-button.module.scss
Normal file
52
src/renderer/components/layout/close-button.module.scss
Normal file
@ -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;
|
||||
}
|
||||
41
src/renderer/components/layout/close-button.tsx
Normal file
41
src/renderer/components/layout/close-button.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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="closeBtn" role="button" aria-label="Close" onClick={back}>
|
||||
<Icon material="close" />
|
||||
</div>
|
||||
<div className="esc" aria-hidden="true">
|
||||
ESC
|
||||
</div>
|
||||
<div className="fixed top-[60px]">
|
||||
<CloseButton onClick={back}/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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: {},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user