From 16721e6c8bc74a6ea56a7b5d4c8701b273a41c1b Mon Sep 17 00:00:00 2001
From: Becky Siegel <beckysiegel@google.com>
Date: Sat, 30 Sep 2017 10:26:22 +0100
Subject: [PATCH] Update gr-button to use paper button

Mostly styling updates but notable changes:
- Common color in theme.html, should be used by all buttons and links.
- CSS mixin to style gr-button passed to paper button (used in
  gr-label-score-row, gr-linked-chip)
- Some things that look like buttons but aren't exactly buttons get
  text-transform uppercase to appear like a button.
- Primary and secondary buttons are both the same color, but for now
- have not removed secondary so that it's possible to style them
  differently if we decide to.

Change-Id: Ib5ef3b0fc4883cd6dfc5c38e6d954925101d531f
---
 .../gr-change-actions/gr-change-actions.js    |   2 +-
 .../gr-change-metadata.html                   |   6 +
 .../gr-change-metadata/gr-change-metadata.js  |   4 +-
 .../gr-file-list-header.js                    |   2 +-
 .../gr-file-list-header_test.html             |   4 +-
 .../change/gr-file-list/gr-file-list.html     |   2 +-
 .../gr-label-score-row.html                   |  27 +--
 .../gr-label-score-row/gr-label-score-row.js  |   2 +
 .../gr-messages-list_test.html                |  20 ++-
 .../gr-reply-dialog/gr-reply-dialog.html      |   4 -
 .../core/gr-main-header/gr-main-header.html   |   6 +-
 .../diff/gr-diff-view/gr-diff-view.html       |   4 +-
 .../gr-syntax-themes/gr-theme-default.html    |   2 +-
 .../gr-menu-editor/gr-menu-editor.html        |   4 +
 .../gr-settings-view/gr-settings-view.html    |   1 +
 .../gr-watched-projects-editor.html           |   3 +-
 .../gr-account-chip/gr-account-chip.html      |  36 ++--
 .../elements/shared/gr-button/gr-button.html  | 166 ++++++++----------
 .../elements/shared/gr-button/gr-button.js    |   5 +
 .../shared/gr-dropdown/gr-dropdown.html       |  25 +--
 .../shared/gr-dropdown/gr-dropdown.js         |   1 +
 .../gr-editable-label/gr-editable-label.html  |   7 +-
 .../gr-editable-label/gr-editable-label.js    |   5 +
 .../shared/gr-linked-chip/gr-linked-chip.html |  36 ++--
 polygerrit-ui/app/styles/app-theme.html       |   5 +
 polygerrit-ui/app/styles/shared-styles.html   |   3 +
 26 files changed, 201 insertions(+), 181 deletions(-)

diff --git a/polygerrit-ui/app/elements/change/gr-change-actions/gr-change-actions.js b/polygerrit-ui/app/elements/change/gr-change-actions/gr-change-actions.js
index f69e3937ac..9210d1fe81 100644
--- a/polygerrit-ui/app/elements/change/gr-change-actions/gr-change-actions.js
+++ b/polygerrit-ui/app/elements/change/gr-change-actions/gr-change-actions.js
@@ -666,7 +666,7 @@
 
     _handleActionTap(e) {
       e.preventDefault();
-      const el = Polymer.dom(e).rootTarget;
+      const el = e.currentTarget;
       const key = el.getAttribute('data-action-key');
       if (key.startsWith(ADDITIONAL_ACTION_KEY_PREFIX)) {
         this.fire(`${key}-tap`, {node: el});
diff --git a/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.html b/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.html
index cbaf605042..559157db99 100644
--- a/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.html
+++ b/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.html
@@ -107,6 +107,9 @@ limitations under the License.
         opacity: 0;
         pointer-events: none;
       }
+      .hashtagChip {
+        margin-bottom: .5em;
+      }
       #externalStyle {
         display: block;
       }
@@ -222,6 +225,7 @@ limitations under the License.
           </template>
           <template is="dom-if" if="[[!change.topic]]">
             <gr-editable-label
