[MD settings] update settings title bar

chrome/browser/resources/settings/settings_ui/settings_ui.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-drawer-panel/paper-drawer-panel.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/shadow.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/typography.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-toolbar/paper-toolbar.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://md-settings/direction_delegate.html">
 <link rel="import" href="chrome://md-settings/i18n_setup.html">
+<link rel="import" href="chrome://md-settings/icons.html">
 <link rel="import" href="chrome://md-settings/settings_main/settings_main.html">
 <link rel="import" href="chrome://md-settings/settings_menu/settings_menu.html">
 <link rel="import" href="chrome://md-settings/settings_page/settings_router.html">
+<link rel="import" href="chrome://md-settings/settings_shared_css.html">
 
 <dom-module id="settings-ui">
-  <link rel="import" type="css" href="settings_ui.css">
   <template>
+    <style include="settings-shared">
+      :host {
+        @apply(--layout-vertical);
+        @apply(--layout-fit);
+        -webkit-user-select: none;
+        background-color: var(--settings-background-color);
+      }
+
+      iron-icon {
+       --iron-icon-fill-color: var(--settings-title-bar-color);
+       --iron-icon-stroke-color: var(--settings-title-bar-color);
+      }
+
+      paper-toolbar {
+        @apply(--shadow-elevation-4dp);
+        --paper-toolbar-title: {
+          font-size: 123.08%;
+        };
+        background-color: var(--settings-title-bar-background-color);
+        min-height: 56px;
+        position: relative;
+        z-index: 10;
+      }
+
+      paper-drawer-panel {
+        @apply(--layout-center);
+        --paper-drawer-panel-left-drawer-container: {
+          background-color: var(--settings-background-color);
+          margin-top: 8px;
+        };
+        position: relative;
+      }
+
+      settings-main paper-icon-button {
+        z-index: 10;
+      }
+    </style>
     <settings-router current-route="{{currentRoute}}"
         current-route-titles="{{currentRouteTitles}}">
     </settings-router>
     <paper-toolbar>
       <div class="title" i18n-content="settings"></div>
+      <!-- TODO(dschuyler): implement internal search. -->
+      <iron-icon icon="md-settings-icons:search"></iron-icon>
     </paper-toolbar>
     <paper-drawer-panel drawer-width="256px" id="panel">
       <settings-menu drawer class="flex" current-route="{{currentRoute}}">
       </settings-menu>
       <settings-main main prefs="{{prefs}}" current-route="{{currentRoute}}">
         <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
       </settings-main>
     </paper-drawer-panel>
   </template>
   <script src="settings_ui.js"></script>
 </dom-module>