MD Settings: Convert reset profile banner to a dialog.

chrome/browser/resources/settings/reset_page/reset_profile_banner.html

Index: chrome/browser/resources/settings/reset_page/reset_profile_banner.html
diff --git a/chrome/browser/resources/settings/reset_page/reset_profile_banner.html b/chrome/browser/resources/settings/reset_page/reset_profile_banner.html
index 16285e1dd91b1c9ca6587b1628ea56ad793da56f..dffea73a0e19df1d7aa1968ffbf9c52a2758d4c7 100644
--- a/chrome/browser/resources/settings/reset_page/reset_profile_banner.html
+++ b/chrome/browser/resources/settings/reset_page/reset_profile_banner.html
@@ -1,73 +1,31 @@
-<link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.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-icon-button/paper-icon-button.html">
 <link rel="import" href="reset_browser_proxy.html">
-<link rel="import" href="reset_profile_dialog.html">
+<link rel="import" href="../route.html">
 
 <dom-module id="settings-reset-profile-banner">
   <template>
-      <style>
-        #banner-content {
-          background-color: white;
-          border: 1px solid #c8c8c8;
-          border-radius: 3px;
-          margin-bottom: 24px;
-        }
-
-        #top-row {
-          display: flex;
-          justify-content: flex-end;
-        }
-
-        #main-body {
-          align-items: center;
-          display: flex;
-          padding: 0 17px 17px;
-        }
-
-        #description {
-          -webkit-margin-start: 18px;
-          flex: 1;
-        }
-
-        #close {
-          height: 30px;
-        }
-
-        #reset {
-          -webkit-margin-start: 30px;
-          background-color: rgb(66, 133, 244);
-          color: white;
-          font-weight: 500;
-        }
-
-        a {
-          color: rgb(66, 133, 244);
-          text-decoration: none;
-        }
-      </style>
-    <div id="banner-content">
-      <div id="top-row">
-        <paper-icon-button icon="cr:clear" on-tap="onCloseTap_" id="close">
-        </paper-icon-button>
-      </div>
-      <div id="main-body">
+    <style include="settings-shared"></style>
+    <dialog is="cr-dialog" id="dialog" ignore-popstate>
+      <div class="title">$i18n{resetAutomatedDialogTitle}</div>
+      <div class="body">
         <span id="description">
           $i18n{resetProfileBannerDescription}
           <a id="learnMore"
              href="$i18nRaw{resetProfileBannerLearnMoreUrl}"
              target="_blank">$i18n{learnMore}</a>
         </span>
-        <paper-button id="reset" on-tap="showDialog_">
+      </div>
+      <div class="button-container">
+        <paper-button class="cancel-button" on-tap="onOkTap_" id="ok">
+          $i18n{ok}
+        </paper-button>
+        <paper-button class="action-button" on-tap="onResetTap_" id="reset">
           $i18n{resetProfileBannerButton}
         </paper-button>
       </div>
-    </div>
-    <template is="dom-if" if="[[showResetProfileDialog_]]" restamp>
-      <settings-reset-profile-dialog on-close="onDialogClose_">
-      </settings-reset-profile-dialog>
-    </template>
+    </dialog>
   </template>
   <script src="reset_profile_banner.js"></script>
 </dom-module>