First FE review changes

app/assets/javascripts/close_reopen_report_toggle.js

@@ -23,30 +23,25 @@ class CloseReopenReportToggle {
   }
 
   updateButton(isClosed) {
-    const action = isClosed ? this.showReopen : this.showClose;
+    this.toggleButtonType(isClosed);
 
-    action.call(this);
     this.button.blur();
   }
 
-  showClose() {
-    this.closeItem.classList.remove('hidden');
-    this.closeItem.classList.add('droplab-item-selected');
+  toggleButtonType(isClosed) {
+    const [showItem, hideItem] = this.getButtonTypes(isClosed);
 
-    this.reopenItem.classList.add('hidden');
-    this.reopenItem.classList.remove('droplab-item-selected');
+    showItem.classList.remove('hidden');
+    showItem.classList.add('droplab-item-selected');
 
-    this.closeItem.click();
+    hideItem.classList.add('hidden');
+    hideItem.classList.remove('droplab-item-selected');
+
+    showItem.click();
   }
 
-  showReopen() {
-    this.reopenItem.classList.remove('hidden');
-    this.reopenItem.classList.add('droplab-item-selected');
-
-    this.closeItem.classList.add('hidden');
-    this.closeItem.classList.remove('droplab-item-selected');
-
-    this.reopenItem.click();
+  getButtonTypes(isClosed) {
+    return isClosed ? [this.reopenItem, this.closeItem] : [this.closeItem, this.reopenItem];
   }
 
   setDisable(shouldDisable) {

app/assets/stylesheets/framework/buttons.scss

@@ -20,7 +20,7 @@
   color: $text;
   border-color: $border;
 
-  > i {
+  > .icon {
     color: $text;
   }
 
@@ -30,7 +30,7 @@
     border-color: $hover-border;
     color: $hover-text;
 
-    > i {
+    > .icon {
       color: $hover-text;
     }
   }
@@ -40,7 +40,7 @@
     border-color: $active-border;
     color: $hover-text;
 
-    > i {
+    > .icon {
       color: $hover-text;
     }
   }

app/assets/stylesheets/framework/dropdowns.scss

@@ -310,18 +310,27 @@
   li {
     padding-top: 6px;
 
-    & > a {
+    > a,
+    > button {
       margin: 0;
       padding: 0;
-      color: inherit;
       border-radius: 0;
       text-overflow: inherit;
+      background-color: inherit;
+      color: inherit;
+      border: inherit;
+      text-align: left;
 
       &:hover,
       &:focus {
         background-color: inherit;
         color: inherit;
       }
+
+      &.btn .fa:not(:last-child) {
+        margin-right: 0;
+        margin-left: 5px;
+      }
     }
 
     &:hover,
@@ -334,12 +343,12 @@
       visibility: visible;
     }
 
-    i {
+    .icon {
       visibility: hidden;
     }
   }
 
-  i {
+  .icon {
     display: inline-block;
     vertical-align: top;
     padding-top: 2px;

app/assets/stylesheets/framework/filters.scss

@@ -70,6 +70,12 @@
 
   .input-token {
     max-width: 200px;
+
+    &:hover,
+    &:focus {
+      background-color: inherit;
+      color: inherit;
+    }
   }
 
   .input-token:only-child,

app/views/shared/issuable/_close_reopen_report_toggle.html.haml

@@ -9,13 +9,13 @@
 .pull-left.btn-group.prepend-left-10.issuable-close-dropdown.droplab-dropdown.js-issuable-close-dropdown
   = link_to "#{display_button_action} #{display_issuable_type}", close_reopen_issuable_path(issuable), { method: button_method.to_s, class: "#{button_class} btn-#{button_action}", title: "#{display_button_action} #{display_issuable_type}" }
 
-  = button_tag type: 'button', class: "#{toggle_class} btn-#{button_action}-color", data: { 'dropdown-trigger' => '#issuable-close-menu' }, 'aria-label' => 'Open close dropdown' do
-    = icon('caret-down', class: 'toggle-icon')
+  = button_tag type: 'button', class: "#{toggle_class} btn-#{button_action}-color", data: { 'dropdown-trigger' => '#issuable-close-menu' }, 'aria-label' => 'Toggle dropdown' do
+    = icon('caret-down', class: 'toggle-icon icon')
 
   %ul#issuable-close-menu.js-issuable-close-menu.dropdown-menu{ class: button_responsive_class, data: { dropdown: true } }
     %li.close-item{ class: "#{issuable.closed? ? 'hidden' : 'droplab-item-selected'}", data: { text: "Close #{display_issuable_type}", url: close_issuable_path(issuable), button_class: "#{button_class} btn-close", toggle_class: "#{toggle_class} btn-close-color", method: button_method } }
-      %a{ href: '#' }
-        = icon('check')
+      %button.btn.btn-transparent
+        = icon('check', class: 'icon')
         .description
           %strong
             Close
@@ -23,8 +23,8 @@
           %p
 
     %li.reopen-item{ class: "#{issuable.closed? ? 'droplab-item-selected' : 'hidden'}", data: { text: "Reopen #{display_issuable_type}", url: reopen_issuable_path(issuable), button_class: "#{button_class} btn-reopen", toggle_class: "#{toggle_class} btn-reopen-color", method: button_method } }
-      %a{ href: '#' }
-        = icon('check')
+      %button.btn.btn-transparent
+        = icon('check', class: 'icon')
         .description
           %strong
             Reopen
@@ -34,8 +34,8 @@
     %li.divider.droplab-item-ignore
 
     %li{ data: { text: 'Report abuse', url: new_abuse_report_path(user_id: issuable.author.id, ref_url: issuable_url(issuable)), button_class: "#{button_class} btn-close-color", toggle_class: "#{toggle_class} btn-close-color", method: '' } }
-      %a{ href: '#' }
-        = icon('check')
+      %button.btn.btn-transparent
+        = icon('check', class: 'icon')
         .description
           %strong Report abuse
           %p

app/views/shared/notes/_comment_button.html.haml

@@ -9,8 +9,8 @@
 
     %ul#resolvable-comment-menu.dropdown-menu{ data: { dropdown: true } }
       %li#comment.droplab-item-selected{ data: { value: '', 'submit-text' => 'Comment', 'close-text' => "Comment & close #{noteable_name}", 'reopen-text' => "Comment & reopen #{noteable_name}" } }
-        %a{ href: '#' }
-          = icon('check')
+        %button.btn.btn-transparent
+          = icon('check', class: 'icon')
           .description
             %strong Comment
             %p
@@ -19,8 +19,8 @@
       %li.divider.droplab-item-ignore
 
       %li#discussion{ data: { value: 'DiscussionNote', 'submit-text' => 'Start discussion', 'close-text' => "Start discussion & close #{noteable_name}", 'reopen-text' => "Start discussion & reopen #{noteable_name}" } }
-        %a{ href: '#' }
-          = icon('check')
+        %button.btn.btn-transparent
+          = icon('check', class: 'icon')
           .description
             %strong Start discussion
             %p