Zip Archiver: Password dialog styles for FilesNG

Change the padding in the dialog, font-size and color for the title,
change the spacing above and below the input/password.

The new spacing required additional 10px (up to 170px) for the dialog
window height.

This changes the style without guarding with a feature flag because this
basically changes the spacing and color slightly, this dialog was mostly
adhering to the new style and Zip Archiver doesn't have other UIs that
would require consistent look.

Bug: 992827
Change-Id: If9b5ba465ef95e3d1567cc0c87a2b3a780771676
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2226320Reviewed-by: Alex Danilo <adanilo@chromium.org>
Commit-Queue: Alex Danilo <adanilo@chromium.org>
Commit-Queue: Luciano Pacheco <lucmult@chromium.org>
Auto-Submit: Luciano Pacheco <lucmult@chromium.org>
Cr-Commit-Position: refs/heads/master@{#774040}

chrome/browser/resources/chromeos/zip_archiver/css/passphrase.css

@@ -7,7 +7,8 @@ body {
   bottom: 0;
   left: 0;
   margin: 0;
-  padding: 12px;
+  padding: 24px;
+  padding-bottom: 20px;
   position: absolute;
   right: 0;
   top: 0;

chrome/browser/resources/chromeos/zip_archiver/html/passphrase-dialog.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+
+<link rel="stylesheet" href="chrome://resources/css/cros_colors.generated.css">
+
 <link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
 
@@ -15,7 +18,6 @@
         align-items: stretch;
         display: flex;
         flex-direction: column;
-        height: 100%;
         justify-content: space-between;
       }
 
@@ -23,6 +25,7 @@
         align-items: center;
         display: flex;
         justify-content: flex-end;
+        padding-top: 32px;
       }
 
       #input {
@@ -34,10 +37,10 @@
       }
 
       #title {
-        color: black;
-        font-size: 14px;
-        margin: 4px;
+        color: var(--cros-default-text-color-rgb);
+        font-size: 16px;
         overflow: hidden;
+        padding-bottom: 16px;
         text-overflow: ellipsis;
       }
 

chrome/browser/resources/chromeos/zip_archiver/js/passphrase-manager.js

@@ -16,7 +16,7 @@ unpacker.PassphraseManager.prototype.getPassphrase = function() {
     chrome.app.window.create(
         '../html/passphrase.html',
         /** @type {!chrome.app.window.CreateWindowOptions} */ ({
-          innerBounds: {width: 320, height: 160},
+          innerBounds: {width: 320, height: 170},
           alwaysOnTop: true,
           resizable: false,
           frame: 'none',