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);
   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 paper-checkbox {
+  -webkit-margin-start: 40px;
+}
+
+.message-container paper-checkbox::shadow #checkboxContainer {
+  height: 20px;
+  width: 20px;
+}
+
+.message-container paper-checkbox::shadow #checkbox {
+  border-color: #646464;
+}
+
+.message-container paper-checkbox::shadow #checkboxLabel {
+  color: inherit;
+}
+
 .action-container {
-  align-items: baseline;
   display: flex;
   justify-content: flex-end;
+  padding: 16px;
 }
 
 paper-button {
   font-weight: 500;
   line-height: 16px;
   margin: 0;
   padding: 8px 16px;
 }
 
 paper-button + paper-button {
@@ skipping 235 matching lines @@
 @keyframes fade-in-icon-bottom-right {
   from {
     opacity: 0;
     transform: translate(0, 0);
   }
   to {
     opacity: 0.1;
     transform: translate(4px, 4px);
   }
 }