crostini: Tweak crostini installer UI

This is based on review from the UX designer.

Bug: 1016195
Change-Id: Ic48a9595b65a7b66fa21ae0f4e3d575906a275cb
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2053943
Auto-Submit: Jason Lin <lxj@google.com>
Reviewed-by: Joel Hockey <joelhockey@chromium.org>
Commit-Queue: Joel Hockey <joelhockey@chromium.org>
Cr-Commit-Position: refs/heads/master@{#741318}

chrome/browser/resources/chromeos/crostini_installer/app.html

@@ -69,12 +69,17 @@
   }
 
   #configure-message-title {
-    margin-bottom: 46px;
+    margin-bottom: 41px;
   }
 
   #username {
     width: 264px;
   }
+
+  a[href] {
+    color: var(--cr-link-color);
+    text-decoration: none;
+  }
 </style>
 
 <div id="main">
@@ -148,4 +153,4 @@
       [[getInstallButtonLabel_(state_)]]
     </cr-button>
   </div>
-</div>
\ No newline at end of file
+</div>

chrome/browser/resources/chromeos/crostini_installer/app.js

@@ -204,7 +204,8 @@ Polymer({
   onNextButtonClick_() {
     assert(this.state_ === State.PROMPT);
     this.state_ = State.CONFIGURE;
-    this.$.install.focus();
+    // Focus the username input and move the cursor to the end.
+    this.$.username.select(this.username_.length, this.username_.length);
   },
 
   /** @private */