[MD settings][cros accounts] Updates the accounts page according to the specs

chrome/browser/resources/settings/people_page/user_list.html

Index: chrome/browser/resources/settings/people_page/user_list.html
diff --git a/chrome/browser/resources/settings/people_page/user_list.html b/chrome/browser/resources/settings/people_page/user_list.html
index 265be7813dad0b5ceacec954cb0c416c01151c28..4ce38d2b55525a7e314bbd5ae192ba798f8ab532 100644
--- a/chrome/browser/resources/settings/people_page/user_list.html
+++ b/chrome/browser/resources/settings/people_page/user_list.html
@@ -2,40 +2,51 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="/route.html">
 <link rel="import" href="/settings_shared_css.html">
 
 <dom-module id="settings-user-list">
   <template>
     <style include="settings-shared">
-      .soft-border {
-        border: 1px solid #c4c4c4;
-        border-radius: 2px;
+      .user-list {
+        /* 4 users (the extra 1px is to account for the border-bottom) */
+        max-height: calc(4 * (var(--settings-row-two-line-min-height) + 1px));
+        overflow-y: auto;
       }
 
       .user {
-        -webkit-padding-end: 8px;
-        -webkit-padding-start: 20px;
-        font-size: 0.75em;
-        height: 34px;
+        border-bottom: var(--settings-separator-line);
       }
 
-      .user-list {
-        border: 1px solid gray;
-        height: 160px;
-        overflow-y: auto;
-        padding: 10px 0;
+      .user-icon {
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        border-radius: 20px;
+        flex-shrink: 0;
+        height: 40px;
+        width: 40px;
+      }
+
+      .user-info {
+        -webkit-padding-start: 16px;
       }
     </style>
-    <div class="user-list soft-border">
-      <template is="dom-repeat" items="[[users]]">
-        <div class="user layout horizontal justified">
-          <div class="layout vertical center-justified">[[item.name]]</div>
-          <div class="close-button"
-              hidden$="[[shouldHideCloseButton_(disabled, item.isOwner)]]">
-            <paper-icon-button icon="cr:clear" class="clear-icon"
-                on-tap="removeUser_">
-            </paper-icon-button>
+    <div class="user-list">
+      <template is="dom-repeat" items="[[users_]]">
+        <div class="user layout horizontal center two-line">
+          <img class="user-icon" src="[[getProfilePictureUrl_(item.name)]]">
+          <div class="flex user-info">
+            <div>
+              [[item.name]]
+              <span hidden="[[!item.isOwner]]">$i18n{deviceOwnerLabel}</span>
+            </div>
+            <div class="secondary">[[item.email]]</div>
           </div>
+          <paper-icon-button icon="cr:clear" class="clear-icon"
+              on-tap="removeUser_"
+              hidden="[[shouldHideCloseButton_(disabled, item.isOwner)]]">
+          </paper-icon-button>
         </div>
       </template>
     </div>