MD History: Display synced tabs history

chrome/browser/resources/md_history/history_card.html

 <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/shadow.html">
 <link rel="import" href="chrome://history/history_item.html">
 
+<link rel="import" href="chrome://history/shared_style.html">
 <dom-module id="history-card">
   <template>
+    <style include="shared-style"></style>
     <style>
-      :host {
-        @apply(--layout-center);
-        @apply(--layout-vertical);
-        padding: 0 24px 20px;
-      }
-
-      #main-container {
-        @apply(--shadow-elevation-2dp);
-        background: #fff;
-        border-radius: 2px;
-        max-width: 960px;
-        min-width: 500px;
-        width: 100%;
-      }
-
       #time-gap-separator {
         -webkit-border-start: 1px solid #888;
         -webkit-margin-start: 77px;
         height: 15px;
       }
 
-      #date-accessed {
-        @apply(--layout-center);
-        @apply(--layout-horizontal);
-        -webkit-padding-start: 20px;
-        background: #fafafa;
-        border-bottom: 1px solid rgba(0, 0, 0, 0.14);
-        border-radius: 2px 2px 0 0;
-        color: #333;
-        font-size: 14px;
-        font-weight: 500;
-        height: 48px;
-      }
-
       #history-item-list {
         padding: 8px 0;
       }
     </style>
 
     <div id="main-container">
-      <div id="date-accessed">[[historyDate]]</div>
+      <div id="card-title">[[historyDate]]</div>
       <div id="history-item-list">
         <template is="dom-repeat" items="{{historyItems}}"
             as="historyItem">
           <history-item time-accessed_="[[historyItem.dateTimeOfDay]]"
               website-title_="[[historyItem.title]]"
               website-domain_="[[historyItem.domain]]"
               website-url_="[[historyItem.url]]"
               starred="[[historyItem.starred]]"
               selected="{{historyItem.selected}}"
               timestamp_="[[historyItem.time]]">
           </history-item>
           <template is="dom-if"
               if="[[needsTimeGap_(index, historyItems.length)]]">
             <div id="time-gap-separator"></div>
           </template>
         </template>
       </div>
     </div>
   </template>
   <script src="chrome://history/history_card.js"></script>
 </dom-module>