+                uppercase
                 label-text="Add a topic"
                 value="[[change.topic]]"
                 placeholder="[[_computeTopicPlaceholder(_topicReadOnly)]]"
@@ -240,6 +244,7 @@ limitations under the License.
           <span class="value">
             <template is="dom-repeat" items="[[change.hashtags]]">
               <gr-linked-chip
+                  class="hashtagChip"
                   text="[[item]]"
                   href="[[_computeHashtagURL(item)]]"
                   removable="[[!_hashtagReadOnly]]"
@@ -247,6 +252,7 @@ limitations under the License.
               </gr-linked-chip>
             </template>
             <gr-editable-label
+                uppercase
                 label-text="Add a hashtag"
                 value="{{_newHashtag}}"
                 placeholder="[[_computeHashtagPlaceholder(_hashtagReadOnly)]]"
diff --git a/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.js b/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.js
index b5b909abe1..1fb1c15572 100644
--- a/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.js
+++ b/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.js
@@ -14,7 +14,7 @@
 (function() {
   'use strict';
 
-  const HASHTAG_ADD_MESSAGE = 'Click to add';
+  const HASHTAG_ADD_MESSAGE = 'Add Hashtag';
 
   const SubmitTypeLabel = {
     FAST_FORWARD_ONLY: 'Fast Forward Only',
@@ -209,7 +209,7 @@
     },
 
     _computeTopicPlaceholder(_topicReadOnly) {
-      return _topicReadOnly ? 'No Topic' : 'Click to add topic';
+      return _topicReadOnly ? 'No Topic' : 'Add Topic';
     },
 
     _computeHashtagPlaceholder(_hashtagReadOnly) {
diff --git a/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.js b/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.js
index e1c7977128..bd642f53b7 100644
--- a/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.js
+++ b/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.js
@@ -67,7 +67,7 @@
     },
 
     _computeDescriptionPlaceholder(readOnly) {
-      return (readOnly ? 'No' : 'Add a') + ' patch set description';
+      return (readOnly ? 'No' : 'Add') + ' patchset description';
     },
 
     _computeDescriptionReadOnly(loggedIn, change, account) {
diff --git a/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header_test.html b/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header_test.html
index 62ae5c7f17..e2540729c6 100644
--- a/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header_test.html
+++ b/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header_test.html
@@ -93,9 +93,9 @@ limitations under the License.
 
     test('_computeDescriptionPlaceholder', () => {
       assert.equal(element._computeDescriptionPlaceholder(true),
-          'No patch set description');
+          'No patchset description');
       assert.equal(element._computeDescriptionPlaceholder(false),
-          'Add a patch set description');
+          'Add patchset description');
     });
 
     test('_computePatchSetDisabled', () => {
diff --git a/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html b/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html
index 10f4b27b07..1ff01ee70f 100644
--- a/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html
+++ b/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html
@@ -127,7 +127,7 @@ limitations under the License.
         display: none;
       }
       label.show-hide {
-        color: #00f;
+        color: var(--color-link);
         cursor: pointer;
         display: block;
         font-size: .8em;
diff --git a/polygerrit-ui/app/elements/change/gr-label-score-row/gr-label-score-row.html b/polygerrit-ui/app/elements/change/gr-label-score-row/gr-label-score-row.html
index 36e2bc7b23..64960915da 100644
--- a/polygerrit-ui/app/elements/change/gr-label-score-row/gr-label-score-row.html
+++ b/polygerrit-ui/app/elements/change/gr-label-score-row/gr-label-score-row.html
@@ -51,19 +51,24 @@ limitations under the License.
       .selectedValueText.hidden {
         display: none;
       }
-      iron-selector > gr-button:first-of-type {
-        border-bottom-left-radius: 2px;
-        border-top-left-radius: 2px;
-      }
-      iron-selector > gr-button:last-of-type {
-        border-bottom-right-radius: 2px;
-        border-top-right-radius: 2px;
-      }
-      iron-selector > gr-button.iron-selected {
-        background-color: #ddd;
-      }
       gr-button {
         min-width: 40px;
+        --gr-button: {
+          border: 1px solid #d1d2d3;
+          border-radius: 12px;
+          box-shadow: none;
+          padding: .2em .85em;
+        }
+        --gr-button-background: #f5f5f5;
+        --gr-button-color: black;
+        --gr-button-hover-color: black;
+
+      }
+      iron-selector > gr-button.iron-selected {
+        --gr-button-background:#ddd;
+        --gr-button-color: black;
+        --gr-button-hover-background-color: #ddd;
+        --gr-button-hover-color: black;
       }
       .placeholder {
         display: inline-block;
diff --git a/polygerrit-ui/app/elements/change/gr-label-score-row/gr-label-score-row.js b/polygerrit-ui/app/elements/change/gr-label-score-row/gr-label-score-row.js
index 812f0bd6f0..dd0bcccdc8 100644
--- a/polygerrit-ui/app/elements/change/gr-label-score-row/gr-label-score-row.js
+++ b/polygerrit-ui/app/elements/change/gr-label-score-row/gr-label-score-row.js
@@ -106,6 +106,8 @@
       // nothing and then to the new item.
       if (!e.target.selectedItem) { return; }
       this._selectedValueText = e.target.selectedItem.getAttribute('title');
+      // Needed to update the style of the selected button.
+      this.updateStyles();
       this.fire('labels-changed');
     },
 
diff --git a/polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list_test.html b/polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list_test.html
index c47d63fead..15964a7f30 100644
--- a/polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list_test.html
+++ b/polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list_test.html
@@ -86,14 +86,14 @@ limitations under the License.
 
       assert.isFalse(element.$.messageControlsContainer.hasAttribute('hidden'));
       assert.equal(getMessages().length, 20);
-      assert.equal(element.$.incrementMessagesBtn.innerText.trim(),
-          'Show 5 more');
+      assert.equal(element.$.incrementMessagesBtn.innerText.toUpperCase()
+          .trim(), 'SHOW 5 MORE');
       MockInteractions.tap(element.$.incrementMessagesBtn);
       flushAsynchronousOperations();
 
       assert.equal(getMessages().length, 25);
-      assert.equal(element.$.incrementMessagesBtn.innerText.trim(),
-          'Show 1 more');
+      assert.equal(element.$.incrementMessagesBtn.innerText.toUpperCase()
+          .trim(), 'SHOW 1 MORE');
       MockInteractions.tap(element.$.incrementMessagesBtn);
       flushAsynchronousOperations();
 
@@ -108,7 +108,8 @@ limitations under the License.
 
       assert.isFalse(element.$.messageControlsContainer.hasAttribute('hidden'));
       assert.equal(getMessages().length, 20);
-      assert.equal(element.$.oldMessagesBtn.innerText, 'Show all 6 messages');
+      assert.equal(element.$.oldMessagesBtn.innerText.toUpperCase(),
+          'SHOW ALL 6 MESSAGES');
       MockInteractions.tap(element.$.oldMessagesBtn);
       flushAsynchronousOperations();
 
@@ -121,7 +122,8 @@ limitations under the License.
           .concat(_.times(11, randomMessage));
       flushAsynchronousOperations();
 
-      assert.equal(element.$.oldMessagesBtn.innerText, 'Show 1 message');
+      assert.equal(element.$.oldMessagesBtn.innerText.toUpperCase(),
+          'SHOW 1 MESSAGE');
       assert.isFalse(element.$.messageControlsContainer.hasAttribute('hidden'));
       MockInteractions.tap(element.$.automatedMessageToggle);
       flushAsynchronousOperations();
@@ -134,12 +136,14 @@ limitations under the License.
           .concat(_.times(11, randomAutomated));
       flushAsynchronousOperations();
 
-      assert.equal(element.$.oldMessagesBtn.innerText, 'Show 1 message');
+      assert.equal(element.$.oldMessagesBtn.innerText.toUpperCase(),
+          'SHOW 1 MESSAGE');
       assert.isFalse(element.$.messageControlsContainer.hasAttribute('hidden'));
       MockInteractions.tap(element.$.automatedMessageToggle);
       flushAsynchronousOperations();
 
-      assert.equal(element.$.oldMessagesBtn.innerText, 'Show 1 message');
+      assert.equal(element.$.oldMessagesBtn.innerText.toUpperCase(),
+          'SHOW 1 MESSAGE');
       assert.isFalse(element.$.messageControlsContainer.hasAttribute('hidden'));
     });
 
diff --git a/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.html b/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.html
index 161dfe7b67..4b02c3db96 100644
--- a/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.html
+++ b/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.html
@@ -117,10 +117,6 @@ limitations under the License.
       .draftsContainer h3 {
         margin-top: .25em;
       }
-      .action:link,
-      .action:visited {
-        color: #00e;
-      }
       #checkingStatusLabel,
       #notLatestLabel {
         margin-left: 1em;
diff --git a/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.html b/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.html
index 09f3029e9b..9f5d39d96e 100644
--- a/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.html
+++ b/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.html
@@ -67,7 +67,9 @@ limitations under the License.
       .linksTitle {
         color: var(--primary-text-color);
         display: inline-block;
+        font-family: var(--font-family-bold);
         position: relative;
+        text-transform: uppercase;
       }
       .linksTitle:hover {
         opacity: .75;
@@ -157,7 +159,9 @@ limitations under the License.
           </li>
         </template>
         <li>
-          <a class="browse linksTitle" href$="[[_computeRelativeURL('/admin/projects')]]">
+          <a
+              class="browse linksTitle"
+              href$="[[_computeRelativeURL('/admin/projects')]]">
             Browse</a>
         </li>
       </ul>
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.html b/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.html
index 008852e199..e4aaa2b29b 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.html
@@ -85,7 +85,6 @@ limitations under the License.
         vertical-align: middle;
       }
       .dropdown-trigger {
-        color: #00e;
         cursor: pointer;
         padding: 0;
       }
@@ -111,7 +110,7 @@ limitations under the License.
         width: .3em;
       }
       .dropdown-content a:hover {
-        background-color: #00e;
+        background-color: var(--color-link);
         color: #fff;
       }
       .dropdown-content a[selected] {
@@ -125,7 +124,6 @@ limitations under the License.
         color: #000;
       }
       gr-button {
-        font: inherit;
         padding: .3em 0;
         text-decoration: none;
       }
