Update Assistant OOBE style

Bug: b/78190629
Test: Manual Test
Change-Id: Ia24c946348544f3ebe4a9edc17972895fbc0df60
Reviewed-on: https://chromium-review.googlesource.com/1189709Reviewed-by: Xiyuan Xia <xiyuan@chromium.org>
Commit-Queue: Yue Li <updowndota@chromium.org>
Cr-Commit-Position: refs/heads/master@{#586785}

chrome/browser/resources/chromeos/assistant_optin/assistant_ready.css

@@ -6,9 +6,13 @@
   display: block;
   height: 186px;
   margin: auto;
-  padding: 110px 0 0 72px;
+  padding: 110px 0 0 35px;
 }
 
 #button-text {
   padding: 0 10px 0 10px;
 }
+
+.content {
+  padding-right: 8px;
+}

chrome/browser/resources/chromeos/assistant_optin/assistant_value_prop.css

@@ -13,11 +13,11 @@
 }
 
 #value-prop-container {
+  border-right: 1px solid rgb(218, 220, 224);
   width: 50%;
 }
 
 #consents-container {
-  border-left: 1px solid rgb(218, 220, 224);
   padding-left: 24px;
   width: 50%;
 }
@@ -52,33 +52,17 @@
   width: 100%;
 }
 
+#overlay-title-text {
+  font-size: 15px;
+}
+
 #overlay-additional-info-text {
   color: rgb(128, 134, 139);
   line-height: 20px;
   padding-top: 20px;
 }
 
-#overlay-close-top {
-  background-image: url(chrome://theme/IDR_CLOSE_DIALOG);
-  background-position: center;
-  background-repeat: no-repeat;
-  height: 14px;
-  position: absolute;
-  right: 7px;
-  top: 7px;
-  width: 14px;
-  z-index: 1;
-}
-
-#overlay-close-top:hover {
-  background-image: url(chrome://theme/IDR_CLOSE_DIALOG_H);
-}
-
-#overlay-close-top:active {
-  background-image: url(chrome://theme/IDR_CLOSE_DIALOG_P);
-}
-
-#overlay-close-bottom {
+#overlay-close-button {
   margin-right: 0;
 }
 

chrome/browser/resources/chromeos/assistant_optin/assistant_value_prop.html

@@ -17,7 +17,7 @@
           <img id="logo" src="assistant_logo.png">
           <div class="title" id="title-text"></div>
           <div class="content" id="intro-text"></div>
-          <div class="flex layout horizontal">
+          <div class="flex layout horizontal center">
             <div id="value-prop-container">
               <div class="flex layout horizontal center">
                 <img id="user-image">
@@ -25,9 +25,7 @@
               </div>
               <webview id="value-prop-view"></webview>
             </div>
-            <div id="consents-container">
-              <div id="insertion-point"></div>
-            </div>
+            <div id="consents-container"></div>
           </div>
           <div class="content" id="footer-text"></div>
         </div>
@@ -47,14 +45,12 @@
 
     <div id="learn-more-overlay" class="popup-overlay" hidden>
       <div id="overlay-container" class="oobe-popup not-resizable">
-        <div id="overlay-close-top">
-        </div>
         <div id="overlay-text">
           <div id="overlay-title-text"></div>
           <div id="overlay-additional-info-text"></div>
         </div>
         <div class="button-strip">
-          <oobe-text-button inverse id="overlay-close-bottom">
+          <oobe-text-button inverse id="overlay-close-button">
             <div i18n-content="assistantOptinOKButton" id="close-button-text">
             </div>
           </oobe-text-button>

chrome/browser/resources/chromeos/assistant_optin/assistant_value_prop.js

@@ -262,7 +262,7 @@ Polymer({
       }.bind(this, data['title'], data['additionalInfo']);
       zippy.appendChild(learnMoreLink);
 
-      this.$['insertion-point'].appendChild(zippy);
+      this.$['consents-container'].appendChild(zippy);
     }
 
     this.settingZippyLoaded_ = true;
@@ -287,9 +287,7 @@ Polymer({
   onShow: function() {
     var requestFilter = {urls: ['<all_urls>'], types: ['main_frame']};
 
-    this.$['overlay-close-top'].addEventListener(
-        'click', this.hideOverlay.bind(this));
-    this.$['overlay-close-bottom'].addEventListener(
+    this.$['overlay-close-button'].addEventListener(
         'click', this.hideOverlay.bind(this));
     this.valuePropView_ = this.$['value-prop-view'];
     this.locale =

chrome/browser/resources/chromeos/assistant_optin/setting_zippy.css

@@ -29,6 +29,10 @@
   width: 20px;
 }
 
+.line {
+  background-color: rgb(235, 235, 235);
+}
+
 cr-expand-button {
   padding-right: 8px;
 }
@@ -38,5 +42,5 @@ cr-expand-button {
 }
 
 .indent {
-  padding-left: 36px;
+  padding: 0 0 6px 36px;
 }

chrome/browser/ui/webui/chromeos/assistant_optin/assistant_optin_ui.cc

@@ -6,10 +6,12 @@
 
 #include <memory>
 
+#include "ash/public/cpp/shell_window_ids.h"
 #include "base/bind.h"
 #include "base/macros.h"
 #include "chrome/browser/profiles/profile.h"
 #include "chrome/browser/profiles/profile_manager.h"
+#include "chrome/browser/ui/browser_dialogs.h"
 #include "chrome/browser/ui/webui/chromeos/assistant_optin/get_more_screen_handler.h"
 #include "chrome/browser/ui/webui/chromeos/assistant_optin/ready_screen_handler.h"
 #include "chrome/browser/ui/webui/chromeos/assistant_optin/third_party_screen_handler.h"
@@ -108,7 +110,12 @@ void AssistantOptInDialog::Show(
     ash::mojom::AssistantSetup::StartAssistantOptInFlowCallback callback) {
   DCHECK(!is_active);
   AssistantOptInDialog* dialog = new AssistantOptInDialog(std::move(callback));
-  dialog->ShowSystemDialog(true);
+
+  int container_id = dialog->GetDialogModalType() == ui::MODAL_TYPE_NONE
+                         ? ash::kShellWindowId_DefaultContainer
+                         : ash::kShellWindowId_LockSystemModalContainer;
+  chrome::ShowWebDialogInContainer(
+      container_id, ProfileManager::GetActiveUserProfile(), dialog, true);
 }
 
 // static