1
0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00

Convert CloseButton styles out from css modules (#4723)

* Convert CloseButton styles out from css modules

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

* Fix close button styling

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2022-01-19 22:41:28 +03:00 committed by Jim Ehrismann
parent 4b71e02274
commit f200005616
2 changed files with 33 additions and 31 deletions

View File

@ -19,7 +19,8 @@
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
.closeButton {
.SettingsCloseButton {
.closeIcon {
width: 35px;
height: 35px;
display: grid;
@ -35,14 +36,14 @@
&:active {
transform: translateY(1px);
}
}
.icon {
.Icon {
color: var(--textColorAccent);
opacity: 0.6;
}
}
.esc {
.escLabel {
text-align: center;
margin-top: var(--margin);
font-weight: bold;
@ -50,3 +51,4 @@
color: var(--textColorDimmed);
pointer-events: none;
}
}

View File

@ -19,7 +19,7 @@
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
import styles from "./close-button.module.scss";
import "./close-button.scss";
import React, { HTMLAttributes } from "react";
import { Icon } from "../icon";
@ -29,11 +29,11 @@ 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 className="SettingsCloseButton" {...props}>
<div className="closeIcon" role="button" aria-label="Close">
<Icon material="close" />
</div>
<div className={styles.esc} aria-hidden="true">
<div className="escLabel" aria-hidden="true">
ESC
</div>
</div>