Enhanced Sync Confirmation modal

chrome/browser/resources/sync_confirmation/sync_confirmation.css

 /* 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 {
   margin: 0;
   padding: 0;
 }
 
 a {
-  color: rgb(85, 149, 254);
+  color: rgb(51, 103, 214);

[Evan Stade, 2016/03/31 19:30:53]

i feel like link colors should be coming from a shared location +dbeam

[Dan Beam, 2016/03/31 20:13:32]

agree generally with estade@

1) where is the same constant also used?
2) is this the same as an existing --google or --paper color?

[Moe, 2016/03/31 21:00:49]

1) this constant is used in one other place for hyperlinks. But in general, we
don't seem to have a shared place for MD pages that styles hyperlinks with
--google, --paper, or any other color. (chrome_shared.css does it but it's not
recommended in MD pages anymore)
2) yes it's the same as --google-blue-700

Something that would work would be to move the rule to <style
is="custom-style"></style> in sync_confirmation.html and use --google-blue-700
instead.

[Dan Beam, 2016/04/01 18:07:07]

we may not have one /yet/, but it's not for a lack of wanting one:
https://codereview.chromium.org/1840043003/
I'd be the happiest with any way that reduces copying constants, makes code
easier to maintain, and enforces consistency across webui pages.

   text-decoration: none;
 }
 
 .picture img {
   border-radius: 50%;
   max-height: 100%;
   max-width: 100%;
 }
 
 .container {
   background-color: white;
-  height: 351px;
+  color: #333;
   overflow: hidden;
   width: 448px;
 }
 
 .top-title-bar {
-  -webkit-padding-start: 24px;
   align-items: center;
   border-bottom: 1px solid lightgray;
-  color: #333;
   display: flex;
   font-size: 16px;
   height: 52px;
+  padding: 0 24px;
 }
 
 .details {
-  height: 250px;
-  padding: 20px 24px;
-}
-
-.sync-message {
-  color: #595959;
-  line-height: 150%;
-  padding-bottom: 32px;
+  padding: 0 24px;
 }
 
 #picture-container {
   align-items: center;
   display: flex;
   justify-content: center;
   padding-bottom: 32px;
+  padding-top: 24px;
 }
 
 .picture {
   -webkit-margin-start: 84px;
   height: 96px;
   position: relative;
   width: 96px;
 }
 
 #profile-picture,
 .checkmark-circle {
   position: absolute;
 }
 
+.message-container {
+  display: flex;
+  margin-bottom: 16px;
+}
+
+.message-container:last-child {
+  margin-bottom: 32px;
+}
+
+.message-container .logo {
+  -webkit-margin-end: 20px;
+  background-size: cover;
+  flex-shrink: 0;
+  height: 20px;
+  width: 20px;
+}
+
+#chrome-logo {
+  background-image: url(../../../../ui/webui/resources/images/200-logo_chrome.png);
+}
+
+#googleg-logo {
+  background-image: url(../../../../ui/webui/resources/images/200-logo_googleg.png);
+}
+
+.message-container .title {
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+
+.message-container .body {
+  color: #646464;
+}
+
+.message-container .text {
+  line-height: 20px;
+}
+
+.message-container #activityControlsCheckbox {
+  -webkit-margin-start: 40px;
+}
+
 .action-container {
-  align-items: baseline;
   display: flex;
   justify-content: flex-end;
+  padding: 16px;
 }
 
-paper-button {
+#confirmButton,
+#undoButton {
   font-weight: 500;
   line-height: 16px;
   margin: 0;
   padding: 8px 16px;
 }
 
-paper-button + paper-button {
-  -webkit-margin-start: 8px;
-}
-
 #confirmButton {
   background-color: rgb(66, 133, 244);
   color: white;
 }
 
 #undoButton {
+  -webkit-margin-start: 8px;
   color: #5A5A5A;
 }
 
 #illustration {
   height: 96px;
   margin: 0 auto;
   position: relative;
   width: 264px;
 }
 
@@ skipping 216 matching lines @@
 @keyframes fade-in-icon-bottom-right {
   from {
     opacity: 0;
     transform: translate(0, 0);
   }
   to {
     opacity: 0.1;
     transform: translate(4px, 4px);
   }
 }