WebUI MD Refresh: Apply new button style in various signin dialogs.

Bug: 843770,843348
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: Ifb8517c90cecd569b6600b896329d713a96c82e7
Reviewed-on: https://chromium-review.googlesource.com/1068074Reviewed-by: Scott Chen <scottchen@chromium.org>
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#560818}

chrome/browser/resources/signin/dice_sync_confirmation/sync_confirmation_app.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/cr_elements/cr_radio_button/cr_radio_button.html">
+<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html">
@@ -14,7 +15,7 @@
 
 <dom-module id="sync-confirmation-app">
   <template>
-    <style include="signin-dialog-shared">
+    <style include="signin-dialog-shared paper-button-style">
       :host {
         display: block;
         /* Saves space for button row. */
@@ -35,13 +36,13 @@
         width: 100%;
       }
 
-      .secondary-action {
+      paper-button:not(.action-button) {
         -webkit-margin-start: 16px;
       }
 
 <if expr="is_macosx or is_linux">
       /* This works together with the button-flip in signin-dialog-shared. */
-      .secondary-action {
+      paper-button:not(.action-button) {
         -webkit-margin-end: 16px;
         -webkit-margin-start: 0;
       }
@@ -191,15 +192,15 @@
       </div>
     </div>
     <div class="action-container">
-      <paper-button class="primary-action" id="confirmButton"
+      <paper-button class="action-button" id="confirmButton"
           on-click="onConfirm_" consent-confirmation>
         $i18n{syncConfirmationConfirmLabel}
       </paper-button>
-      <paper-button class="secondary-action" on-click="onUndo_"
+      <paper-button on-click="onUndo_"
           hidden="[[isConsentBump_]]">
         $i18n{syncConfirmationUndoLabel}
       </paper-button>
-      <paper-button class="secondary-action" on-click="onMoreOptions_"
+      <paper-button on-click="onMoreOptions_"
           hidden="[[!isConsentBump_]]">
         $i18n{syncConfirmationMoreOptionsLabel}
       </paper-button>
@@ -235,11 +236,11 @@
           </cr-radio-button>
         </paper-radio-group>
         <div class="action-container">
-          <paper-button class="primary-action" on-click="onOK_"
+          <paper-button class="action-button" on-click="onOK_"
               consent-confirmation>
             $i18n{syncConfirmationOptionsConfirmLabel}
           </paper-button>
-          <paper-button class="secondary-action" on-click="onBack_">
+          <paper-button on-click="onBack_">
             $i18n{syncConfirmationOptionsBackLabel}
           </paper-button>
         </div>

chrome/browser/resources/signin/signin_email_confirmation/signin_email_confirmation.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <link rel="import" href="chrome://resources/html/polymer.html">
     <link rel="import" href="chrome://resources/cr_elements/cr_radio_button/cr_radio_button.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">
     <link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-group/paper-radio-group.html">
     <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
@@ -12,7 +13,7 @@
     <link rel="import" href="chrome://resources/html/cr.html">
     <link rel="import" href="chrome://resources/html/load_time_data.html">
     <link rel="import" href="chrome://resources/html/util.html">
-    <style is="custom-style" include="signin-dialog-shared">
+    <style is="custom-style" include="signin-dialog-shared paper-button-style">
       .container {
         /* The sign-in confirmation dialog uses a width that is larger than
          * the other sign-in dialogs to fit cases when the user has an email
@@ -89,10 +90,10 @@
         </paper-radio-group>
       </div>
       <div class="action-container">
-        <paper-button class="primary-action" id="confirmButton">
+        <paper-button class="action-button" id="confirmButton">
           $i18n{signinEmailConfirmationConfirmLabel}
         </paper-button>
-        <paper-button class="secondary-action" id="closeButton">
+        <paper-button id="closeButton">
           $i18n{signinEmailConfirmationCloseLabel}
         </paper-button>
       </div>

chrome/browser/resources/signin/signin_error/signin_error.html

@@ -2,6 +2,7 @@
 <html i18n-values="dir:textdirection;lang:language" dir="$i18n{textdirection}">
   <head>
     <meta charset="utf-8">
+    <link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
     <link rel="import" href="chrome://resources/html/polymer.html">
     <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
     <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
@@ -10,7 +11,7 @@
     <link rel="import" href="chrome://resources/html/cr.html">
     <link rel="import" href="chrome://resources/html/load_time_data.html">
     <link rel="import" href="chrome://resources/html/util.html">
-    <style is="custom-style" include="signin-dialog-shared">
+    <style is="custom-style" include="signin-dialog-shared paper-button-style">
       .details {
         line-height: 20px;
         margin-bottom: 8px;
@@ -82,13 +83,13 @@
         <p>$i18n{profileBlockedRemoveProfileSuggestion}</p>
       </div>
       <div class="action-container">
-        <paper-button class="primary-action" id="switchButton">
+        <paper-button class="action-button" id="switchButton">
           $i18n{signinErrorSwitchLabel}
         </paper-button>
-        <paper-button class="secondary-action" id="closeButton">
+        <paper-button id="closeButton">
           $i18n{signinErrorCloseLabel}
         </paper-button>
-        <paper-button class="primary-action" id="confirmButton" hidden>
+        <paper-button id="confirmButton" hidden>
           $i18n{signinErrorOkLabel}
         </paper-button>
       </div>

chrome/browser/resources/signin/signin_shared_css.html

@@ -12,30 +12,6 @@
         padding: 0;
       }
 
-      paper-button {
-        font-weight: 500;
-        line-height: 16px;
-        margin: 0;
-        padding: 8px 16px;
-      }
-
-      paper-button.primary-action {
-        --paper-button-flat-keyboard-focus: {
-          background: rgb(58, 117, 215);
-          font-weight: 500;
-        };
-        background: var(--google-blue-500);
-        color: white;
-      }
-
-      paper-button.secondary-action {
-        --paper-button-flat-keyboard-focus: {
-          background: rgba(0, 0, 0, .12);
-          font-weight: 500;
-        };
-        color: var(--paper-grey-600);
-      }
-
       .container {
         background-color: white;
         color: #333;

chrome/browser/resources/signin/sync_confirmation/sync_confirmation.html

@@ -2,13 +2,14 @@
 <html dir="$i18n{textdirection}" lang="$i18n{language}">
   <head>
     <meta charset="utf-8">
+    <link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
     <link rel="import" href="chrome://resources/html/polymer.html">
     <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
     <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
     <link rel="import" href="signin_shared_css.html">
     <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
     <link rel="stylesheet" href="sync_confirmation.css"></link>
-    <style is="custom-style" include="signin-dialog-shared">
+    <style is="custom-style" include="signin-dialog-shared paper-button-style">
 <if expr="is_macosx or is_linux">
       #undoButton {
         -webkit-margin-end: 8px;
@@ -98,11 +99,11 @@
         </div>
       </div>
       <div class="action-container">
-        <paper-button class="primary-action" id="confirmButton"
+        <paper-button class="action-button" id="confirmButton"
             consent-confirmation>
           $i18n{syncConfirmationConfirmLabel}
         </paper-button>
-        <paper-button class="secondary-action" id="undoButton">
+        <paper-button id="undoButton">
           $i18n{syncConfirmationUndoLabel}
         </paper-button>
       </div>

ui/webui/resources/cr_elements/paper_button_style_css.html

@@ -67,7 +67,7 @@
             0 3px 6px 2px var(--google-blue-500-opacity-15);
       }
 
-      paper-button.action-button {
+      paper-button:not([raised]).action-button {
         --paper-ripple-opacity: 0.32;
         --paper-button-ink-color: white;
         --google-blue-500-opacity-30: rgba(66, 133, 244, 0.3);