From 241598c5aa3148da388ecc0a53cf3cbcf8b7cdbb Mon Sep 17 00:00:00 2001
From: Ray Schamp <ray@scratch.mit.edu>
Date: Thu, 12 Apr 2018 16:27:28 -0400
Subject: [PATCH] Fix hover states
---
src/components/menu-bar/menu-bar.css | 6 +++---
src/components/menu-bar/menu-bar.jsx | 22 +++++++++++++++++-----
2 files changed, 20 insertions(+), 8 deletions(-)
diff --git a/src/components/menu-bar/menu-bar.css b/src/components/menu-bar/menu-bar.css
index 0bcec8bd2..88f69ccfb 100644
--- a/src/components/menu-bar/menu-bar.css
+++ b/src/components/menu-bar/menu-bar.css
@@ -69,7 +69,7 @@
}
.menu-bar-item.active,
-.menu-bar-item:hover {
+.menu-bar-item.hoverable:hover {
background-color: $ui-black-transparent;
}
@@ -138,7 +138,7 @@
}
.mystuff-icon {
- margin-right: .5rem;
+ margin: 0 .25rem;
height: 1rem;
}
@@ -150,7 +150,7 @@
}
.profile-icon {
- margin-right: .5rem;
+ margin: 0 .25rem;
width: 2rem;
border-radius: 0.25rem;
}
diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx
index 1574014fd..7122aff64 100644
--- a/src/components/menu-bar/menu-bar.jsx
+++ b/src/components/menu-bar/menu-bar.jsx
@@ -100,7 +100,7 @@ const MenuBar = props => (
src={scratchLogo}
/>
</div>
- <div className={classNames(styles.menuBarItem)}>
+ <div className={classNames(styles.menuBarItem, styles.hoverable)}>
<MenuBarItemTooltip
id="menubar-selector"
place="right"
@@ -109,7 +109,7 @@ const MenuBar = props => (
</MenuBarItemTooltip>
</div>
<div
- className={classNames(styles.menuBarItem, {
+ className={classNames(styles.menuBarItem, styles.hoverable, {
[styles.active]: props.fileMenuOpen
})}
onMouseUp={props.onClickFile}
@@ -151,10 +151,10 @@ const MenuBar = props => (
</MenuSection>
</MenuBarMenu>
</div>
- <div className={classNames(styles.menuBarItem)}>
<MenuBarItemTooltip id="edit-menu">
<div className={classNames(styles.editMenu)}>Edit</div>
</MenuBarItemTooltip>
+ <div className={classNames(styles.menuBarItem, styles.hoverable)}>
</div>
</div>
<div className={classNames(styles.divider)} />
@@ -209,7 +209,13 @@ const MenuBar = props => (
</div>
<div className={styles.accountInfoWrapper}>
<MenuBarItemTooltip id="mystuff">
- <div className={styles.mystuffButton}>
+ <div
+ className={classNames(
+ styles.menuBarItem,
+ styles.hoverable,
+ styles.mystuffButton
+ )}
+ >
<img
className={styles.mystuffIcon}
src={mystuffIcon}
@@ -220,7 +226,13 @@ const MenuBar = props => (
id="account-nav"
place="left"
>
- <div className={styles.accountNavMenu}>
+ <div
+ className={classNames(
+ styles.menuBarItem,
+ styles.hoverable,
+ styles.accountNavMenu
+ )}
+ >
<img
className={styles.profileIcon}
src={profileIcon}
--
GitLab