Implement the new Sync Confirmation dialog on Linux and Windows.

chrome/browser/resources/sync_confirmation/sync_confirmation.css

Index: chrome/browser/resources/sync_confirmation/sync_confirmation.css
diff --git a/chrome/browser/resources/sync_confirmation/sync_confirmation.css b/chrome/browser/resources/sync_confirmation/sync_confirmation.css
new file mode 100644
index 0000000000000000000000000000000000000000..250e9e5dca0d4ad907b3ee5c0d543361503118e3
--- /dev/null
+++ b/chrome/browser/resources/sync_confirmation/sync_confirmation.css
@@ -0,0 +1,105 @@
+/* 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. */
+
+body {
+  font-family: 'Roboto Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;

[Dan Beam, 2016/01/13 23:45:22]

did you mean Roboto?  I don't know that 'Roboto Regular' is in roboto.css

[anthonyvd, 2016/01/18 21:40:08]

I did. It looks like I wasn't getting Roboto because it wasn't installed on my
system. Am I doing something wrong or do users have to have it on their systems
for Web UI to be able to display it?

+  margin: 0;
+  padding: 0;
+}
+
+a {
+  color: rgb(85, 149, 254);
+  text-decoration: none;
+}
+
+.picture img {
+  border-radius: 50%;
+  max-height: 100%;
+  max-width: 100%;
+}
+
+.container {
+  background-color: white;
+  height: 351px;
+  overflow: hidden;
+  width: 448px;
+}
+
+.top-title-bar {
+  align-items: center;
+  border-bottom: 1px solid lightgray;
+  color: #333;
+  display: flex;
+  font-size: 16px;
+  height: 56px;
+  padding-left: 24px;
+  padding-right: 24px;
+}
+
+.details {
+  height: 250px;
+  padding-bottom: 20px;
+  padding-left: 24px;
+  padding-right: 24px;
+  padding-top: 20px;

[Dan Beam, 2016/01/13 23:45:22]

padding: 20px 24px;

[anthonyvd, 2016/01/18 21:40:08]

Done.

+}
+
+.sync-message {
+  color: #595959;
+  font-size: 13px;

[Dan Beam, 2016/01/13 23:45:22]

px -> em or %

[anthonyvd, 2016/01/18 21:40:08]

Done. Changed the other font-size that were in px as well.

+  line-height: 150%;
+  padding-bottom: 32px;
+}
+
+.picture-container {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  padding-bottom: 32px;
+}
+
+.picture {
+  height: 96px;
+  position: relative;
+  width: 96px;
+}
+
+#profile-picture,
+.checkmark-bubble {
+  position: absolute;
+}
+
+.checkmark-bubble {
+  background-color: white;
+  background-image: url(//resources/images/check_circle.svg);
+  background-size: 100%;
+  border: 1px solid white;
+  border-radius: 50%;
+  display: inline-block;
+  height: 30px;
+  left: 64px;
+  top: 66px;

[Dan Beam, 2016/01/13 23:45:22]

RTL

[anthonyvd, 2016/01/18 21:40:08]

Still not sure what you mean by RTL here. Quoting from my comment on patchset 4:
"This is a checkmark icon partially overlapping the profile picture. Would it
typically be affected by a RTL culture?  If so, what's the typical way to handle
this?"

+  width: 30px;
+}
+
+.action-container {
+  align-items: baseline;
+  display: flex;
+  justify-content: flex-end;
+}
+
+paper-button {
+  font-size: 13px;
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+#confirmButton {
+  background-color: rgb(66, 133, 244);
+  color: white;
+}
+
+#undoButton {
+  color: #5A5A5A;
+}