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

Align HotbarSelector elements with status bar items (#5755)

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2022-06-29 15:44:36 +03:00 committed by GitHub
parent 21109f36ca
commit 014ec6a03b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 11 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/renderer/components/hotbar/hotbar-selector.module.scss
View File

@ -6,9 +6,10 @@
.HotbarSelector { .HotbarSelector {
display: flex; display: flex;
align-items: center; align-items: center;
height: 26px; height: 25px;
background-color: var(--layoutBackground); background-color: var(--layoutBackground);
position: relative; position: relative;
justify-content: center;
&:before { &:before {
content: " "; content: " ";
@ -21,8 +22,7 @@
.HotbarIndex { .HotbarIndex {
display: flex; display: flex;
flex-grow: 1; width: 3ch;
align-items: center;
} }
.Badge { .Badge {
@ -30,21 +30,17 @@
background: var(--secondaryBackground); background: var(--secondaryBackground);
width: 100%; width: 100%;
color: var(--settingsColor); color: var(--settingsColor);
padding-top: 3px; padding: 0px calc(var(--padding) / 2);
} }
.Icon { .Icon {
--size: 16px;
padding: 0 4px 0 0px;
margin: 0px 4px;
&:hover { &:hover {
box-shadow: none; box-shadow: none;
background-color: transparent; background-color: transparent;
} }
&.previous { &:focus-visible {
transform: rotateY(180deg); z-index: 1;
} }
} }
} }

4
src/renderer/components/hotbar/hotbar-selector.tsx
View File

@ -58,7 +58,7 @@ const NonInjectedHotbarSelector = observer(({ hotbar, hotbarStore, openCommandOv
return ( return (
<div className={styles.HotbarSelector}> <div className={styles.HotbarSelector}>
<Icon <Icon
material="play_arrow" material="arrow_left"
className={cssNames(styles.Icon, styles.previous)} className={cssNames(styles.Icon, styles.previous)}
onClick={onPrevClick}/> onClick={onPrevClick}/>
<div className={styles.HotbarIndex}> <div className={styles.HotbarIndex}>
@ -80,7 +80,7 @@ const NonInjectedHotbarSelector = observer(({ hotbar, hotbarStore, openCommandOv
</Tooltip> </Tooltip>
</div> </div>
<Icon <Icon
material="play_arrow" material="arrow_right"
className={styles.Icon} className={styles.Icon}
onClick={onNextClick} onClick={onNextClick}
/> />

4
src/renderer/components/status-bar/status-bar.module.scss
View File

@ -19,17 +19,19 @@
.leftSide { .leftSide {
display: flex; display: flex;
align-items: center; align-items: center;
padding-inline-start: calc(var(--padding) / 2);
} }
.rightSide { .rightSide {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
padding-inline-end: calc(var(--padding) / 2);
} }
.item { .item {
height: 100%; height: 100%;
padding: 0 4px; padding-inline: calc(var(--padding) / 4);
display: flex; display: flex;
align-items: center; align-items: center;