[signin] Improve style for profile customization bubble

Notes:
* on the mock, there is a color row missing. I've confirmed that it
  should be added (this is done in this CL).
* The input is not plumbed (does not update the profile name)
* the pink color is hardcoded
* the brush icon for the custom color is larger than the mocks

Screenshot:
https://screenshot.googleplex.com/AStdxggC7tftUN2.png

Mock:
https://screenshot.googleplex.com/4Ntu44ka2iBMJxm.png

Bug: 1130945
Change-Id: I736119eae9714f6662955c41f30e13624710dd52
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2450010
Commit-Queue: David Roger <droger@chromium.org>
Reviewed-by: Monica Basta <msalama@chromium.org>
Cr-Commit-Position: refs/heads/master@{#814607}

chrome/browser/resources/signin/profile_customization/BUILD.gn

@@ -18,6 +18,8 @@ js_library("profile_customization_app") {
     ":profile_customization_browser_proxy",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/cr_components/customize_themes",
+    "//ui/webui/resources/cr_elements/cr_button:cr_button.m",
+    "//ui/webui/resources/cr_elements/cr_input:cr_input.m",
   ]
 }
 

chrome/browser/resources/signin/profile_customization/profile_customization_app.html

-<div>$i18n{profileCustomizationPickThemeTitle}</div>
+<style include="signin-dialog-shared">
+  :host {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
 
-<cr-customize-themes id="themeSelector" auto-confirm-theme-changes>
-</cr-customize-themes>
+  #header {
+    background-color: pink;  /* TODO: use profile color */
+    border-radius: 4px;
+    height: 128px;
+    margin: 8px 8px;
+  }
 
-<cr-button id="doneButton" on-click="onDoneCustomizationClicked_">
-  $i18n{profileCustomizationDoneLabel}
-</cr-button>
+  #nameInput {
+    --cr-input-placeholder-color: var(--google-grey-900);
+    --cr-input-padding-bottom: 8px;
+    --cr-input-padding-top: 8px;
+    height: 32px;
+    margin: 8px auto 16px;
+    maxlength: 16;
+    width: 114px;
+  }
+
+  #lineSeparator {
+    border-top: 1px solid var(--google-grey-refresh-100);
+    margin: 0;
+  }
+
+  #pickThemeContainer {
+    margin: 16px auto auto;
+  }
+
+  #pickThemeTitle {
+    color: var(--cr-secondary-text-color);
+    font-size: 15px;
+    font-weight: 500;
+    margin-bottom: 16px;
+  }
+
+  #themeSelector {
+    --cr-customize-themes-grid-gap: 7px;
+    --cr-customize-themes-icon-size: 36px;
+  }
+
+  .action-container {
+    padding: 0 16px 16px;
+  }
+
+  cr-button {
+    font-size: 12px;
+    width: 111px;
+
+  }
+</style>
+
+<div id="header">
+</div>
+
+<cr-input id="nameInput" placeholder="Placeholder" pattern=".*\\S.*"
+    auto-validate spellcheck="false" autofocus>
+</cr-input>
+
+<hr id="lineSeparator">
+
+<div id="pickThemeContainer">
+  <div id="pickThemeTitle">$i18n{profileCustomizationPickThemeTitle}</div>
+  <cr-customize-themes id="themeSelector" auto-confirm-theme-changes>
+  </cr-customize-themes>
+</div>
+
+<div class="action-container">
+  <cr-button id="doneButton" class="action-button"
+      on-click="onDoneCustomizationClicked_">
+    $i18n{profileCustomizationDoneLabel}
+  </cr-button>
+<div>

chrome/browser/resources/signin/profile_customization/profile_customization_app.js

@@ -2,9 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'chrome://resources/cr_components/customize_themes/customize_themes.js';
 import 'chrome://resources/cr_elements/cr_button/cr_button.m.js';
+import 'chrome://resources/cr_elements/cr_input/cr_input.m.js';
 import './strings.m.js';
-import 'chrome://resources/cr_components/customize_themes/customize_themes.js';
+import './signin_shared_css.js';
 
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 

chrome/browser/ui/views/profiles/profile_customization_bubble_view.cc

@@ -22,7 +22,7 @@
 #include "url/gurl.h"
 
 namespace {
-constexpr int kCustomizationBubbleHeight = 452;
+constexpr int kCustomizationBubbleHeight = 495;
 constexpr int kCustomizationBubbleWidth = 290;
 }  // namespace
 

chrome/browser/ui/webui/signin/profile_customization_ui.cc

@@ -27,6 +27,7 @@ ProfileCustomizationUI::ProfileCustomizationUI(content::WebUI* web_ui)
                           IDR_PROFILE_CUSTOMIZATION_APP_JS);
   source->AddResourcePath("profile_customization_browser_proxy.js",
                           IDR_PROFILE_CUSTOMIZATION_BROWSER_PROXY_JS);
+  source->AddResourcePath("signin_shared_css.js", IDR_SIGNIN_SHARED_CSS_JS);
 
   // Localized strings.
   source->UseStringsJs();