[CrOS MultiDevice] Setup Flow UI Styling (cont.)

Under the hood:
  -Pulled styling imports into multidevice_setup_shared_css

Visible
  -Unified default text specs
  -Placed button bar at the bottom of the page
  -Implemented some (not all) padding between elements in start setup
page

Bug: 878646, 878644, 878643
Change-Id: I53d97060d139bcadd9594866f9342040fa386e80
Reviewed-on: https://chromium-review.googlesource.com/1232473Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Commit-Queue: Jordy Greenblatt <jordynass@chromium.org>
Cr-Commit-Position: refs/heads/master@{#592304}

chrome/browser/resources/chromeos/multidevice_setup/button_bar.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
-<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
-<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
+<link rel="import" href="multidevice_setup_shared_css.html">
 
 <!-- TODO(jordynass): Implement OOBE style and make the visible style dependent
 on the MultiDeviceSetup.uiMode property. -->
 <dom-module id="button-bar">
   <template>
-    <style include="iron-flex paper-button-style cr-shared-style">
+    <style include="multidevice-setup-shared">
       :host {
         @apply(--layout-end-justified);
         @apply(--layout-horizontal);

chrome/browser/resources/chromeos/multidevice_setup/multidevice_setup.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/html/cr.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-pages/iron-pages.html">
 <link rel="import" href="button_bar.html">
 <link rel="import" href="fake_mojo_service.html">
 <link rel="import" href="i18n_setup.html">
 <link rel="import" href="mojo_api_behavior.html">
+<link rel="import" href="multidevice_setup_shared_css.html">
 <link rel="import" href="password_page.html">
 <link rel="import" href="setup_failed_page.html">
 <link rel="import" href="setup_succeeded_page.html">
@@ -15,15 +15,12 @@
 
 <dom-module id="multidevice-setup">
   <template>
-    <style>
+    <style include="multidevice-setup-shared">
       :host {
         @apply(--layout-vertical);
-        @apply(--layout-start-justified);
-        padding: 60px 32px 32px 32px;
-      }
-
-      button-bar {
-        margin-top: 40px;
+        box-sizing: border-box;
+        height: 100%;
+        padding: 60px 64px 32px 64px;
       }
     </style>
     <iron-pages attr-for-selected="is"
@@ -41,6 +38,7 @@
           selected-device-id="{{selectedDeviceId_}}">
       </start-setup-page>
     </iron-pages>
+    <div class="flex"></div>
     <button-bar forward-button-text="[[visiblePage_.forwardButtonText]]"
         forward-button-disabled="[[forwardButtonDisabled_]]"
         backward-button-text="[[visiblePage_.backwardButtonText]]">

chrome/browser/resources/chromeos/multidevice_setup/multidevice_setup_shared_css.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
+<link rel="import" href="chrome://resources/html/md_select_css.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout.html">
 
 <dom-module id="multidevice-setup-shared">
   <template>
-    <style>
-      .page-content-text {
-        color: var(--google-grey-700);
-        font-family: Roboto-Regular, Roboto, sans-serif;
-        font-size: 13px;
-        line-height: 1.4;
-      }
-
+    <style include="iron-flex paper-button-style cr-shared-style md-select">
       a {
         color: var(--google-blue-600);
         text-decoration: none;

chrome/browser/resources/chromeos/multidevice_setup/password_page.html

@@ -2,12 +2,13 @@
 
 <link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
 <link rel="import" href="chrome://resources/html/cr.html">
+<link rel="import" href="multidevice_setup_shared_css.html">
 <link rel="import" href="ui_page.html">
 <link rel="import" href="ui_page_container_behavior.html">
 
 <dom-module id="password-page">
   <template>
-    <style>
+    <style include="multidevice-setup-shared">
       #user-info-container  {
         @apply(--layout-horizontal);
         border: 1px solid rgb(95, 99, 104);

chrome/browser/resources/chromeos/multidevice_setup/setup_succeeded_page.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/html/cr.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="multidevice_setup_browser_proxy.html">
+<link rel="import" href="multidevice_setup_shared_css.html">
 <link rel="import" href="ui_page.html">
 <link rel="import" href="ui_page_container_behavior.html">
 
 <dom-module id="setup-succeeded-page">
   <template>
-    <style include="iron-flex">
+    <style include="multidevice-setup-shared">
       #page-icon-container {
         @apply(--layout-horizontal);
         @apply(--layout-center-justified);

chrome/browser/resources/chromeos/multidevice_setup/start_setup_page.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/html/cr.html">
-<link rel="import" href="chrome://resources/html/md_select_css.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="icons.html">
 <link rel="import" href="multidevice_setup_shared_css.html">
@@ -11,13 +9,13 @@
 
 <dom-module id="start-setup-page">
   <template>
-    <style include="iron-flex multidevice-setup-shared md-select">
+    <style include="multidevice-setup-shared">
       #selector-and-details-container {
         @apply(--layout-horizontal);
-        color: rgb(33, 33, 36);
-        font-family: Roboto-Regular, Roboto, sans-serif;
-        font-size: 13px;
-        padding: 8px 8px 8px 0;
+      }
+
+      #deviceDropdown {
+        margin-top: 16px;
       }
 
       #page-icon-container {
@@ -29,7 +27,7 @@
         background-image: -webkit-image-set(url(start_setup_icon_1x.png) 1x,
                                             url(start_setup_icon_2x.png) 2x);
         height: 116px;
-        margin-top: 20px;
+        margin-top: 10px;
         width: 320px;
       }
 

chrome/browser/resources/chromeos/multidevice_setup/ui_page.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="icons.html">
 <link rel="import" href="multidevice_setup_shared_css.html">
 
 <dom-module id="ui-page">
   <template>
-    <style include="iron-flex iron-flex-alignment multidevice-setup-shared">
-      #ui-page-container {
-        padding-left: 32px;
-        padding-right: 32px;
-      }
-
+    <style include="multidevice-setup-shared">
       iron-icon {
         --iron-icon-width: 32px;
         --iron-icon-height: 32px;
@@ -22,6 +16,7 @@
         color: rgb(32, 33, 36);
         font-family: 'Google Sans';
         font-size: 28px;
+        line-height: 28px;
         margin: 0;
         padding-top: 36px;
       }
@@ -29,16 +24,18 @@
       #message-container {
         padding-top: 16px;
       }
+
+      #additional-content-container {
+        padding-top: 48px;
+      }
     </style>
-    <div id="ui-page-container">
-      <iron-icon icon="[[computeIconIdentifier_(iconName)]]"></iron-icon>
-      <h1>[[headerText]]</h1>
-      <div id="message-container" class="page-content-text">
-        <slot name="message"></slot>
-      </div>
-      <div id="additional-content-container" class="page-content-text">
-        <slot name="additional-content"></slot>
-      </div>
+    <iron-icon icon="[[computeIconIdentifier_(iconName)]]"></iron-icon>
+    <h1>[[headerText]]</h1>
+    <div id="message-container">
+      <slot name="message"></slot>
+    </div>
+    <div id="additional-content-container">
+      <slot name="additional-content"></slot>
     </div>
   </template>
   <script src="ui_page.js"></script>