[FilesBulkPinning] Fix up UI polish on XfCloudPanel

This addresses a number of issues addressed via UI polish review:

 - The Google Drive settings is a menu item that should have 8px margin
   above and below the actual link, not padding.
 - The individual icons used as suffix icons on the cloud button should
   have an outline that matches the background color, not white.
 - The progress bar track color should be highlight_shape.

Fixed: b:281136401, b:281694909
Bug: b:281693959, b:281136150
Test: Deploy to DUT and view
Change-Id: Icdd4f4d8fe6587422c832a159fdeb44d5a6573ba
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4568469
Reviewed-by: Wenbo Jie <wenbojie@chromium.org>
Commit-Queue: Ben Reich <benreich@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1150160}

ui/file_manager/file_manager/widgets/xf_cloud_panel.ts

@@ -324,7 +324,7 @@ function getCSS() {
     }
 
     progress::-webkit-progress-bar {
-      background-color: var(--cros-sys-primary_container);
+      background-color: var(--cros-sys-highlight_shape);
       border-radius: 10px;
     }
 
@@ -343,10 +343,10 @@ function getCSS() {
       background-color: var(--cros-sys-base_elevated);
       border: 0;
       font: var(--cros-button-2-font);
-      height: 52px;
-      padding-bottom: 8px;
+      height: 36px;
+      margin-bottom: 8px;
+      margin-top: 8px;
       padding-inline: 16px;
-      padding-top: 8px;
       text-align: left;
     }
 

ui/file_manager/file_manager/widgets/xf_icon.ts

@@ -112,6 +112,7 @@ function getCSS() {
   return css`
     :host {
       --xf-icon-color: var(--cros-sys-on_surface);
+      --xf-icon-base-color: var(--cros-sys-app_base);
       display: inline-block;
     }