User Manager WebUI: replace paper-icon-button with cr-icon-button

Bug: 736891
Change-Id: Ib277323c8275ee7c7db351ad5a18e3a097eef76b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1570544Reviewed-by: Alexander Alekseev <alemate@chromium.org>
Commit-Queue: Esmael El-Moslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#652565}

ui/login/account_picker/chromeos_user_pod_row.css

@@ -206,12 +206,11 @@ html[dir=rtl] .pod.focused:not(.multiprofiles-policy-applied):not(.public-accoun
 }
 
 .auth-container .submit-button {
-  color: #FFFFFF;
-  height: 20px;
+  --cr-icon-button--icon-size: 20px;
+  --cr-icon-button-size: 20px;
+  --cr-icon-button-color: white;
   margin: 15px 0 5px 0;
   opacity: 1;
-  padding: 0;
-  width: 20px;
 }
 
 .auth-container .custom-icon-shown .submit-button {
@@ -546,11 +545,11 @@ html[dir=rtl] .pod.focused:not(.multiprofiles-policy-applied):not(.public-accoun
 }
 
 .action-box-button {
-  -webkit-margin-start: 8px;
-  height: 24px;
+  --cr-icon-button-icon-size: 24px;
+  --cr-icon-button-size: 24px;
+  margin-inline-end: 0;
+  margin-inline-start: 8px;
   margin-top: 3px;
-  padding: 0;
-  width: 24px;
 }
 
 .action-box-button.ripple-circle {
@@ -966,9 +965,9 @@ html[dir=rtl] .pod.public-account .button-container {
 }
 
 .public-account-submit-button {
-  color: #FFF;
+  --cr-icon-button-color: #FFF;
   opacity: 1;
-  padding: 10px 7px 8px 11px;
+  margin: 10px 7px 8px 11px;
 }
 
 .monitoring-container {

ui/login/account_picker/chromeos_user_pod_template.css

@@ -6,6 +6,10 @@
  * chromeos_user_pod_template.html.
  */
 
+ cr-icon-button {
+  margin: 0;
+}
+
 .action-box-remove-user-warning .remove-warning-button {
   color: #E67C73;
   margin: 0;

ui/login/account_picker/chromeos_user_pod_template.html

@@ -8,6 +8,7 @@
   <style is="custom-style" include="user-pod-template-shared-styles"></style>
 </custom-style>
 
+<link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 
 <iron-iconset-svg name="user-pod" size="24">
@@ -77,10 +78,9 @@
             <iron-icon class="capslock-hint" icon="user-pod:caps-lock">
             </iron-icon>
           </div>
-          <paper-icon-button class="submit-button" disabled
-                             aria-label="$i18n{submitButtonAccessibleName}"
-                             icon="user-pod:arrow-forward" tabindex="-1">
-          </paper-icon-button>
+          <cr-icon-button class="submit-button" disabled
+              aria-label="$i18n{submitButtonAccessibleName}"
+              iron-icon="user-pod:arrow-forward" tabindex="-1"></cr-icon-button>
 </if>
         </div>
         <!-- User Click Authentication -->
@@ -104,9 +104,8 @@
       <div class="name-container">
         <div class="name"></div>
         <div class="action-box-area">
-          <paper-icon-button class="action-box-button" disabled
-                             icon="user-pod:dropdown">
-          </paper-icon-button>
+          <cr-icon-button class="action-box-button" disabled
+              iron-icon="user-pod:dropdown"></cr-icon-button>
           <div class="action-box-button ripple-circle"></div>
           <iron-icon icon="cr:more-vert" class="action-box-icon"></iron-icon>
         </div>
@@ -171,10 +170,9 @@
         </iron-icon>
         <div class="info"></div>
         <div class="button-container">
-          <paper-icon-button class="public-account-submit-button expand-button"
-                             aria-label="$i18n{submitButtonAccessibleName}"
-                             icon="user-pod:arrow-forward" tabindex="-1">
-          </paper-icon-button>
+          <cr-icon-button class="public-account-submit-button expand-button"
+              aria-label="$i18n{submitButtonAccessibleName}"
+              iron-icon="user-pod:arrow-forward" tabindex="-1"></cr-icon-button>
         </div>
       </div>
     </div>
@@ -232,9 +230,8 @@
         <a class="language-and-input" href="#" role="button">
           $i18n{publicSessionLanguageAndInput}
         </a>
-        <paper-icon-button class="language-and-input-dropdown"
-                           icon="user-pod:dropdown">
-        </paper-icon-button>
+        <cr-icon-button class="language-and-input-dropdown"
+            iron-icon="user-pod:dropdown"></cr-icon-button>
       </div>
     </div>
     <div class="language-and-input-section">
@@ -256,10 +253,9 @@
       </div>
     </div>
     <div class="enter-button-container">
-      <paper-icon-button class="public-account-submit-button enter-button"
+      <cr-icon-button class="public-account-submit-button enter-button"
           aria-label="$i18n{publicAccountEnterAccessibleName}"
-          icon="user-pod:arrow-forward">
-      </paper-icon-button>
+          iron-icon="user-pod:arrow-forward"></cr-icon-button>
     </div>
   </div>
 </div>

ui/login/account_picker/user_pod_row.css

@@ -180,23 +180,19 @@ html[dir=rtl] .main-pane {
 }
 
 .auth-container .submit-button[disabled] {
-  color: #000;
+  --cr-icon-button-color: #000;
   opacity: 0.26;
 }
 
 .auth-container .submit-button {
-  box-sizing: border-box;
-  color: var(--google-blue-500);
-  height: 43px;
-  min-height: 43px;
-  min-width: 43px;
-  padding: 11.5px 10px;
+  --cr-icon-button-color: var(--google-blue-500);
+  --cr-icon-button-icon-size: 22px;
+  --cr-icon-button-size: 43px;
   position: relative;
-  width: 43px;
 }
 
 .auth-container .submit-button.error-shown {
-  color: #CD2A00;
+  --cr-icon-button-color: #CD2A00;
 }
 
 .name-container {
@@ -485,10 +481,10 @@ html[dir=rtl] .action-box-area {
 }
 
 .action-box-button {
+  --cr-icon-button--icon-size: 13px;
+  --cr-icon-button-size: 29px;
   background-image: url(chrome://theme/IDR_OOBE_ACTION_BOX_BUTTON_NORMAL);
-  height: 13px;
   margin: 5px;
-  width: 13px;
 }
 
 .action-box-button:hover {

ui/login/account_picker/user_pod_template.html

@@ -6,6 +6,8 @@
 
 <style is="custom-style" include="user-pod-template-shared-styles"></style>
 
+<link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
+
 <iron-iconset-svg name="user-pod" size="24">
   <svg>
     <defs>
@@ -63,10 +65,9 @@
           <img class="capslock-hint"
                src="chrome://theme/IDR_LOGIN_PASSWORD_CAPS_LOCK" alt>
         </div>
-        <paper-icon-button class="submit-button" disabled
+        <cr-icon-button class="submit-button" disabled
             aria-label="$i18n{submitButtonAccessibleName}"
-            icon="user-pod:arrow-forward" tabindex="-1">
-        </paper-icon-button>
+            iron-icon="user-pod:arrow-forward" tabindex="-1"></cr-icon-button>
 </if>
       </div>
       <!-- User Click Authentication -->