MD User Manager WebUI: change elevation, border-radius and button styles

Bug: 845576
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I013e873ac05616d6470282e71767f30eb1eee0ea
Reviewed-on: https://chromium-review.googlesource.com/1083625
Commit-Queue: Esmael El-Moslimany <aee@chromium.org>
Reviewed-by: Scott Chen <scottchen@chromium.org>
Reviewed-by: Xiyuan Xia <xiyuan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#564980}

chrome/browser/resources/md_user_manager/control_bar.html

@@ -21,13 +21,17 @@
       #logo {
         -webkit-margin-end: auto;
       }
+
+      paper-button + paper-button {
+        -webkit-margin-start: 8px;
+      }
     </style>
     <div id="container" class="layout horizontal end-justified">
       <div id="logo" class="product-logo" alt=""></div>
-      <paper-button id="launchGuest" class="action secondary"
+      <paper-button id="launchGuest"
           on-tap="onLaunchGuestTap_"
           hidden="[[!showGuest]]">$i18n{browseAsGuest}</paper-button>
-      <paper-button id="addUser" class="action secondary" on-tap="onAddUserTap_"
+      <paper-button id="addUser" on-tap="onAddUserTap_"
           hidden="[[!showAddPerson]]">$i18n{addUser}</paper-button>
     </div>
   </template>

chrome/browser/resources/md_user_manager/create_profile.html

@@ -131,11 +131,11 @@
       <div id="actions">
         <paper-spinner-lite active="[[isSpinnerActive_(createInProgress_)]]">
         </paper-spinner-lite>
-        <paper-button id="cancel" class="action secondary"
+        <paper-button id="cancel" class="cancel-button"
             on-tap="onCancelTap_">
           $i18n{cancel}
         </paper-button>
-        <paper-button id="save" class="action primary" on-tap="onSaveTap_"
+        <paper-button id="save" class="action-button" on-tap="onSaveTap_"
             disabled="[[isSaveDisabled_(createInProgress_, profileName_)]]">
           $i18n{createProfileConfirm}
         </paper-button>

chrome/browser/resources/md_user_manager/shared_styles.html

+<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
+
 <dom-module id="shared-styles">
   <template>
-    <style>
+    <style include="paper-button-style">
       :root {
-        --action-button: {
-          border-radius: 2px;
-          line-height: 20px;
-          margin: 0;
-          min-width: 52px;
-          padding: 6px 16px;
-        };
         --error-color: var(--google-red-700);
         --page-width: 624px;
         --primary-text-color: var(--paper-grey-800);
@@ -25,39 +21,6 @@
         text-decoration: none;
       }
 
-      paper-button.action {
-        @apply --action-button;
-      }
-
-      paper-button.action.primary {
-        --paper-button: {
-          background: var(--google-blue-500);
-          color: white;
-          font-weight: 500;
-        };
-        --paper-button-flat-keyboard-focus: {
-          background: rgb(58, 117, 215);
-        };
-        --paper-button-disabled: {
-          background: var(--paper-grey-300);
-          color: var(--paper-grey-500);
-        };
-      }
-
-      paper-button.action.secondary {
-        --paper-button: {
-          color: var(--paper-grey-600);
-          font-weight: 500;
-        };
-        --paper-button-flat-keyboard-focus: {
-          background: rgba(0, 0, 0, .12);
-        };
-      }
-
-      paper-button.action + paper-button.action {
-        -webkit-margin-start: 8px;
-      }
-
       .product-logo {
         content: -webkit-image-set(
             url(../../../app/theme/default_100_percent/%DISTRIBUTION%/product_logo_name_22.png) 1x,

chrome/browser/resources/md_user_manager/user_manager.html

@@ -13,6 +13,7 @@
   <link rel="stylesheet" href="../../../../ui/login/bubble.css">
   <link rel="stylesheet" href="../../../../ui/login/oobe.css">
   <link rel="stylesheet" href="../../../../ui/login/screen_container.css">
+  <link rel="stylesheet" href="chrome://resources/css/md_colors.css">
   <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
 
   <link rel="import" href="chrome://resources/html/polymer.html">
@@ -33,7 +34,7 @@
   <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
   <style is="custom-style" include="shared-styles">
     body {
-      background-color: var(--paper-grey-100);
+      background-color: var(--md-background-color);
     }
 
     user-manager-pages,
@@ -84,8 +85,8 @@
     }
 
     .pod {
-      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .24),
-                  0 0 2px 0 rgba(0, 0, 0, .12);
+      @apply --cr-card-elevation;
+      border-radius: var(--cr-card-border-radius);
       color: var(--primary-text-color);
       cursor: default;
       height: auto;
@@ -260,6 +261,7 @@
 
     .action-box-area.active ~ .action-box-menu {
       border: none;
+      border-radius: var(--cr-card-border-radius);
       box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .19);
       right: 8px;
       width: 224px;
@@ -285,6 +287,7 @@
     }
 
     .action-box-menu-remove {
+      border-radius: var(--cr-card-border-radius);
       border-top: var(--user-manager-separator-line);
       line-height: 32px;
       padding: 8px 12px;
@@ -314,15 +317,8 @@
     }
 
     .action-box-remove-user-warning .remove-warning-button {
-      --paper-button: {
-        background: var(--google-red-700);
-        color: white;
-        font-weight: 500;
-      };
-      --paper-button-flat-keyboard-focus: {
-        background: rgb(173, 50, 36);
-      };
-      @apply --action-button;
+      background-color: white;
+      color: var(--google-red-700);
     }
 
     #user-manager-prompt-message {

