refactor(AppMenu): Tweak code and styles.

lib/components/app/app-menu.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { Component, Fragment } from 'react'
 import PropTypes from 'prop-types'
 import qs from 'qs'
 import { connect } from 'react-redux'
@@ -80,28 +80,22 @@ class AppMenu extends Component {
 
         if (children) {
           return (
-            <>
+            <Fragment key={id}>
               <MenuItem
-                className='expansion-button-container menu-item'
-                header
-                key={id}
+                className='expansion-button-container menu-item expand-submenu-button'
+                onSelect={() => this._toggleSubmenu(id)}
               >
-                <button
-                  className='expand-submenu-button'
-                  onClick={() => this._toggleSubmenu(id)}
-                >
-                  <IconAndLabel
-                    iconType={iconType}
-                    iconUrl={iconUrl}
-                    label={label}
+                <IconAndLabel
+                  iconType={iconType}
+                  iconUrl={iconUrl}
+                  label={label}
+                />
+                <span>
+                  <Icon
+                    className='expand-menu-chevron'
+                    type={`chevron-${isSubmenuExpanded ? 'up' : 'down'}`}
                   />
-                  <span>
-                    <Icon
-                      className='expand-menu-chevron'
-                      name={`chevron-${isSubmenuExpanded ? 'up' : 'down'}`}
-                    />
-                  </span>
-                </button>
+                </span>
               </MenuItem>
               <VelocityTransitionGroup
                 enter={{ animation: 'slideDown' }}
@@ -113,7 +107,7 @@ class AppMenu extends Component {
                   </div>
                 )}
               </VelocityTransitionGroup>
-            </>
+            </Fragment>
           )
         }
 
@@ -192,13 +186,13 @@ class AppMenu extends Component {
                 className='menu-item'
                 onClick={resetAndToggleFieldTrips}
               >
-                <Icon name='' />
+                <Icon name='graduation-cap' />
                 Field Trip
               </MenuItem>
             )}
             {mailablesEnabled && (
               <MenuItem className='menu-item' onClick={toggleMailables}>
-                <Icon name='' />
+                <Icon name='envelope-o' />
                 Mailables
               </MenuItem>
             )}

lib/index.css

@@ -98,6 +98,7 @@ input[type="text"]::-ms-clear {
 
 .app-menu li a {
   color: inherit;
+  font-size: 20px;
   text-decoration: none;
   outline: none;
 }
@@ -129,11 +130,10 @@ input[type="text"]::-ms-clear {
   white-space: nowrap;
 }
 
-.expand-submenu-button {
+.expand-submenu-button a {
   display: flex;
   width: 100%;
   justify-content: space-between;
-  margin: 0rem 0rem 0rem -0.5rem;
   background: transparent;
   border: none;
   outline: none;