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

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

@ -4,7 +4,8 @@
*/ */
.HotbarIcon { .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; --iconHoverShadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px #ffffff50;
display: flex; display: flex;
@ -24,6 +25,10 @@
.avatar { .avatar {
border-radius: 6px; border-radius: 6px;
&.hasImage {
background-color: var(--clusterMenuCellBackground);
}
} }
.active { .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} id={id}
title={title} title={title}
colorHash={`${title}-${source}`} colorHash={`${title}-${source}`}
className={cssNames(styles.avatar, { [styles.active]: active })} className={cssNames(styles.avatar, { [styles.active]: active, [styles.hasImage]: !!src })}
disabled={disabled} disabled={disabled}
size={size} size={size}
src={src} src={src}