WebUI: apply button style refresh to the passphrase dialog

Bug: 852056
Cq-Include-Trybots: luci.chromium.try:closure_compilation
Change-Id: I7c8bde3aa2b5fc77daf1b022f85cbecffa5915ce
Reviewed-on: https://chromium-review.googlesource.com/1123403
Commit-Queue: Esmael El-Moslimany <aee@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#572486}

chrome/browser/resources/chromeos/zip_archiver/BUILD.gn

@@ -16,7 +16,6 @@ zip_archiver_dir = "$root_out_dir/resources/chromeos/zip_archiver"
 
 copy("zip_archiver_css") {
   sources = [
-    "css/passphrase-dialog.css",
     "css/passphrase.css",
   ]
 

chrome/browser/resources/chromeos/zip_archiver/css/passphrase-dialog.css

-/* Copyright 2017 The Chromium Authors. All rights reserved.
- * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file. */
-
-cr-input,
-paper-button {
-  -webkit-app-region: no-drag;
-}
-
-:host {
-  align-items: stretch;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  justify-content: space-between;
-}
-
-#buttons {
-  align-items: center;
-  display: flex;
-  justify-content: flex-end;
-}
-
-#input {
-  --cr-input-error-display: none;
-  font-family: inherit;
-  font-size: 13px;
-  font-weight: inherit;
-  line-height: inherit;
-}
-
-#title {
-  color: black;
-  font-size: 14px;
-  margin: 4px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-#buttons paper-button {
-  box-sizing: border-box;
-  display: inline-block;
-  font-size: 13px;
-  font-weight: 500;
-  margin: 0 0 0 5px;
-  min-height: 32px;
-  min-width: 70px;
-  overflow: hidden;
-  padding: 0.7em 0.57em;
-  position: relative;
-  text-align: center;
-  text-transform: uppercase;
-}
-
-#buttons paper-button:focus:not(:active) {
-  box-shadow: 0 0 0 2px rgba(51, 103, 214, 0.5);
-}
-
-#acceptButton {
-  background: rgb(51, 103, 214);
-  color: white;
-}
-
-#cancelButton {
-  color: rgb(100, 100, 100);
-}
-
-

chrome/browser/resources/chromeos/zip_archiver/html/passphrase-dialog.html

 <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
+
 <link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
+<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 
 <dom-module id="passphrase-dialog">
   <template>
-    <link rel="stylesheet" href="../css/passphrase-dialog.css">
+    <style include="paper-button-style">
+      cr-input,
+      paper-button {
+        -webkit-app-region: no-drag;
+      }
+
+      :host {
+        align-items: stretch;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        justify-content: space-between;
+      }
+
+      #buttons {
+        align-items: center;
+        display: flex;
+        justify-content: flex-end;
+      }
+
+      #input {
+        --cr-input-error-display: none;
+        font-family: inherit;
+        font-size: 13px;
+        font-weight: inherit;
+        line-height: inherit;
+      }
+
+      #title {
+        color: black;
+        font-size: 14px;
+        margin: 4px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      paper-button + paper-button {
+        -webkit-margin-start: 8px;
+      }
+    </style>
     <span id="title" i18n-content="ZIP_ARCHIVER_PASSPHRASE_TITLE"></span>
     <cr-input type="password"
               id="input"
@@ -12,16 +53,15 @@
               i18n-values="placeholder:ZIP_ARCHIVER_PASSPHRASE_INPUT_LABEL;aria-label:ZIP_ARCHIVER_PASSPHRASE_INPUT_LABEL">
     </cr-input>
     <div id="buttons">
-      <paper-button noink
+      <paper-button on-click="cancel"
+                    id="cancelButton"
+                    i18n-content="ZIP_ARCHIVER_PASSPHRASE_CANCEL">
+      </paper-button>
+      <paper-button class="action-button"
                     on-click="accept"
                     id="acceptButton"
                     i18n-content="ZIP_ARCHIVER_PASSPHRASE_ACCEPT">
       </paper-button>
-      <paper-button noink
-                    on-click="cancel"
-                    id="cancelButton"
-                    i18n-content="ZIP_ARCHIVER_PASSPHRASE_CANCEL">
-      </paper-button>
     </div>
   </template>
 </dom-module>