Highlight on hover/active

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 {

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>

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 {