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

Remove HotbarIcon box-shadow artifacts (#5142)

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com>
This commit is contained in:
Alex Andreev 2022-03-30 15:23:46 +03:00 committed by Jim Ehrismann
parent 6cf438e077
commit 081e16b09e
3 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/renderer/components/avatar/avatar.tsx
View File

@ -57,14 +57,7 @@ function getLabelFromTitle(title: string) {
export function Avatar(props: AvatarProps) {
const { title, variant = "rounded", size = 32, colorHash, children, background, imgProps, src, className, disabled, ...rest } = props;
const getBackgroundColor = () => {
if (src) {
return "transparent";
}
return background || randomColor({ seed: colorHash, luminosity: "dark" });
};
const colorFromHash = randomColor({ seed: colorHash, luminosity: "dark" });
const renderContents = () => {
if (src) {
@ -81,7 +74,11 @@ export function Avatar(props: AvatarProps) {
[styles.rounded]: variant == "rounded",
[styles.disabled]: disabled,
}, className)}
style={{ width: `${size}px`, height: `${size}px`, backgroundColor: getBackgroundColor() }}
style={{
width: `${size}px`,
height: `${size}px`,
background: background || (src ? "transparent" : colorFromHash),
}}
{...rest}
>
{renderContents()}

7
src/renderer/components/hotbar/hotbar-icon.module.scss
View File

@ -4,7 +4,8 @@
*/
.HotbarIcon {
--iconActiveShadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px var(--textColorAccent);
--corner: 0px 0px 0px 1px var(--clusterMenuBackground);
--iconActiveShadow: var(--corner), var(--corner), 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px var(--textColorAccent);
--iconHoverShadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px #ffffff50;
display: flex;
@ -24,6 +25,10 @@
.avatar {
border-radius: 6px;
&.hasImage {
background-color: var(--clusterMenuCellBackground);
}
}
.active {

2
src/renderer/components/hotbar/hotbar-icon.tsx
View File

@ -61,7 +61,7 @@ export const HotbarIcon = observer(({ menuItems = [], size = 40, tooltip, ...pro
id={id}
title={title}
colorHash={`${title}-${source}`}
className={cssNames(styles.avatar, { [styles.active]: active })}
className={cssNames(styles.avatar, { [styles.active]: active, [styles.hasImage]: !!src })}
disabled={disabled}
size={size}
src={src}