Settings People Revamp: Address CSS wrongdoings.

This also fixes the subheader of all subpages.

BUG=597868

Review URL: https://codereview.chromium.org/1832253002

Cr-Commit-Position: refs/heads/master@{#383423}

7 files changed, 40 insertions, 39 deletions

diff --git a/chrome/browser/resources/settings/people_page/manage_profile.html b/chrome/browser/resources/settings/people_page/manage_profile.html
index a6da8c3..e013799 100644
--- a/chrome/browser/resources/settings/people_page/manage_profile.html
+++ b/chrome/browser/resources/settings/people_page/manage_profile.html
@@ -8,7 +8,7 @@
   <link rel="import" type="css" href="manage_profile.css">
   <template>
     <style include="settings-shared"></style>
-    <div class="settings-box">
+    <div class="settings-box first">
       <paper-input value="{{profileName}}" pattern=".*\S.*" auto-validate
           on-blur="onProfileNameChanged_">
       </paper-input>
diff --git a/chrome/browser/resources/settings/people_page/people_page.css b/chrome/browser/resources/settings/people_page/people_page.css
deleted file mode 100644
index 638237e..0000000
--- a/chrome/browser/resources/settings/people_page/people_page.css
+++ /dev/null
@@ -1,21 +0,0 @@
-/* Copyright 2015 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. */
-
-#account-picture {
-  border-radius: 28px;
-  height: 56px;
-  object-fit: cover;
-  vertical-align: middle;
-  width: 56px;
-}
-
-#account-picture:hover {
-  cursor: pointer;
-}
-
-<if expr="not chromeos">
-#profile-name:hover {
-  cursor: pointer;
-}
-</if>
diff --git a/chrome/browser/resources/settings/people_page/people_page.html b/chrome/browser/resources/settings/people_page/people_page.html
index bcaf789..da368353 100644
--- a/chrome/browser/resources/settings/people_page/people_page.html
+++ b/chrome/browser/resources/settings/people_page/people_page.html
@@ -23,9 +23,27 @@
 </if>
 
 <dom-module id="settings-people-page">
-  <link rel="import" type="css" href="people_page.css">
   <template>
-    <style include="settings-shared"></style>
+    <style include="settings-shared">
+      #account-picture {
+        -webkit-margin-end: 4px;
+        border-radius: 20px;
+        height: 40px;
+        object-fit: cover;
+        vertical-align: middle;
+        width: 40px;
+      }
+
+      #account-picture:hover {
+        cursor: pointer;
+      }
+
+<if expr="not chromeos">
+      #profile-name:hover {
+        cursor: pointer;
+      }
+</if>
+    </style>
     <settings-animated-pages id="pages" current-route="{{currentRoute}}"
         section="people">
       <neon-animatable id="main">
diff --git a/chrome/browser/resources/settings/settings_menu/settings_menu.html b/chrome/browser/resources/settings/settings_menu/settings_menu.html
index aed6dfd..e0957cf 100644
--- a/chrome/browser/resources/settings/settings_menu/settings_menu.html
+++ b/chrome/browser/resources/settings/settings_menu/settings_menu.html
@@ -18,7 +18,7 @@
   <template>
     <style include="settings-shared">
       iron-icon {
-        --iron-icon-fill-color: var(--settings-side-nav-color);
+        --iron-icon-fill-color: var(--settings-nav-grey);
         -webkit-margin-end: 16px;
       }
 
@@ -29,7 +29,7 @@
 
       paper-menu {
         background-color: var(--settings-background-color);
-        color: var(--settings-side-nav-color);
+        color: var(--settings-nav-grey);
         font-size: 13px;
         --paper-menu-selected-item: {
           font-weight: 500;
diff --git a/chrome/browser/resources/settings/settings_page/settings_subheader.html b/chrome/browser/resources/settings/settings_page/settings_subheader.html
index 0f5bf068..ad3f437 100644
--- a/chrome/browser/resources/settings/settings_page/settings_subheader.html
+++ b/chrome/browser/resources/settings/settings_page/settings_subheader.html
@@ -1,21 +1,30 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html">
+<link rel="import" href="chrome://md-settings/settings_shared_css.html">
 
 <dom-module id="settings-subheader">
   <template>
     <style include="settings-shared">
+      :host {
+        display: block;
+        margin: 8px 0 16px 0;
+      }
+
       :root {
-        --iron-icon-fill-color: var(--settings-side-nav-color);
-        --paper-icon-button: {
-          width: 36px;
-          height: 36px;
-          margin: 0 12px 0 -8px;
-        }
+        --iron-icon-fill-color: var(--settings-nav-grey);
+      }
+
+      paper-icon-button {
+        /* The inner icon is 20px in size. paper-icon-button has 8px padding. */
+        height: 36px;
+        /* Centers the ripple on the icon with appropriate margin on right. */
+        margin: 0 12px 0 -8px;
+        width: 36px;
       }
 
       h2 {
-        color: var(--settings-side-nav-color);
+        color: var(--settings-nav-grey);
         font-size: 107.6923%; /* go to 14px from 13px */
       }
     </style>
diff --git a/chrome/browser/resources/settings/settings_resources.grd b/chrome/browser/resources/settings/settings_resources.grd
index 7722761..835a9fe 100644
--- a/chrome/browser/resources/settings/settings_resources.grd
+++ b/chrome/browser/resources/settings/settings_resources.grd
@@ -416,11 +416,6 @@
       <structure name="IDR_SETTINGS_PASSWORDS_SECTION_JS"
                  file="passwords_and_forms_page/passwords_section.js"
                  type="chrome_html" />
-      <structure name="IDR_SETTINGS_PEOPLE_PAGE_CSS"
-                 file="people_page/people_page.css"
-                 type="chrome_html"
-                 flattenhtml="true"
-                 allowexternalscript="true" />
       <structure name="IDR_SETTINGS_PEOPLE_PAGE_HTML"
                  file="people_page/people_page.html"
                  type="chrome_html"
diff --git a/chrome/browser/resources/settings/settings_shared_css.html b/chrome/browser/resources/settings/settings_shared_css.html
index 4c5cfc7..c1e11e5 100644
--- a/chrome/browser/resources/settings/settings_shared_css.html
+++ b/chrome/browser/resources/settings/settings_shared_css.html
@@ -21,7 +21,7 @@
 
         /* Some colors use non-MD colors.  These custom colors are specified by
          * UX design (bettes@). */
-        --settings-side-nav-color: rgb(90, 90, 90);
+        --settings-nav-grey: rgb(90, 90, 90);
         --settings-title-bar-background-color: rgb(52, 73, 94);
         --settings-title-bar-color: rgb(255, 255, 255);
       }