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

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

Index: chrome/browser/resources/settings/people_page/people_page.html
diff --git a/chrome/browser/resources/settings/people_page/people_page.html b/chrome/browser/resources/settings/people_page/people_page.html
index 01421172d609a035dfea033e5b9422bfc6b18ed9..e363caf0679ad8cb1699b1cf88d2872f509bc58d 100644
--- a/chrome/browser/resources/settings/people_page/people_page.html
+++ b/chrome/browser/resources/settings/people_page/people_page.html
@@ -26,8 +26,12 @@
 <dom-module id="settings-people-page">
   <template>
     <style include="settings-shared">
+      setting-box.middle {
+        /* Per spec, middle text is indented 20px in this section. */

[dschuyler, 2016/05/18 00:07:59]

Thanks for the comment.

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

Acknowledged.

+        -webkit-margin-start: 20px;
+      }
+
       #profile-icon {
-        -webkit-margin-end: 4px;
         border-radius: 20px;
         height: 40px;
         object-fit: cover;
@@ -45,8 +49,20 @@
         cursor: pointer;
       }
 </if>
+
+      #sync-icon {
+        margin: 0 10px;
+      }
+
+      iron-icon[icon="settings:sync-problem"] {
+       --iron-icon-fill-color: var(--settings-error-color);
+      }
+
+      .sync-error {

[dschuyler, 2016/05/18 00:08:00]

I'm not seeing where this is used.
Can it be removed?

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

Done. This sync-error class was returned by the getSyncStatusClass_ method, but
I see now that this is confusing. I modified it to use 'hidden' below. See if
that's clearer.

+        color: var(--settings-error-color);
+      }
+
       #googleg-logo-container {
-        -webkit-margin-end: 4px;
         display: flex;
         justify-content: center;
         width: 40px;
@@ -98,19 +114,17 @@
           $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 {{getSyncStatusClass_(syncStatus)}}">
+                [[syncStatus.statusText]]
+              </div>
+            </div>
           </div>
         </template>