arc: opt-in UI and oobe button fix.

arc optin: Change to oobe style.
oobe arc optin: Fix agree button end margin to 18px.
oobe button: Change the radius of light blue outside border to 4px
according to UI feedback.

Bug: 767664
Test: Manual
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I59c03f5c29bda7e6fa0f8d0366068d1c0ee277e3
Reviewed-on: https://chromium-review.googlesource.com/677637Reviewed-by: Xiyuan Xia <xiyuan@chromium.org>
Commit-Queue: Long Cheng <lgcheng@google.com>
Cr-Commit-Position: refs/heads/master@{#503638}

chrome/browser/resources/chromeos/arc_support/main.css

@@ -65,10 +65,6 @@ p.title {
   width: 12px;
 }
 
-.button-separator {
-  width: 1px;
-}
-
 .button-active-directory-auth {
   border: 1px solid #e6e6e6;
   border-radius: 2px;
@@ -81,6 +77,11 @@ p.title {
   -webkit-margin-end: 18px;
 }
 
+#button-cancel,
+#button-send-feedback {
+  -webkit-margin-end: 6px;
+}
+
 .checkbox-text,
 .content-text {
   color: rgba(0, 0, 0, 0.54);

chrome/browser/resources/chromeos/arc_support/main.html

@@ -13,28 +13,42 @@
   <link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html">
   <style is="custom-style" include="iron-flex iron-flex-alignment">
     paper-button {
-      border-radius: 2px;
+      border-radius: 4px;
       border-style: solid;
       border-width: 2px;
-      font: Roboto, sans-serif;
-      font-size: 12px;
-      font-weight: 500;
       height: 32px; /* = 28px + 2 * 2px border */
-      padding: 0 16px;
-      text-transform: none;
+      margin: 0;
+      padding: 0;
     }
     paper-button.blue {
-      background: rgb(66, 133, 244);
-      color: white;
+      border-color: transparent;
     }
     paper-button.white {
-      background: white;
       border-color: rgba(0, 0, 0, 0.1);
-      color: rgba(0, 0, 0, 0.54);
     }
     paper-button[focused] {
       border-color: rgba(66, 133, 244, 0.4); /* #4284f4 */
     }
+    paper-button .container {
+      align-items: center;
+      align-self: stretch;
+      border-radius: 2px;
+      display: flex;
+      font: Roboto, sans-serif;
+      font-size: 12px;
+      font-weight: 500;
+      justify-content: center;
+      padding: 0 16px;
+      text-transform: none;
+    }
+    paper-button.white .container {
+      background-color: white;
+      color: rgba(0, 0, 0, 0.54);
+    }
+    paper-button.blue .container {
+      background-color: rgb(66, 133, 244); /* #4285f4 */
+      color: white;
+    }
     paper-checkbox {
       --paper-checkbox-size: 12px;
       --paper-checkbox-checked-color: rgb(66, 133, 244); /* #4285f4 */
@@ -116,11 +130,13 @@
       </div>
       <div class="layout horizontal center end-justified section-buttons">
         <div class="flex"></div>
-        <paper-button class="white" id="button-cancel"
-            i18n-content="buttonCancel">
+        <paper-button class="white" id="button-cancel">
+          <div class="container flex" i18n-content="buttonCancel">
+          </div>
         </paper-button>
-        <div class="button-separator"></div>
-        <paper-button class="blue" id="button-agree" i18n-content="buttonAgree">
+        <paper-button class="blue" id="button-agree">
+          <div class="container flex" i18n-content="buttonAgree">
+          </div>
         </paper-button>
       </div>
     </div>
@@ -195,11 +211,13 @@
       </div>
       <div class="layout horizontal center end-justified section-buttons">
         <div class="flex"></div>
-        <paper-button class="white" id="button-send-feedback"
-            i18n-content="buttonSendFeedback">
+        <paper-button class="white" id="button-send-feedback">
+          <div class="container flex" i18n-content="buttonSendFeedback">
+          </div>
         </paper-button>
-        <div class="button-separator"></div>
-        <paper-button class="blue" id="button-retry" i18n-content="buttonRetry">
+        <paper-button class="blue" id="button-retry">
+          <div class="container flex" i18n-content="buttonRetry">
+          </div>
         </paper-button>
       </div>
     </div>
@@ -214,8 +232,9 @@
       <div class="action-area">
         <div class="action-area-right">
           <div class="button-strip">
-            <paper-button class ="blue" id="overlay-close"
-                i18n-content="overlayClose">
+            <paper-button class ="blue" id="overlay-close">
+              <div class="container flex" i18n-content="overlayClose">
+              </div>
             </paper-button>
           </div>
         </div>

chrome/browser/resources/chromeos/login/arc_terms_of_service.css

@@ -93,5 +93,5 @@ p {
 
 #arc-tos-accept-button-md,
 #arc-tos-retry-button-md {
-  -webkit-padding-end: 12px;
+  -webkit-padding-end: 18px;
 }

chrome/browser/resources/chromeos/login/oobe_text_button.css

@@ -4,7 +4,7 @@
 
 paper-button {
   border-color: var(--oobe-text-button-border-color, transparent);
-  border-radius: 2px;
+  border-radius: 4px;
   border-style: solid;
   border-width: 2px;
   height: 32px; /* = 28px + 2 * 2px border */