Refactor Zelda dropdown styles

- New styles for dropdowns
- Fix minor tag-delete button bug
- Fix minor alignment bug on invite-user modal
- Update "about ghost" icon

app/styles/components/dropdowns.css

@@ -16,9 +16,9 @@
     left: 0;
     float: left;
     margin: 2px 0 0;
-    padding: 5px 0;
+    padding: 10px;
     min-width: 220px;
-    border: color(var(--lightgrey) lightness(-15%)) 1px solid;
+    border: #e1e1e1 1px solid;
     background-color: #fff;
     background-clip: padding-box;
     border-radius: 4px;
@@ -38,28 +38,32 @@
 
 .dropdown-menu .divider {
     overflow: hidden;
-    margin: 4px 0;
+    margin: 8px 0;
     height: 1px;
-    background: color(var(--lightgrey) lightness(-5%));
+    background: color(#e1e1e1 lightness(+5%));
 }
 
 .dropdown-menu > li > a,
 .dropdown-menu > li > button {
     display: flex;
+    align-items: center;
     clear: both;
-    padding: 3px 20px;
+    padding: 6px 10px;
     width: 100%;
-    color: #333;
+    border-radius: 3px;
+    color: color(var(--darkgrey) lightness(+20%));
     text-align: left;
     white-space: nowrap;
-    line-height: 1.9em;
+    font-size: 1.3rem;
+    line-height: 1em;
     font-weight: normal;
     transition: none;
 }
 
 .dropdown-menu i {
-    margin-right: 0.5rem;
-    font-size: 0.9em;
+    margin-right: 10px;
+    font-size: 14px;
+    line-height: 1em;
 }
 
 
@@ -71,8 +75,8 @@
 .dropdown-menu > li > a:focus,
 .dropdown-menu > li > button:hover,
 .dropdown-menu > li > button:focus {
-    background: var(--blue);
-    color: #fff;
+    background: color(var(--blue) alpha(-85%));
+    color: var(--darkgrey);
     text-decoration: none;
 }
 

app/styles/layouts/users.css

@@ -229,5 +229,6 @@ a.user-list-item {
 }
 
 .invite-new-user .btn-green {
+    margin: 0;
     width: 100%;
 }

app/templates/components/gh-nav-menu.hbs

@@ -8,10 +8,9 @@
 {{/gh-dropdown-button}}
 {{#gh-dropdown tagName="div" classNames="dropdown" name="user-menu" closeOnClick="true"}}
     <ul class="dropdown-menu dropdown-triangle-top js-user-menu-dropdown-menu" role="menu" style="right:-50%;left:auto;margin-right:40px">
-        <li role="presentation">{{#link-to "about" classNames="gh-nav-menu-about dropdown-item js-nav-item" role="menuitem" tabindex="-1"}}<i class="icon-gh"></i> About Ghost{{/link-to}}</li>
+        <li role="presentation">{{#link-to "about" classNames="gh-nav-menu-about dropdown-item js-nav-item" role="menuitem" tabindex="-1"}}<i class="icon-shop"></i> About Ghost{{/link-to}}</li>
         <li class="divider"></li>
         <li role="presentation">{{#link-to "settings.users.user" session.user.slug classNames="dropdown-item user-menu-profile js-nav-item" role="menuitem" tabindex="-1"}}<i class="icon-user"></i> Your Profile{{/link-to}}</li>
-        <li class="divider"></li>
         <li role="presentation">{{#link-to "signout" classNames="dropdown-item user-menu-signout" role="menuitem" tabindex="-1"}}<i class="icon-signout"></i> Sign Out{{/link-to}}</li>
     </ul>
 {{/gh-dropdown}}

app/templates/settings/tags/settings-menu.hbs

@@ -35,7 +35,7 @@
                 </ul>
 
                 {{#unless activeTag.isNew}}
-                    <button type="button" class="btn btn-link btn-sm tag-delete-button icon-trash" {{action "openModal" "delete-tag" activeTag}}>Delete Tag</button>
+                    <button type="button" class="btn btn-link btn-sm tag-delete-button" {{action "openModal" "delete-tag" activeTag}}><i class="icon-trash"></i> Delete Tag</button>
                 {{/unless}}
             </form>
         </div>