Enhanced Sync Confirmation modal

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
index 912f717e2dff3c4f302fb48c9ec92d5f5422b331..124d1c04043bc19f232af26ec4f353b242cf1f32 100644
--- a/chrome/browser/resources/sync_confirmation/sync_confirmation.css
+++ b/chrome/browser/resources/sync_confirmation/sync_confirmation.css
@@ -8,7 +8,7 @@ body {
 }
 
 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;
 }
 
@@ -20,30 +20,22 @@ a {
 
 .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 {
@@ -51,6 +43,7 @@ a {
   display: flex;
   justify-content: center;
   padding-bottom: 32px;
+  padding-top: 24px;
 }
 
 .picture {
@@ -65,29 +58,69 @@ a {
   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;
 }