[Contextual Search] Update promo look.

chrome/browser/resources/contextual_search/promo.css

Index: chrome/browser/resources/contextual_search/promo.css
diff --git a/chrome/browser/resources/contextual_search/promo.css b/chrome/browser/resources/contextual_search/promo.css
index 098ab121c54bdf1e284c50f4adad45d8f474e01f..63fe3392ee401b7ad2ca51b0702e639840192146 100644
--- a/chrome/browser/resources/contextual_search/promo.css
+++ b/chrome/browser/resources/contextual_search/promo.css
@@ -26,7 +26,6 @@
 }
 
 body {
-  color: #414141;
   font-family: 'Roboto2', sans-serif;
   margin: 0;
 }
@@ -39,7 +38,21 @@ a.colored-link {
   color: rgb(66, 133, 244);
 }
 
+#container {
+  /* NOTE(pedrosimonetti): There's an implicit extra top margin that is
+   * rendered natively (currently using 24dp). So, the total padding will
+   * be 38dp (24dp + 14dp). For more info, see SEARCH_BAR_HEIGHT_STATE_PROMO
+   * in ContextualSearchPanelBase.java.
+   *
+   * We're also setting the side and bottom paddings to ensure to make sure
+   * that when computing the height of the container all margins/paddings will
+   * be considered.
+   */
+  padding: 14px 16px 12px;
+}
+
 #button-container {
+  margin-top: 24px;
   text-align: end;
   width: 100%;
 }
@@ -52,21 +65,24 @@ a.colored-link {
 }
 
 #description {
+  color: #7E7E7E;
   font-size: 16px;
-  line-height: 1.4em;
-  margin: 24px 16px 4px 16px;
+  line-height: 1.38em;
+  margin: 12px 0 24px;
 }
 
 /* Some properties below can be overridden in landscape orientation. */
 #heading {
-  font-size: 24px;
-  letter-spacing: 1px;
-  margin-top: 0;
+  font-size: 23px;
+  margin: 20px 0 12px;
   text-align: center;
 }
-#header-image {
-  height: 100px;
-  margin: 0 auto 24px auto;
+.header-image {
+  background-image: url(header.svg);
+  background-repeat: no-repeat;
+  height: 98px;
+  margin: 0 auto 38px auto;
+  width: 156px;
 }
 .portrait {
   display: block;
@@ -78,10 +94,27 @@ a.colored-link {
 /* Landscape */
 @media screen and (orientation:landscape) {
   #heading {
-    padding-top: 16px;
+    margin-top: 0;
+    /* The heading text and description text should be aligned, therefore
+     * the left margin here will be equal to the header image width (156px)
+     * plus its right margin (24px). Therefore the total left should be
+     * 156px + 24px = 180px.
+     */
+    margin-left: 180px;
+    padding-top: 8px;
+    text-align: left;
   }
-  #header-image {
-    margin: 0 24px;
+  .header-image {
+    /* The header image is supposed to be vertically centered when the promo
+     * is in landscape mode. For now, we're forcefully moving the image 4
+     * pixels up to make it centered. A better approach would be using CSS
+     * flexbox to properly center it, but this will require changing the
+     * markup and styling of the whole promo, and it could be tricky coming
+     * up with a single markup that works in both portrait and lanscape modes.
+     */
+    margin: 0 24px 0 0;
+    position: relative;
+    top: -4px;
   }
   .portrait {
     display: none;
@@ -101,11 +134,12 @@ button {
   display: inline-block;
   font-family: 'Roboto2', sans-serif;
   font-size: 14px;
-  margin: 14px 0;
+  margin: 6px 0;
   /* We use a slightly different top-bottom padding because Roboto has a
-     rendering bug which makes an extra padding to be rendered at the bottom of
-     text. */
-  padding: 17px 14px 13px 14px;
+   * rendering bug which makes an extra padding to be rendered at the bottom of
+   * text.
+   */
+  padding: 12px 16px 8px;
   white-space: nowrap;
 }
 
@@ -117,7 +151,6 @@ button .caption {
   background: rgb(66, 133, 244);
   background-clip: padding-box;
   border-radius: 3px;
-  margin-right: 24px;
 }
 
 #optin-button .caption {