[Nearby] Fix share target list hitbox and scroll, adjust layout, colors

After the third element in the share target list, clicking would not
select properly. The problem was the transparent ripple animation being
higher in the z-order and capturing the click events.

The share target list wasn't scrolling because its height wasn't fixed.
Setting its flexbox alignment to stretch allows it to fill its parent
div without overflowing.

A number of small adjustments to layout included, mostly to bring
margins closer to spec. The page template title and subtitle font sizes
and line heights have been adjusted.

Some minor changes to colors. A white background has been added to
the share target list items so that the ripple animation doesn't show
through. The gradient at the bottom of the discovery page is simplified.
Hard-coded colors have been replaced with variables in several places.

Fix: 1151374
Change-Id: Ie405cd046559c3b7c82bfb86a226c77aba2283df
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2551590Reviewed-by: James Vecore <vecore@google.com>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Commit-Queue: Curt Clemens <cclem@google.com>
Cr-Commit-Position: refs/heads/master@{#829816}

chrome/browser/resources/nearby_share/nearby_device.html

 <style>
   #wrapper {
     align-items: center;
+    background-color: rgb(255, 255, 255);
     border: 1px solid rgba(216, 216, 216, 0.76);
     border-radius: 8px;
     box-sizing: border-box;
@@ -19,11 +20,11 @@
   }
 
   :host(:focus) #wrapper {
-    border-color: rgb(95, 99, 104);
+    border-color: var(--google-grey-refresh-700);
   }
 
   :host([is-selected]) #wrapper {
-    border-color: rgb(66, 133, 244);
+    border-color: var(--google-blue-refresh-500);
   }
 
   :host([is-selected]) #done {
@@ -31,11 +32,11 @@
   }
 
   :host([is-selected]) #name {
-    color: rgb(26, 115, 232);
+    color: var(--google-blue-600);
   }
 
   #done {
-    color: rgb(26, 115, 232);
+    color: var(--google-blue-600);
     display: none;
     flex-shrink: 0;
     height: 17px;

chrome/browser/resources/nearby_share/nearby_discovery_page.html

@@ -6,8 +6,8 @@
   }
 
   #centerContent {
-    background: radial-gradient(160% 50% at 0 100%,
-        rgba(var(--google-blue-refresh-300-rgb), 0.25), rgba(255, 255, 255, 0));
+    background: linear-gradient(to top, var(--google-blue-50) 5%,
+                                rgba(255, 255, 255, 0) 50%);
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
@@ -17,6 +17,7 @@
   }
 
   #deviceList {
+    align-self: stretch;
     display: block;
     margin-top: 12px;
     overflow: auto;
@@ -72,9 +73,10 @@
     flex-direction: row;
     font-size: 9px;
     line-height: 12px;
+    margin-block-end: 8px;
     margin-inline-end:  var(--nearby-page-space-inline);
     margin-inline-start: var(--nearby-page-space-inline);
-    padding: 8px;
+    padding: 0 8px;
   }
 
   #helpText {
@@ -96,9 +98,10 @@
   #process-row {
     align-items: flex-start;
     display: flex;
+    flex-grow: 1;
     justify-content: space-between;
-    margin: auto 0;
-    margin-block-start: 48px;
+    margin-block-end: 24px;
+    margin-block-start: 8px;
     overflow: hidden;
   }
 
@@ -110,7 +113,7 @@
 
   #placeholder {
     align-self: center;
-    color: rgb(95, 99, 104);
+    color: var(--google-grey-refresh-700);
     font-size: 13px;
     line-height: 20px;
     margin-inline-end: var(--nearby-page-space-large-inline);
@@ -125,6 +128,9 @@
         cancel-button-label="$i18n{nearbyShareActionsCancel}"
         cancel-button-event-name="close">
   <div id="centerContent" slot="content">
+    <cr-lottie animation-url="nearby_share_pulse_animation.json"
+        autoplay="true">
+    </cr-lottie>
     <div id="process-row">
       <nearby-preview send-preview="[[sendPreview]]"></nearby-preview>
       <div id="placeholder"
@@ -168,8 +174,5 @@
         </div>
       </div>
     </template>
-    <cr-lottie animation-url="nearby_share_pulse_animation.json"
-        autoplay="true">
-    </cr-lottie>
   </div>
 </nearby-page-template>

chrome/browser/resources/nearby_share/shared/nearby_page_template.html

@@ -32,8 +32,14 @@
       }
 
       #pageTitle {
-        font-size: 1.1em;
+        font-size: 16px;
         font-weight: bold;
+        line-height: 24px;
+      }
+
+      #pageSubTitle {
+        font-size: 14px;
+        line-height: 20px;
       }
 
       #actions {