From 56b431da046ff4018a9bb868eed05f7b185cebd3 Mon Sep 17 00:00:00 2001
From: Ray Schamp <ray@scratch.mit.edu>
Date: Thu, 12 Apr 2018 14:21:30 -0400
Subject: [PATCH] Highlight on hover/active

---
 src/components/menu-bar/menu-bar.css | 14 ++++++++++----
 src/components/menu-bar/menu-bar.jsx |  4 +++-
 src/components/menu/menu.css         | 10 ++++++++--
 3 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/components/menu-bar/menu-bar.css b/src/components/menu-bar/menu-bar.css
index eef54ffa6..0bcec8bd2 100644
--- a/src/components/menu-bar/menu-bar.css
+++ b/src/components/menu-bar/menu-bar.css
@@ -39,8 +39,7 @@
 }
 
 .scratch-logo {
-    height:  $menu-bar-height;
-    padding: 0.8rem 0;
+    height:  1.4rem;
     vertical-align: middle;
 }
 
@@ -53,11 +52,11 @@
 .menu {
     /* blocklyToolboxDiv is 40 */
     z-index: 50;
-    top: 31px;
+    top: $menu-bar-height;
 }
 
 .menu-bar-item {
-    display: block;
+    display: flex;
     padding: 0 0.25rem;
     cursor: pointer;
     text-decoration: none;
@@ -65,6 +64,13 @@
     user-select: none;
     align-self: center;
     position: relative;
+    align-items: center;
+    height: $menu-bar-height;
+}
+
+.menu-bar-item.active,
+.menu-bar-item:hover {
+    background-color: $ui-black-transparent;
 }
 
 .file-group {
diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx
index 2915d7d0e..c66fdb2fa 100644
--- a/src/components/menu-bar/menu-bar.jsx
+++ b/src/components/menu-bar/menu-bar.jsx
@@ -102,7 +102,9 @@ const MenuBar = props => (
                     </MenuBarItemTooltip>
                 </div>
                 <div
-                    className={classNames(styles.menuBarItem)}
+                    className={classNames(styles.menuBarItem, {
+                        [styles.active]: props.fileMenuOpen
+                    })}
                     onMouseUp={props.onClickFile}
                 >
                     <div className={classNames(styles.fileMenu)}>File</div>
diff --git a/src/components/menu/menu.css b/src/components/menu/menu.css
index f8c841e38..9940e9611 100644
--- a/src/components/menu/menu.css
+++ b/src/components/menu/menu.css
@@ -5,12 +5,12 @@
     border: 1px solid $ui-black-transparent;
     border-radius: 0 0 4px 4px;
     background-color: $motion-primary;
-    padding: 10px;
+    padding: 0;
+    margin: 0;
     max-width: 260px;
     overflow: visible;
     color: $ui-white;
     font-weight: normal;
-    margin: 0;
 }
 
 .menu.left {
@@ -25,6 +25,12 @@
     display: block;
     line-height: 34px;
     white-space: nowrap;
+    padding: 0 10px;
+}
+
+.menu-item.active,
+.menu-item:hover {
+    background-color: $ui-black-transparent;
 }
 
 .divider {