MD Settings: CrOS: Add secondary user banner

chrome/browser/resources/settings/basic_page/basic_page.html

Index: chrome/browser/resources/settings/basic_page/basic_page.html
diff --git a/chrome/browser/resources/settings/basic_page/basic_page.html b/chrome/browser/resources/settings/basic_page/basic_page.html
index 7f75d71b7d58e539d7d42e9eeaf640a40abc13d1..b8b64f7bf54b83ce4a03a059fc71e650cb807cb4 100644
--- a/chrome/browser/resources/settings/basic_page/basic_page.html
+++ b/chrome/browser/resources/settings/basic_page/basic_page.html
@@ -49,6 +49,25 @@
         padding: 0 12px;
       }
 
+      #secondaryUserBanner {
+        @apply(--shadow-elevation-2dp);
+        background-color: white;
+        border-radius: 2px;
+        margin: 21px 0;
+      }
+
+      #secondaryUserIcon {
+        /* TODO(stevenjb): Replace this with the correct variable or color once
+         * established by UX, see crbug.com/687749. */
+        background-color : rgb(210, 210, 212);
+        background-image: url(chrome://theme/IDR_SECONDARY_USER_SETTINGS);
+        background-position: center;
+        background-repeat: no-repeat;
+        height: 55px;
+        margin: 18px;
+        width: 58px;
+      }
+
       #toggleContainer {
         align-items: center;
         display: flex;
@@ -74,6 +93,13 @@
           </settings-reset-profile-banner>
         </template>
 <if expr="chromeos">
+        <div id="secondaryUserBanner" class="layout horizontal center"
+            hidden="[[!showSecondaryUserBanner_]]">
+          <div id="secondaryUserIcon"></div>
+          <div class="flex">$i18n{secondaryUserBannerText}</div>
+        </div>
+</if>
+<if expr="chromeos">
         <template is="dom-if" if="[[showPage(pageVisibility.internet)]]"
             restamp>
           <settings-section page-title="$i18n{internetPageTitle}"