changed a link into a button

i18n

5 files changed, 23 insertions, 14 deletions

diff --git a/app/assets/javascripts/ide/components/ide_review.vue b/app/assets/javascripts/ide/components/ide_review.vue
index ec2af50283a..99fa2465a84 100644
--- a/app/assets/javascripts/ide/components/ide_review.vue
+++ b/app/assets/javascripts/ide/components/ide_review.vue
@@ -18,6 +18,9 @@ export default {
     showMergeRequestText() {
       return this.currentMergeRequestId && this.viewer === viewerTypes.mr;
     },
+    mergeRequestId() {
+      return `!${this.currentMergeRequest.iid}`;
+    },
   },
   mounted() {
     this.$nextTick(() => {
@@ -57,7 +60,8 @@ export default {
           (<a
             v-if="currentMergeRequest"
             :href="currentMergeRequest.web_url"
-          >!{{ currentMergeRequest.iid }}</a>)
+            v-text="mergeRequestId"
+          ></a>)
         </template>
       </div>
     </template>
diff --git a/app/assets/javascripts/ide/components/ide_side_bar.vue b/app/assets/javascripts/ide/components/ide_side_bar.vue
index 11ac14dfce8..1dc2170edde 100644
--- a/app/assets/javascripts/ide/components/ide_side_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_side_bar.vue
@@ -127,9 +127,8 @@ export default {
           class="context-header ide-context-header dropdown"
           ref="mergeRequestDropdown"
         >
-          <a
-            href="#"
-            role="button"
+          <button
+            type="button"
             data-toggle="dropdown"
           >
             <div
@@ -185,7 +184,7 @@ export default {
               class="ml-auto"
               name="chevron-down"
             />
-          </a>
+          </button>
           <merge-request-dropdown
             :show="showMergeRequestsDropdown"
           />
diff --git a/app/assets/javascripts/ide/components/merge_requests/list.vue b/app/assets/javascripts/ide/components/merge_requests/list.vue
index fdadc89a628..5896e3a147d 100644
--- a/app/assets/javascripts/ide/components/merge_requests/list.vue
+++ b/app/assets/javascripts/ide/components/merge_requests/list.vue
@@ -82,7 +82,7 @@ export default {
       <input
         type="search"
         class="dropdown-input-field"
-        placeholder="Search merge requests"
+        :placeholder="__('Search merge requests')"
         v-model="search"
         @input="searchMergeRequests"
         ref="searchInput"
diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss
index 2e5194829f9..9cbaaa5dc8d 100644
--- a/app/assets/stylesheets/framework/contextual_sidebar.scss
+++ b/app/assets/stylesheets/framework/contextual_sidebar.scss
@@ -26,18 +26,24 @@
   margin-right: 2px;
   width: $contextual-sidebar-width;
 
-  a {
+  > a,
+  > button {
     transition: padding $sidebar-transition-duration;
     font-weight: $gl-font-weight-bold;
     display: flex;
+    width: 100%;
     align-items: center;
     padding: 10px 16px 10px 10px;
     color: $gl-text-color;
+    background-color: transparent;
+    border: 0;
+    text-align: left;
 
     &:hover,
-    a:hover {
+    &:focus {
       background-color: $link-hover-background;
       color: $gl-text-color;
+      outline: 0;
     }
   }
 
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 741b4179e80..3c7edb0d4bb 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -458,14 +458,10 @@
     width: auto;
     margin-right: 0;
 
-    a {
+    > a,
+    > button {
       height: 60px;
     }
-
-    a:hover,
-    a:focus {
-      text-decoration: none;
-    }
   }
 
   .projects-sidebar {
@@ -1302,6 +1298,10 @@
   .dropdown-input {
     padding-left: $gl-padding;
     padding-right: $gl-padding;
+
+    .fa {
+      right: 26px;
+    }
   }
 
   .btn-link {