Add avatar badges and update caps lock icon for new login screen

ui/login/account_picker/md_user_pod_row.css

 /* Copyright 2014 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  *
  * This is the stylesheet used by user pods row of account picker UI.
  */
 
 podrow {
   /* Temporarily disabled because animation interferes with updating screen's
    size. */
@@ skipping 90 matching lines @@
 }
 
 .user-image.switch-image-animation {
   animation: switch-image 300ms;
 }
 
 .pod .user-image {
   flex: none;
 }
 
+.pod .badge-container {
+  background: #FFF;
+  border-radius: 50%;
+  bottom: 0;
+  display: none;
+  height: 27px;
+  position: absolute;
+  right: 0;
+  width: 27px;
+}
+
+.pod .badge-container iron-icon {
+  --iron-icon-height: 25px;
+  --iron-icon-width: 25px;
+  display: none;
+  padding: 0;
+}
+
+/* Signed-in badge should be hidden when there's another badge. */
+.pod.legacy-supervised.signed-in .signed-in-badge {
+  display: none;
+}
+
+.pod.legacy-supervised .badge-container,
+.pod.signed-in .badge-container,
+.pod.legacy-supervised .legacy-supervised-badge,
+.pod.signed-in .signed-in-badge {
+  display: block;
+}
+
 /* TODO(noms): Refactor this out into a CrOS-specific file and simplify the
  style rule once it is included on CrOS only. crbug.com/397638 */
 html:not([screen=login-add-user]) .pod .user-image {
   max-height: 160px;
   max-width: 160px;
   position: absolute;
 }
 
 html:not([screen=login-add-user]) .pod.focused .user-image {
   opacity: 1;
@@ skipping 73 matching lines @@
   white-space: nowrap;
 }
 
 .learn-more-container,
 .auth-container,
 .password-entry-container,
 .reauth-hint-container {
   display: none;
 }
 
-#input-line {
+.input-line {
   opacity: 0.34;
   position: absolute;
   stroke: #FFFFFF;
   stroke-width: 1px;
   top: 40px;
 }
 
-#input-line[active] {
+.input-present .input-line {
   opacity: 1;
 }
 
 .pod[is-active-directory] .reauth-warning {
   display: none;
 }
 
 .pod[auth-type='offlinePassword'].focused .password-entry-container,
 .pod[auth-type='forceOfflinePassword'].focused .password-entry-container {
   display: flex;
   flex: auto;
 }
 
 .password-container {
   height: 40px;
   width: 180px;
 }
 
+.capslock-on .password-container {
+  width: 160px;
+}
+
 .pod input[type='password'] {
   background-color: transparent;
   border: none;
   color: rgba(255, 255, 255, .67);
   font-family: "Roboto";
   font-size: 13px;
   height: 100%;
   letter-spacing: 8px;
   padding: 0;
   width: 100%;
 }
 
 .pod input[type='password']::-webkit-input-placeholder {
   letter-spacing: 0;
 }
 
 .capslock-hint-container {
   display: none;
 }
 
 <if expr="chromeos">
 .capslock-on .capslock-hint-container {
   display: block;
   flex: none;
-  height: 43px;
+  height: 40px;
   position: relative;
   width: 20px;
 }
 </if>
 
 .capslock-hint {
-  -webkit-margin-end: 6px;
-  -webkit-margin-start: -2px;
-  margin: auto;
-  position: relative;
-  top: 15px;
+  --iron-icon-height: 22px;
+  --iron-icon-width: 22px;
+  opacity: 0.34;
+  padding: 13px 0 5px;
+}
+
+.input-present .capslock-hint {
+  opacity: 1;
 }
 
 .password-label,
 .signin-transition-container {
   display: none;
 }
 
 .pod[auth-type='userClick']:not(.signing-in) .password-label,
 .pod[auth-type='userClick'].signing-in .signin-transition-container {
   color: grey;
@@ skipping 815 matching lines @@
 .small-pod.extra-small .small-pod-name {
   left: 76px;
   padding: 16px 0;
   width: 190px;
 }
 
 @keyframes switch-image {
   from { transform: rotate3d(0, 1, 0, 90deg); }
   to { transform: none; }
 }