chrome/browser/resources/md_user_manager/user_manager_tutorial.html

@@ -2,17 +2,18 @@
 
 <link rel="import" href="/shared_styles.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 
 <dom-module id="user-manager-tutorial">
   <template>
     <style include="shared-styles">
       .tutorial-slide {
+        @apply --cr-card-elevation;
         -webkit-transition: opacity 200ms ease-in-out;
         background-color: white;
-        border-radius: 2px;
+        border-radius: var(--cr-card-border-radius);
         bottom: 0;
-        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
         height: 408px;
         left: 0;
         margin: auto;
@@ -97,13 +98,17 @@
       }
 
       .arrow-down {
-        border-left: 15px solid transparent;
-        border-right: 15px solid transparent;
-        border-top: 15px solid white;
-        bottom: -15px;
+        border-bottom: 10px solid white;
+        border-left: 10px solid white;
+        border-right: 10px solid transparent;
+        border-top: 10px solid transparent;
+        bottom: -10px;
+        box-shadow: rgba(60, 64, 67, .4) -1px 1px 1px 0,
+            rgba(60, 64, 67, .15) -2px 2px 2px 0;
         height: 0;
         position: absolute;
         right: 40px;
+        transform: rotate(-45deg);
         width: 0;
       }
 
@@ -122,6 +127,8 @@
       }
 
       .slide-image {
+        border-radius:
+            var(--cr-card-border-radius) var(--cr-card-border-radius) 0 0;
         height: 182px;
       }
 
@@ -149,6 +156,7 @@
       }
 
       #notYou #dismiss {
+        cursor: pointer;
         position: absolute;
         right: 5px;
         top: 5px;

ui/webui/resources/cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/html/icon.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="cr_profile_avatar_selector_grid.html">
 
 <dom-module id="cr-profile-avatar-selector">
@@ -20,7 +22,7 @@
         background-position: center;
         background-repeat: no-repeat;
         border: 1px solid rgba(0, 0, 0, .12);
-        border-radius: 2px;
+        border-radius: var(--cr-card-border-radius);
         display: flex;
         height: var(--avatar-size);
         margin: calc(var(--avatar-spacing) / 2);

ui/webui/resources/cr_elements/paper_button_style_css.html

@@ -43,7 +43,7 @@
       }
 
       paper-button:not(.action-button):hover {
-        background-color: rgba(66,133,244, 0.04);
+        background-color: rgba(66, 133, 244, 0.04);
         border-color: rgb(210, 227, 252);
       }
 
@@ -56,7 +56,7 @@
 
       paper-button.action-button:hover {
         /* google-blue-600 with opacity. */
-        background-color: rgba(26,115,232, 0.9);
+        background-color: rgba(26, 115, 232, 0.9);
         box-shadow:
             0 1px 2px 0 var(--google-blue-500-opacity-30),
             0 1px 3px 1px var(--google-blue-500-opacity-15);