cros: Update design of encryption migration UI for ext4 dircrypto.

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

Index: chrome/browser/resources/chromeos/login/encryption_migration.css
diff --git a/chrome/browser/resources/chromeos/login/encryption_migration.css b/chrome/browser/resources/chromeos/login/encryption_migration.css
index 41bd2f870f5327cb0a686318224789452c1d67b6..f40bcf4826d7669ebaafd68ac103e0f86a440c7d 100644
--- a/chrome/browser/resources/chromeos/login/encryption_migration.css
+++ b/chrome/browser/resources/chromeos/login/encryption_migration.css
@@ -2,13 +2,49 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
+oobe-dialog {
+  max-width: 768px;
+}
+
+oobe-dialog div {
+  line-height: 1.54;  /* 20px height for 13px font. */
+}
+
 paper-progress {
   --paper-progress-active-color: var(--google-blue-500);
-  bottom: 0;
   height: 3px;
+  margin-bottom: 28px;
   width: 100%;
 }
 
 .bottom-buttons {
   -webkit-padding-end: 16px;
 }
+
+oobe-text-button {
+  color: rgb(90, 90, 90);
+}
+
+oobe-dialog > iron-icon {
+  height: 32px;
+  width: 32px;
+}
+
+oobe-dialog > iron-icon.warning {
+  --iron-icon-fill-color: rgb(219, 68, 55);
+}
+
+.chrome-logo {
+  background-image: -webkit-image-set(
+      url(images/chrome_icon_1x.png) 1x, url(images/chrome_icon_2x.png) 2x);

[fukino, 2017/04/13 19:35:23]

Chrome-logo's svg file was huge and complex even when I ran SVG optimizer on it.
Because of this, I use png file here.

[xiyuan, 2017/04/13 20:33:08]

Understand. But it is tricky when involving chrome icons since we need to handle
"Google Chrome" and "Chromium" case differently.

Can you do something similar to welcome UI [1] ? You can add the logo resources
in CreateOobeUIDataSource [2].

[1]:
https://cs.chromium.org/chromium/src/chrome/browser/ui/webui/welcome_ui.cc?rc...
[2]:
https://cs.chromium.org/chromium/src/chrome/browser/ui/webui/chromeos/login/o...

[fukino, 2017/04/13 21:33:41]

Oh I did not know that there already is a product log in PNG format.
I removed the new PNGs and used IDR_PRODUCT_LOGO_64.
The logo is shown in 32px * 32px, so LOGO_64 should be sufficient for 1x and 2x
resolution.

+}
+
+.footer div {
+  color: rgb(51, 51, 51);
+  font-size: 13px;
+}
+
+.footer div.warning {
+  color: rgb(197, 57, 41);
+  font-weight: 500;
+}