[Nearby] Fix pulse animation sizing on high visibility page

The pulse animation wasn't always centered on the page, sometimes had
the wrong aspect ratio, and left a blue line at the bottom of the page.

I wasn't able to reproduce the off-center behavior, but fixing the
width seems to have solved the aspect ratio and blue line problems. I
believe the cause may have had to do with the dimensions of the
cr-lottie element getting set before the page finishes rendering, and
then not updating because the width isn't set.

The radial gradient is also replaced with a linear gradient for
simplicity, but also because the right side of the page was perceptibly
less blue than the left.

The cr-lottie element is also moved to be the first child of its parent
div. The idea was to push it back in the z-order. It's difficult to see,
but the animation was actually getting rendered on top of the help text
before.

Screenshot: https://screenshot.googleplex.com/3X8u6cmSSsneUQT.png

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

chrome/browser/resources/settings/chromeos/nearby_share_page/nearby_share_high_visibility_page.html

@@ -11,8 +11,8 @@
   <template>
     <style>
       #content {
-        background: radial-gradient(160% 50% at 0 100%,
-            rgba(138, 180, 248, 0.25),rgba(255, 255, 255, 0));
+        background: linear-gradient(to top, var(--google-blue-50) 5%,
+                                    rgba(255, 255, 255, 0) 50%);
         display: flex;
         flex-direction: column-reverse;
         height: 100%;
@@ -62,14 +62,19 @@
       cr-lottie {
         bottom: 0;
         height: 100px;
+        left: 0;
         pointer-events: none;
         position: absolute;
+        right: 0;
       }
     </style>
     <nearby-page-template title="$i18n{nearbyShareFeatureName}"
         sub-title="[[getSubTitle_(deviceName, remainingTimeInSeconds_)]]"
         cancel-button-label="$i18n{cancel}">
       <div id="content" slot="content">
+        <cr-lottie animation-url="nearby_share_pulse_animation.json"
+            autoplay="true">
+        </cr-lottie>
         <div id="help">
           <template is="dom-if" if="[[!highVisibilityTimedOut_(
               remainingTimeInSeconds_, shutoffTimestamp)]]">
@@ -101,9 +106,6 @@
             </div>
           </template>
         </div>
-        <cr-lottie animation-url="nearby_share_pulse_animation.json"
-            autoplay="true">
-        </cr-lottie>
       </div>
     </nearby-page-template>
   </template>