[Nearby] Reduce onboarding dialog height.

This reduces the height of the onboarding dialog, and updates spacing
between other elements to fit the new height as well as to come
inline with the spec.

Screenshots:
  https://screenshot.googleplex.com/4KC2SMGEsQDDcZZ.png
  https://screenshot.googleplex.com/8wWbvuyZS5iS5YJ.png
  https://screenshot.googleplex.com/8v8wrjAfj2cMH5M.png

Spec:
  https://carbon.googleplex.com/cros-ux/pages/nearby-share/onboarding-flow

Bug: b:168841167
Change-Id: I311ca41b8c9269ba1c66ea1f86147894329e09d0
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2530284
Commit-Queue: Michael Hansen <hansenmichael@google.com>
Reviewed-by: James Vecore <vecore@google.com>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#826902}

chrome/browser/nearby_sharing/sharesheet/nearby_share_action.cc

@@ -65,7 +65,7 @@ constexpr int kCornerRadius = 12;
 
 gfx::Size ComputeSize() {
   // TODO(vecore): compute expected size based on screen size
-  return {500, 500};
+  return {/*width=*/512, /*height=*/420};
 }
 
 }  // namespace

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

@@ -19,7 +19,7 @@
     <style include="cr-icons cr-shared-style">
       :host {
         --card-border-color: var(--google-grey-300);
-        --cr-card-radio-button-padding: 8px 16px 8px 16px;
+        --cr-card-radio-button-padding: 4px 12px 4px 12px;
         --iron-icon-height: var(--cr-icon-size);
         --iron-icon-width: var(--cr-icon-size);
       }
@@ -31,18 +31,21 @@
       #main {
         display: flex;
         flex-direction: column;
+        line-height: 20px;
       }
 
       #visibilityRadioGroup {
         display: flex;
         justify-content: center;
-        margin-block-end: 8px;
+        margin-block-end: 16px;
       }
 
       cr-card-radio-button {
         border: 1px solid var(--card-border-color);
         box-shadow: none;
         flex: 1;
+        margin-block-end: 0;
+        margin-block-start: 0;
         margin-inline-end: 5px;
         margin-inline-start: 5px;
         padding: 0;
@@ -140,14 +143,12 @@
         width: 100%;
       }
 
-      .viz-description-section div {
+      .viz-description-section {
         margin-block-end: 8px;
       }
 
       .explanation-section {
         display: flex;
-        margin-block-end: 8px;
-        margin-block-start: 8px;
       }
 
       .padded-icon {
@@ -160,7 +161,6 @@
       #contactList {
         border-bottom: var(--cr-separator-line);
         border-top: var(--cr-separator-line);
-        padding-block-start: 16px;
       }
 
       #contactsHeading {
@@ -168,9 +168,7 @@
       }
 
       .contacts-section {
-        height: 100px;
-        margin-block-end: 8px;
-        margin-block-start: 8px;
+        height: 72px;
       }
 
       .contact-item {

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

@@ -19,7 +19,7 @@
       #header {
         margin-inline-end:  var(--nearby-page-space-inline);
         margin-inline-start: var(--nearby-page-space-inline);
-        padding-block-end: var(--nearby-page-space-block);
+        padding-block-end: 16px;
         padding-block-start: var(--nearby-page-space-block);
       }
 

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

@@ -18,11 +18,12 @@
     <style>
       div.title {
         font-weight: 500;
-        padding-bottom: 0;
+        padding-block-end: 0;
+        padding-block-start: 24px;
       }
 
       div.header {
-        padding-bottom: 20px;
+        padding-block-end: 16px;
         padding-inline-start: 20px;
       }
     </style>

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

@@ -16,7 +16,7 @@
   <template>
     <style>
       cr-dialog::part(dialog) {
-        height: 600px;
+        height: 420px;
         width: 512px;
       }
     </style>