hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Moving styles into separate module

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-12-27 15:02:17 +03:00
parent f1971387ab
commit af43768fb1
3 changed files with 76 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/renderer/components/layout/close-button.module.scss Normal file
View File

@ -0,0 +1,33 @@
/**
* 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 {
@apply w-[35px] h-[35px] grid place-items-center cursor-pointer border-2 rounded-full border-solid border-textDimmed
hover:bg-[#72767d25] active:translate-y-px;
}
.icon {
@apply text-textAccent opacity-60;
}
.esc {
@apply text-center mt-3 font-bold text-lg select-none text-textDimmed pointer-events-none;
}

41
src/renderer/components/layout/close-button.tsx Normal file
View 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>
);
}

17
src/renderer/components/layout/setting-layout.tsx
View File

@ -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;
@ -105,20 +105,7 @@ export class SettingLayout extends React.Component<SettingLayoutProps> {
{
this.props.provideBackButtonNavigation && (
<div className="fixed top-[60px]">
<div
className="w-[35px] h-[35px] grid place-items-center pointer border-2 rounded-full border-solid border-textDimmed hover:bg-[#72767d25] active:translate-y-px"
role="button"
aria-label="Close"
onClick={back}
>
<Icon material="close" className="text-textAccent opacity-60" />
</div>
<div
className="text-center mt-3 font-bold text-lg select-none text-textDimmed pointer-events-none"
aria-hidden="true"
>
ESC
</div>
<CloseButton onClick={back}/>
</div>
)
}