dropdowns

resources/frontend_client/app/components/dropdown/dropdown.css

@@ -12,7 +12,6 @@
   z-index: 20;
   position: absolute;
   top: 40px;
-  padding: 1em;
   min-width: 200px;
   margin-top: 18px;
   border: 1px solid var(--dropdown-border-color);
@@ -20,6 +19,8 @@
   border-radius: 4px;
   box-shadow: 0 0 2px rgba(0, 0, 0, .12);
   background-clip: padding-box;
+  padding-top: 1em;
+  padding-bottom: 1em;
 }
 
 .Dropdown-content:before {
@@ -45,4 +46,14 @@
 .Dropdown-item {
     padding-top: 1em;
     padding-bottom: 1em;
+    padding-left: 2em;
+    padding-right: 2em;
+}
+
+.Dropdown-item:hover {
+    background-color: var(--brand-color);
+}
+
+.Dropdown-item:hover a {
+    color: #fff;
 }

resources/frontend_client/index.html

@@ -38,7 +38,7 @@
                         <a class="NavItem" selectable-nav-item="settings" dropdown-toggle>
                             <span class="NavItem-text" ng-if="!user.first_name">Me</span>
                             <span class="NavItem-text" ng-if="user.first_name">{{user.first_name}}</span>
-                            <cv-chevron-down-icon width="8px" height="8px"></cv-chevron-down-icon>
+                            <mb-icon name="chevrondown" width="8px" height="8px"></mb-icon>
                         </a>
                         <ul class="Dropdown-content right">
                             <li><a class="link" href="/user/edit_current">Account Settings</a></li>