diff --git a/polygerrit-ui/app/elements/diff/gr-syntax-themes/gr-theme-default.html b/polygerrit-ui/app/elements/diff/gr-syntax-themes/gr-theme-default.html
index 31a276f99c..311a5af90c 100644
--- a/polygerrit-ui/app/elements/diff/gr-syntax-themes/gr-theme-default.html
+++ b/polygerrit-ui/app/elements/diff/gr-syntax-themes/gr-theme-default.html
@@ -60,7 +60,7 @@ limitations under the License.
         color: #219;
       }
       .gr-syntax-type {
-        color: #00f;
+        color: var(--color-link);
       }
       .gr-syntax-title {
         color: #0000C0;
diff --git a/polygerrit-ui/app/elements/settings/gr-menu-editor/gr-menu-editor.html b/polygerrit-ui/app/elements/settings/gr-menu-editor/gr-menu-editor.html
index fa3428aa4d..6805885b12 100644
--- a/polygerrit-ui/app/elements/settings/gr-menu-editor/gr-menu-editor.html
+++ b/polygerrit-ui/app/elements/settings/gr-menu-editor/gr-menu-editor.html
@@ -59,18 +59,21 @@ limitations under the License.
               <td class="urlCell">[[item.url]]</td>
               <td class="buttonColumn">
                 <gr-button
+                    link
                     data-index="[[index]]"
                     on-tap="_handleMoveUpButton"
                     class="moveUpButton">↑</gr-button>
               </td>
               <td class="buttonColumn">
                 <gr-button
+                    link
                     data-index="[[index]]"
                     on-tap="_handleMoveDownButton"
                     class="moveDownButton">↓</gr-button>
               </td>
               <td>
                 <gr-button
+                    link
                     data-index="[[index]]"
                     on-tap="_handleDeleteButton"
                     class="remove-button">Delete</gr-button>
@@ -99,6 +102,7 @@ limitations under the License.
             <th></th>
             <th>
               <gr-button
+                  link
                   disabled$="[[_computeAddDisabled(_newName, _newUrl)]]"
                   on-tap="_handleAddButton">Add</gr-button>
             </th>
diff --git a/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.html b/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.html
index cacccdac01..7764d3babf 100644
--- a/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.html
+++ b/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.html
@@ -353,6 +353,7 @@ limitations under the License.
               id="emailEditor"
               has-unsaved-changes="{{_emailsChanged}}"></gr-email-editor>
           <gr-button
+              link
               on-tap="_handleSaveEmails"
               disabled$="[[!_emailsChanged]]">Save changes</gr-button>
         </fieldset>
diff --git a/polygerrit-ui/app/elements/settings/gr-watched-projects-editor/gr-watched-projects-editor.html b/polygerrit-ui/app/elements/settings/gr-watched-projects-editor/gr-watched-projects-editor.html
index a834ea2a61..68b2c23daa 100644
--- a/polygerrit-ui/app/elements/settings/gr-watched-projects-editor/gr-watched-projects-editor.html
+++ b/polygerrit-ui/app/elements/settings/gr-watched-projects-editor/gr-watched-projects-editor.html
@@ -83,6 +83,7 @@ limitations under the License.
               </template>
               <td>
                 <gr-button
+                    link
                     data-index$="[[projectIndex]]"
                     on-tap="_handleRemoveProject">Delete</gr-button>
               </td>
@@ -106,7 +107,7 @@ limitations under the License.
                   placeholder="branch:name, or other search expression">
             </th>
             <th>
-              <gr-button on-tap="_handleAddProject">Add</gr-button>
+              <gr-button link on-tap="_handleAddProject">Add</gr-button>
             </th>
           </tr>
         </tfoot>
diff --git a/polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip.html b/polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip.html
index 90594de331..b6580256a8 100644
--- a/polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip.html
+++ b/polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip.html
@@ -37,24 +37,31 @@ limitations under the License.
       :host([show-avatar]) .container {
         padding-left: 0;
       }
-      gr-button.remove,
       gr-button.remove:hover,
       gr-button.remove:focus {
-        border-color: transparent;
-        color: #333;
+        --gr-button: {
+          color: #333;
+        }
       }
       gr-button.remove {
-        background: #eee;
-        border: 0;
-        color: #666;
-        font-size: 1.7em;
-        font-weight: normal;
-        height: .6em;
-        line-height: .6em;
-        margin-left: .15em;
-        margin-top: -.05em;
-        padding: 0;
-        text-decoration: none;
+        --gr-button: {
+          border: 0;
+          color: #666;
+          font-size: 1.7em;
+          font-weight: normal;
+          height: .6em;
+          line-height: .6em;
+          margin-left: .15em;
+          margin-top: -.05em;
+          padding: 0;
+          text-decoration: none;
+        }
+        --gr-button-hover-color: {
+          color: #333;
+        }
+        --gr-button-hover-background-color: {
+          color: #333;
+        }
       }
       :host:focus {
         border-color: transparent;
@@ -78,6 +85,7 @@ limitations under the License.
       <gr-account-link account="[[account]]"></gr-account-link>
       <gr-button
           id="remove"
+          link
           hidden$="[[!removable]]"
           hidden
           tabindex="-1"
diff --git a/polygerrit-ui/app/elements/shared/gr-button/gr-button.html b/polygerrit-ui/app/elements/shared/gr-button/gr-button.html
index c194bcbc78..f63d7923e7 100644
--- a/polygerrit-ui/app/elements/shared/gr-button/gr-button.html
+++ b/polygerrit-ui/app/elements/shared/gr-button/gr-button.html
@@ -18,122 +18,100 @@ limitations under the License.
 
 <link rel="import" href="../../../behaviors/gr-tooltip-behavior/gr-tooltip-behavior.html">
 <link rel="import" href="../../../behaviors/keyboard-shortcut-behavior/keyboard-shortcut-behavior.html">
+<link rel="import" href="../../../bower_components/paper-button/paper-button.html">
 <link rel="import" href="../../../styles/shared-styles.html">
 
 <dom-module id="gr-button">
   <template strip-whitespace>
     <style include="shared-styles">
       :host {
-        background-color: #f5f5f5;
-        border: 1px solid #d1d2d3;
-        border-radius: 2px;
-        box-sizing: border-box;
-        color: #333;
-        cursor: pointer;
         display: inline-block;
         font-family: var(--font-family-bold);
         font-size: 12px;
-        outline-width: 0;
-        padding: .4em .85em;
         position: relative;
-        text-align: center;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        -webkit-user-select: none;
-        user-select: none;
       }
       :host([hidden]) {
         display: none;
       }
-      :host([primary]),
-      :host([secondary]) {
-        color: #fff;
-      }
-      :host([primary]) {
-        background-color: #4d90fe;
-        border-color: #3079ed;
-      }
-      :host([secondary]) {
-        background-color: #d14836;
-        border-color: transparent;
-      }
-      :host([small]) {
-        font-size: 12px;
-      }
       :host([link]) {
         background-color: transparent;
         border: none;
-        color: #00f;
+        color: var(--color-link);
         font-size: inherit;
-        font-family: var(--font-family);
-        padding: 0;
-        text-decoration: underline;
+        font-family: var(--font-family-bold);
+        text-transform: none;
       }
-      :host([loading]),
-      :host([disabled]) {
+      :host([link]) paper-button {
+        margin: 0;
+        padding: 0;
+        @apply --gr-button;
+      }
+      paper-button[raised] {
+        background-color: var(--gr-button-background, #fff);
+        color: var(--gr-button-color, --color-link);
+      }
+      /* todo (beckysiegel) switch all secondary to primary as there is no color
+        distinction anymore. */
+      :host([primary]) paper-button[raised],
+      :host([secondary]) paper-button[raised] {
+        background-color: var(--color-link);
+        color: #fff;
+      }
+      :host([link]) paper-button:hover,
+      :host([link]) paper-button:focus,
+      paper-button[raised]:hover,
+      paper-button[raised]:focus  {
+        color: var(--gr-button-hover-color, --color-button-hover);
+      }
+      :host([primary]) paper-button[raised]:hover,
+      :host([primary]) paper-button[raised]:focus,
+      :host([secondary]) paper-button[raised]:hover,
+      :host([secondary]) paper-button[raised]:focus {
+        background-color: var(--gr-button-hover-background-color, --color-button-hover);
+        color: var(--gr-button-color, #fff);
+      }
+      paper-button,
+      paper-button[raised],
+      paper-button[link] {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0;
+        min-width: 0;
+        padding: .4em .85em;
+        @apply --gr-button;
+      }
+      :host([link]) paper-button {
+        --paper-button: {
+          padding: 0;
+        }
+      }
+      :host:not([down-arrow]) .downArrow {display: none; }
+      :host([down-arrow]) .downArrow {
+        border-left: .36em solid transparent;
+        border-right: .36em solid transparent;
+        border-top: .36em solid #ccc;
+        margin-left: .5em;
+        transition: border-top-color 200ms;
+      }
+      :host([down-arrow]):hover .downArrow {
+        border-top-color: #666;
+      }
+      :host([loading]) paper-button,
+      :host([disabled]) paper-button {
+        color: #aaa;
+      }
+      :host([loading]) paper-button,
+      :host([loading][disabled]) paper-button {
+        cursor: wait;
         background-color: #efefef;
         color: #aaa;
       }
-      :host([disabled]) {
-        cursor: default;
-      }
-      :host([loading]),
-      :host([loading][disabled]) {
-        cursor: wait;
-      }
-      :host:focus:not([link]),
-      :host:hover:not([link]) {
-        background-color: #f8f8f8;
-        border-color: #aaa;
-      }
-      :host(:active) {
-        border-color: #d1d2d3;
-        color: #aaa;
-      }
-      :host([primary]:focus),
-      :host([secondary]:focus),
-      :host([primary]:active),
-      :host([secondary]:active) {
-        color: #fff;
-      }
-      :host([primary]:focus) {
-        box-shadow: 0 0 1px #00f;
-        background-color: #4d90fe;
-      }
-      :host([primary]:not([disabled]):hover) {
-        background-color: #4d90fe;
-        border-color: #00F;
-      }
-      :host([primary]:active),
-      :host([secondary]:active) {
-        box-shadow: none;
-      }
-      :host([primary]:active) {
-        border-color: #0c2188;
-      }
-      :host([secondary]:focus) {
-        box-shadow: 0 0 1px #f00;
-        background-color: #d14836;
-      }
-      :host([secondary]:not([disabled]):hover) {
-        background-color: #c53727;
-        border: 1px solid #b0281a;
-      }
-      :host([secondary]:active) {
-        border-color: #941c0c;
-      }
-      :host([primary][loading]) {
-        background-color: #7caeff;
-        border-color: transparent;
-        color: #fff;
-      }
-      :host([primary][disabled]) {
-        background-color: #4d90fe;
-        color: #fff;
-        opacity: .5;
-      }
     </style>
-    <content></content>
+    <paper-button raised="[[!link]]">
+      <content></content>
+      <i class="downArrow"></i>
+    </paper-button>
   </template>
   <script src="gr-button.js"></script>
-</dom-module>
+</dom-module>
\ No newline at end of file
diff --git a/polygerrit-ui/app/elements/shared/gr-button/gr-button.js b/polygerrit-ui/app/elements/shared/gr-button/gr-button.js
index ddb2bc303e..80c0a9b0a0 100644
--- a/polygerrit-ui/app/elements/shared/gr-button/gr-button.js
+++ b/polygerrit-ui/app/elements/shared/gr-button/gr-button.js
@@ -18,8 +18,13 @@
     is: 'gr-button',
 
     properties: {
+      downArrow: {
+        type: Boolean,
+        reflectToAttribute: true,
+      },
       link: {
         type: Boolean,
+        value: false,
         reflectToAttribute: true,
       },
       disabled: {
diff --git a/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.html b/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.html
index f4813fa383..b82190989b 100644
--- a/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.html
+++ b/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.html
@@ -43,9 +43,6 @@ limitations under the License.
         font: inherit;
         padding: .3em 0;
       }
-      :host([down-arrow]) .dropdown-trigger {
-        padding-right: 1.4em;
-      }
       gr-avatar {
         height: 2em;
         width: 2em;
@@ -75,7 +72,6 @@ limitations under the License.
       }
       li .itemAction:link,
       li .itemAction:visited {
-        color: #00e;
         text-decoration: none;
       }
       li .itemAction:not(.disabled):hover {
@@ -94,26 +90,13 @@ limitations under the License.
       .bold-text {
         font-family: var(--font-family-bold);
       }
-      :host:not([down-arrow]) .downArrow { display: none; }
-      :host([down-arrow]) .downArrow {
-        border-left: .36em solid transparent;
-        border-right: .36em solid transparent;
-        border-top: .36em solid #ccc;
-        height: 0;
-        position: absolute;
-        right: .3em;
-        top: calc(50% - .05em);
-        transition: border-top-color 200ms;
-        width: 0;
-      }
-      .dropdown-trigger:hover .downArrow {
-        border-top-color: #666;
-      }
     </style>
-    <gr-button link="[[link]]" class="dropdown-trigger" id="trigger"
+    <gr-button
+        link="[[link]]"
+        class="dropdown-trigger" id="trigger"
+        down-arrow="[[downArrow]]"
         on-tap="_showDropdownTapHandler">
       <content></content>
-       <i class="downArrow"></i>
     </gr-button>
     <iron-dropdown id="dropdown"
         vertical-align="top"
diff --git a/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.js b/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.js
index ec8f04c7bc..49e5a5e8ad 100644
--- a/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.js
+++ b/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.js
@@ -37,6 +37,7 @@
         type: Array,
         observer: '_resetCursorStops',
       },
+      downArrow: Boolean,
       topContent: Object,
       horizontalAlign: {
         type: String,
diff --git a/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.html b/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.html
index 79d69f5c93..6eb7c8dffc 100644
--- a/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.html
+++ b/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.html
@@ -27,6 +27,9 @@ limitations under the License.
         align-items: center;
         display: inline-flex;
       }
+      :host([uppercase]) label {
+        text-transform: uppercase;
+      }
       input,
       label {
         width: 100%;
@@ -37,14 +40,14 @@ limitations under the License.
       label {
         color: #777;
         display: inline-block;
+        font-family: var(--font-family-bold);
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
       }
       label.editable {
-        color: #00f;
+        color: var(--color-link);
         cursor: pointer;
-        text-decoration: underline;
       }
       #dropdown {
         box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
diff --git a/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.js b/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.js
index f87a546430..b0e8516964 100644
--- a/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.js
+++ b/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.js
@@ -46,6 +46,11 @@
         type: Boolean,
         value: false,
       },
+      uppercase: {
+        type: Boolean,
+        reflectToAttribute: true,
+        value: false,
+      },
       _inputText: String,
       // This is used to push the iron-input element up on the page, so
       // the input is placed in approximately the same position as the
diff --git a/polygerrit-ui/app/elements/shared/gr-linked-chip/gr-linked-chip.html b/polygerrit-ui/app/elements/shared/gr-linked-chip/gr-linked-chip.html
index be71eb66ac..d30bad2f5a 100644
--- a/polygerrit-ui/app/elements/shared/gr-linked-chip/gr-linked-chip.html
+++ b/polygerrit-ui/app/elements/shared/gr-linked-chip/gr-linked-chip.html
@@ -34,24 +34,31 @@ limitations under the License.
         display: inline-flex;
         padding: 0 .5em;
       }
-      gr-button.remove,
       gr-button.remove:hover,
       gr-button.remove:focus {
-        border-color: transparent;
-        color: #333;
+        --gr-button: {
+          color: #333;
+        }
       }
       gr-button.remove {
-        background: #eee;
-        border: 0;
-        color: #666;
-        font-size: 1.7em;
-        font-weight: normal;
-        height: .6em;
-        line-height: .6em;
-        margin-left: .15em;
-        margin-top: -.05em;
-        padding: 0;
-        text-decoration: none;
+        --gr-button: {
+          border: 0;
+          color: #666;
+          font-size: 1.7em;
+          font-weight: normal;
+          height: .6em;
+          line-height: .6em;
+          margin-left: .15em;
+          margin-top: -.05em;
+          padding: 0;
+          text-decoration: none;
+        }
+        --gr-button-hover-color: {
+          color: #333;
+        }
+        --gr-button-hover-background-color: {
+          color: #333;
+        }
       }
       .transparentBackground,
       gr-button.transparentBackground {
@@ -68,6 +75,7 @@ limitations under the License.
       </a>
       <gr-button
           id="remove"
+          link
           hidden$="[[!removable]]"
           hidden
           class$="remove [[_getBackgroundClass(transparentBackground)]]"
diff --git a/polygerrit-ui/app/styles/app-theme.html b/polygerrit-ui/app/styles/app-theme.html
index 4318757223..6a811580fa 100644
--- a/polygerrit-ui/app/styles/app-theme.html
+++ b/polygerrit-ui/app/styles/app-theme.html
@@ -35,6 +35,11 @@ limitations under the License.
   --iron-overlay-backdrop: {
     transition: none;
   }
+
+  /* Follow are a part of the design refresh */
+  --color-link: #2a66d9;
+  /* 12% darker */
+  --color-button-hover: #0B47BA;
 }
 @media screen and (max-width: 50em) {
   :root {
diff --git a/polygerrit-ui/app/styles/shared-styles.html b/polygerrit-ui/app/styles/shared-styles.html
index 5c11d60aec..7389fa4716 100644
--- a/polygerrit-ui/app/styles/shared-styles.html
+++ b/polygerrit-ui/app/styles/shared-styles.html
@@ -38,6 +38,9 @@ limitations under the License.
         margin: 0;
         padding: 0;
       }
+      a {
+        color: var(--color-link);
+      }
       input,
       textarea,
       select,