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" id="update_button_2"
> >
Update Update
<i <svg
class="Icon material focusable" height="12"
shape-rendering="crispEdges"
viewBox="0 0 12 12"
width="12"
> >
<span <path
class="icon" d="M0,8.5h12v1H0V8.5z"
data-icon-name="update" fill="currentColor"
> />
update <path
</span> d="M0,5.5h12v1H0V5.5z"
</i> fill="currentColor"
/>
<path
d="M0,2.5h12v1H0V2.5z"
fill="currentColor"
/>
</svg>
</button> </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. * 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 {} .warningHigh {}

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

@ -6,7 +6,6 @@
import styles from "./styles.module.scss"; import styles from "./styles.module.scss";
import React, { useState } from "react"; import React, { useState } from "react";
import { Icon } from "../icon";
import { Menu, MenuItem } from "../menu"; import { Menu, MenuItem } from "../menu";
import uniqueId from "lodash/uniqueId"; import uniqueId from "lodash/uniqueId";
import { noop } from "lodash"; import { noop } from "lodash";
@ -48,7 +47,11 @@ export function UpdateButton({ warningLevel, update }: UpdateButtonProps) {
onKeyDown={onKeyDown} onKeyDown={onKeyDown}
> >
Update 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> </button>
<Menu <Menu
usePortal usePortal