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

Default button styles

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2022-05-12 13:48:37 +03:00
parent d42a08f114
commit 3b4f8779b7
3 changed files with 47 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/renderer/components/update-button/__tests__/__snapshots__/update-button.test.tsx.snap
View File

@ -7,15 +7,24 @@ exports[`<UpdateButton/> should render if warning level prop passed 1`] = `
id="update_button_2"
>
Update
<i
class="Icon material focusable"
<svg
height="12"
shape-rendering="crispEdges"
viewBox="0 0 12 12"
width="12"
>
<span
class="icon"
data-icon-name="update"
>
update
</span>
</i>
<path
d="M0,8.5h12v1H0V8.5z"
fill="currentColor"
/>
<path
d="M0,5.5h12v1H0V5.5z"
fill="currentColor"
/>
<path
d="M0,2.5h12v1H0V2.5z"
fill="currentColor"
/>
</svg>
</button>
`;

25
src/renderer/components/update-button/styles.module.scss
View File

@ -3,7 +3,30 @@
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
.updateButton {}
.updateButton {
--active-color-hsl: 122deg 39% 49%;
--active-color: hsl(var(--active-color-hsl));
border: 1px solid var(--active-color);
border-radius: 4px;
background: hsl(var(--active-color-hsl) / 15%);
color: var(--active-color);
display: flex;
align-items: center;
padding: 4px 8px;
gap: 8px;
cursor: default;
transition: background-color 0.1s;
&:hover {
background: hsl(var(--active-color-hsl) / 5%);
}
&:focus-visible {
box-shadow: 0 0 0 2px var(--blue);
border-color: transparent;
}
}
.warningHigh {}

7
src/renderer/components/update-button/update-button.tsx
View File

@ -6,7 +6,6 @@
import styles from "./styles.module.scss";
import React, { useState } from "react";
import { Icon } from "../icon";
import { Menu, MenuItem } from "../menu";
import uniqueId from "lodash/uniqueId";
import { noop } from "lodash";
@ -48,7 +47,11 @@ export function UpdateButton({ warningLevel, update }: UpdateButtonProps) {
onKeyDown={onKeyDown}
>
Update
<Icon material="update"/>
<svg width="12" height="12" viewBox="0 0 12 12" shapeRendering="crispEdges">
<path fill="currentColor" d="M0,8.5h12v1H0V8.5z"/>
<path fill="currentColor" d="M0,5.5h12v1H0V5.5z"/>
<path fill="currentColor" d="M0,2.5h12v1H0V2.5z"/>
</svg>
</button>
<Menu
usePortal