Settings People Revamp: Update main card Sync 'look' to match new spec.

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

 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.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-checkbox/paper-checkbox.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-dialog/paper-dialog.html">
 <link rel="import" href="chrome://md-settings/controls/settings_checkbox.html">
 <link rel="import" href="chrome://md-settings/people_page/sync_page.html">
 <link rel="import" href="chrome://md-settings/people_page/profile_info_browser_proxy.html">
 <link rel="import" href="chrome://md-settings/people_page/sync_browser_proxy.html">
 <link rel="import" href="chrome://md-settings/settings_page/settings_animated_pages.html">
 <link rel="import" href="chrome://md-settings/settings_page/settings_subpage.html">
 <link rel="import" href="chrome://md-settings/settings_shared_css.html">
 
 <if expr="chromeos">
 <link rel="import" href="chrome://md-settings/people_page/change_picture.html">
 <link rel="import" href="chrome://md-settings/people_page/pin_keyboard.html">
 <link rel="import" href="chrome://md-settings/people_page/easy_unlock_browser_proxy.html">
 <link rel="import" href="chrome://md-settings/people_page/easy_unlock_turn_off_dialog.html">
 <link rel="import" href="chrome://md-settings/people_page/users_page.html">
 </if>
 <if expr="not chromeos">
 <link rel="import" href="chrome://md-settings/people_page/manage_profile.html">
 </if>
 
 <dom-module id="settings-people-page">
   <template>
     <style include="settings-shared">
+      setting-box.middle {
+        /* Per spec, middle text is indented 20px in this section. */
+        -webkit-margin-start: 20px;
+      }
+
       #profile-icon {
-        -webkit-margin-end: 4px;
         border-radius: 20px;
         height: 40px;
         object-fit: cover;
         vertical-align: middle;
         width: 40px;
       }
 
       #profile-icon:hover,
       #activity-controls:hover {
         cursor: pointer;
       }
 
 <if expr="not chromeos">
       #profile-name:hover {
         cursor: pointer;
       }
 </if>
+
+      #sync-icon {
+        margin: 0 10px;
+      }
+
+      iron-icon[icon="settings:sync-problem"] {
+       --iron-icon-fill-color: var(--settings-error-color);
+      }
+
+      .settings-box .sync-error {

[tommycli, 2016/05/18 18:31:47]

I had to add this to make the class more specific than .settings-box .secondary

+        color: var(--settings-error-color);
+      }
+
       #googleg-logo-container {
-        -webkit-margin-end: 4px;
         display: flex;
         justify-content: center;
         width: 40px;
       }
 
       #googleg-logo {
         background-image: url(../../../../../ui/webui/resources/images/200-logo_googleg.png);
         background-size: cover;
         height: var(--iron-icon-height);
         width: var(--iron-icon-width);
@@ skipping 31 matching lines @@
                 $i18n{syncDisconnect}
               </paper-button>
             </span>
           </template>
 </if>
         </div>
         <div class="settings-box two-line" hidden="[[syncStatus.signedIn]]">
           $i18n{syncOverview}
         </div>
 
-        <div class="settings-box" hidden="[[!isStatusTextSet_(syncStatus)]]">
-          <span id="syncStatusText"></span>
-          <paper-button on-tap="onSyncTap_">
-            [[syncStatus.actionLinkText]]
-          </paper-button>
-        </div>
-
         <template is="dom-if"
             if="[[isAdvancedSyncSettingsVisible_(syncStatus)]]">
-          <div class="settings-box">
-            <paper-button on-tap="onSyncTap_" class="primary-button">
-              $i18n{syncPageTitle}
-            </paper-button>
+          <div class="settings-box two-line" on-tap="onSyncTap_">
+            <iron-icon id="sync-icon" icon$="[[getSyncIcon_(syncStatus)]]">
+            </iron-icon>
+            <div class="middle">
+              <div>$i18n{sync}</div>
+              <div class="secondary" hidden="[[syncStatus.hasError]]">
+                [[syncStatus.statusText]]
+              </div>
+              <div class="secondary sync-error"
+                  hidden="[[!syncStatus.hasError]]">
+                [[syncStatus.statusText]]
+              </div>
+            </div>
           </div>
         </template>
 
         <div class="settings-box" id="activity-controls"
             on-tap="onActivityControlsTap_">
           <div id="googleg-logo-container">
             <div id="googleg-logo"></div>
           </div>
           <div class="middle">
             <div>$i18n{personalizeGoogleServicesTitle}</div>
@@ skipping 115 matching lines @@
 
 <if expr="chromeos">
     <template is="dom-if" if="[[easyUnlockEnabled_]]">
       <easy-unlock-turn-off-dialog id="easyUnlockTurnOffDialog">
       </easy-unlock-turn-off-dialog>
     </template>
 </if>
   </template>
   <script src="people_page.js"></script>
 </dom-module>