Remove usage on gr-repo-command

Also improve the style of the dialog a bit,
fix the broken `close` due to deprecated `fire` method

Screenshot: https://imgur.com/kkZeRdF
Change-Id: I4d64f9ac18e9548935bb94ca8e91fe2f1c36e76e
diff --git a/rv-reviewers/rv-edit-screen.js b/rv-reviewers/rv-edit-screen.js
index 36ff185..0c692f5 100644
--- a/rv-reviewers/rv-edit-screen.js
+++ b/rv-reviewers/rv-edit-screen.js
@@ -72,7 +72,9 @@
 
   _handleCloseTap(e) {
     e.preventDefault();
-    this.fire('close', null, {bubbles: false});
+    this.dispatchEvent(new CustomEvent('close', {
+      composed: true, bubbles: false,
+    }));
   }
 
   _handleReviewerChanged(e) {
diff --git a/rv-reviewers/rv-edit-screen_html.js b/rv-reviewers/rv-edit-screen_html.js
index c6e46a5..63ea346 100644
--- a/rv-reviewers/rv-edit-screen_html.js
+++ b/rv-reviewers/rv-edit-screen_html.js
@@ -20,6 +20,9 @@
     <style include="shared-styles"></style>
     <style include="gr-menu-page-styles"></style>
     <style include="gr-subpage-styles">
+      :host {
+        padding: var(--spacing-xl);
+      }
       .bottomButtons {
         display: flex;
       }
diff --git a/rv-reviewers/rv-filter-section.js b/rv-reviewers/rv-filter-section.js
index 568ba6d..3bf6d06 100644
--- a/rv-reviewers/rv-filter-section.js
+++ b/rv-reviewers/rv-filter-section.js
@@ -90,7 +90,12 @@
   _handleReviewerAdded(e) {
     this._editingReviewer = false;
     this._putReviewer(e.detail.reviewer, 'ADD').catch(err => {
-      this.fire('show-alert', {message: err});
+      this.dispatchEvent(new CustomEvent('show-alert', {
+        detail: {
+          message: err,
+        },
+        composed: true, bubbles: true,
+      }));
       throw err;
     });
   }
diff --git a/rv-reviewers/rv-filter-section_html.js b/rv-reviewers/rv-filter-section_html.js
index e850b39..b4a72e4 100644
--- a/rv-reviewers/rv-filter-section_html.js
+++ b/rv-reviewers/rv-filter-section_html.js
@@ -29,6 +29,9 @@
         align-items: center;
         display: flex;
       }
+      .name gr-button {
+        margin-left: var(--spacing-m);
+      }
       .header {
         align-items: center;
         background: var(--table-header-background-color);
diff --git a/rv-reviewers/rv-reviewer_html.js b/rv-reviewers/rv-reviewer_html.js
index a4eee47..0e9becb 100644
--- a/rv-reviewers/rv-reviewer_html.js
+++ b/rv-reviewers/rv-reviewer_html.js
@@ -16,6 +16,10 @@
  */
 export const htmlTemplate = Polymer.html`
     <style include="shared-styles">
+      :host {
+        display: block;
+        padding: var(--spacing-s) 0;
+      }
       #editReviewerInput {
         display: block;
         width: 250px;
@@ -29,7 +33,7 @@
       #deleteCancelBtn,
       #addBtn,
       #reviewerField {
-          margin-left: 3px;
+        margin-left: var(--spacing-m);
       }
       #reviewerField {
         width: 250px;
diff --git a/rv-reviewers/rv-reviewers_html.js b/rv-reviewers/rv-reviewers_html.js
index 358e5e5..53a8aec 100644
--- a/rv-reviewers/rv-reviewers_html.js
+++ b/rv-reviewers/rv-reviewers_html.js
@@ -18,15 +18,21 @@
 
 export const htmlTemplate = Polymer.html`
     <style include="shared-styles">
+      :host {
+        display: block;
+        margin-bottom: var(--spacing-xxl);
+      }
       #rvScreenOverlay {
         width: 50em;
         overflow: auto;
       }
     </style>
-    <gr-repo-command
-        title="Reviewers Config"
-        on-command-tap="_handleCommandTap">
-    </gr-repo-command>
+    <h3>Reviewers Config</h3>
+    <gr-button
+      on-click="_handleCommandTap"
+    >
+      Reviewers Config
+    </gr-button>
     <gr-overlay id="rvScreenOverlay" with-backdrop>
       <rv-edit-screen
           plugin-rest-api="[[pluginRestApi]]"