Try to get the about:pioneer UI more consistent with about:addons/preferences

about-pioneer-visual-consistency.diff

diff --git a/browser/components/pioneer/content/pioneer.css b/browser/components/pioneer/content/pioneer.css
--- a/browser/components/pioneer/content/pioneer.css
+++ b/browser/components/pioneer/content/pioneer.css
@@ -1,45 +1,62 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 body {
-  margin: 50px;
+  margin-inline-start: 240px;
+  margin-block-start: 70px;
+}
+
+@media (max-width: 830px) {
+  body {
+    margin-inline-start: 0;
+  }
+}
+
+#report-content {
+  max-width: 664px;
+  margin-inline-start: 28px;
 }
 
 #enrollment-button {
   float: right;
 }
 
-.card-contents {
-  display: grid;
-  grid-template-columns: 1fr 4fr 2fr 1fr;
-  grid-template-areas:
-    "card-icon card-name join-button toggle-button"
-    "card-icon card-creator join-button toggle-button";
+.card {
+  display: flex;
 }
 
 .card-icon {
-  align-self: center;
-  grid-area: card-icon;
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+}
+
+.card-body {
+  flex-grow: 1;
+  margin-inline-start: 16px;
 }
 
 .card-name {
-  grid-area: card-name;
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.card-creator {
   margin: 0;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.card-actions {
+  align-self: center;
+  flex-shrink: 0;
 }
 
 .join-button {
-  grid-area: join-button;
-  align-self: center;
   max-width: 200px;
+  margin: 0;
+  margin-inline-end: 16px;
 }
-
-.toggle-button {
-  grid-area: toggle-button;
-  align-self: center;
-}
-
-.card-creator {
-  grid-area: card-creator;
-  margin: 0;
-}
\ No newline at end of file
diff --git a/browser/components/pioneer/content/pioneer.js b/browser/components/pioneer/content/pioneer.js
--- a/browser/components/pioneer/content/pioneer.js
+++ b/browser/components/pioneer/content/pioneer.js
@@ -61,61 +61,67 @@ async function showAvailableStudies() {
       console.error(
         `about:pioneer - Study addon ID not found in AMO cache: ${studyAddonId}`
       );
       return;
     }
 
     const study = document.createElement("div");
     study.setAttribute("id", studyAddonId);
-    study.setAttribute("class", "card");
+    study.setAttribute("class", "card card-no-hover");
     study.style.opacity = "0.5";
 
-    const contents = document.createElement("div");
-    contents.setAttribute("class", "card-contents");
-    study.appendChild(contents);
-
-    if (cachedAddon.icons && 64 in cachedAddon.icons) {
+    if (cachedAddon.icons && 32 in cachedAddon.icons) {
       const iconName = document.createElement("img");
       iconName.setAttribute("class", "card-icon");
-      iconName.setAttribute("src", cachedAddon.icons[64]);
-      contents.appendChild(iconName);
+      iconName.setAttribute("src", cachedAddon.icons[32]);
+      study.appendChild(iconName);
     }
 
+    const studyBody = document.createElement("div");
+    studyBody.classList.add("card-body");
+    study.appendChild(studyBody);
+
+    const studyName = document.createElement("h2");
+    studyName.setAttribute("class", "card-name");
+    studyName.textContent = cachedAddon.name;
+    studyBody.appendChild(studyName);
+
     const studyCreator = document.createElement("h3");
     studyCreator.setAttribute("class", "card-creator");
     studyCreator.textContent = cachedAddon.creator;
-    contents.appendChild(studyCreator);
-
-    const studyName = document.createElement("h2");
-    studyName.setAttribute("class", "card-name");
-    studyName.textContent = cachedAddon.name;
-    contents.appendChild(studyName);
+    studyBody.appendChild(studyCreator);
 
     /*
     const studyDesc = document.createElement("h3");
     studyDesc.setAttribute("class", "card-description");
     studyDesc.textContent = cachedAddon.description;
-    contents.appendChild(studyDesc);
+    study.appendChild(studyDesc);
 
     const studyFullDesc = document.createElement("h3");
     studyFullDesc.setAttribute("class", "card-description");
     studyFullDesc.textContent = cachedAddon.fullDescription;
-    contents.appendChild(studyFullDesc);
+    study.appendChild(studyFullDesc);
     */
+
+    const actions = document.createElement("div");
+    actions.classList.add("card-actions");
+    study.appendChild(actions);
+
     const joinNotice = document.createElement("button");
     joinNotice.setAttribute("id", `${studyAddonId}-join-button`);
     joinNotice.setAttribute("class", "join-button");
     joinNotice.textContent = "Join Study";
-    contents.appendChild(joinNotice);
+    actions.appendChild(joinNotice);
 
     const enrollStudyBtn = document.createElement("input");
     enrollStudyBtn.setAttribute("id", `${studyAddonId}-toggle-button`);
     enrollStudyBtn.setAttribute("class", "toggle-button");
     enrollStudyBtn.setAttribute("type", "checkbox");
+    actions.appendChild(enrollStudyBtn);
 
     async function toggleEnrolled() {
       const addon = await AddonManager.getAddonByID(studyAddonId);
       if (addon) {
         enrollStudyBtn.checked = false;
         study.style.opacity = "1";
         joinNotice.classList.add("primary");
         joinNotice.style.visibility = "";
@@ -129,17 +135,17 @@ async function showAvailableStudies() {
 
         const install = await AddonManager.getInstallForURL(
           cachedAddon.sourceURI.spec
         );
         await install.install();
       }
     }
 
-    await enrollStudyBtn.addEventListener("click", toggleEnrolled);
+    enrollStudyBtn.addEventListener("click", toggleEnrolled);
 
     if (Services.prefs.getStringPref(PREF_PIONEER_ID, null)) {
       study.style.opacity = "1";
 
       if (studyAddon) {
         enrollStudyBtn.checked = true;
         joinNotice.style.visibility = "hidden";
         joinNotice.classList.remove("primary");
@@ -150,18 +156,16 @@ async function showAvailableStudies() {
         joinNotice.addEventListener("click", toggleEnrolled);
       }
     } else {
       joinNotice.removeEventListener("click", toggleEnrolled);
       enrollStudyBtn.disabled = true;
       study.style.opacity = "0.5";
     }
 
-    contents.appendChild(enrollStudyBtn);
-
     const availableStudies = document.getElementById("available-studies");
     availableStudies.appendChild(study);
   }
 
   const availableStudies = document.getElementById("header-available-studies");
   document.l10n.setAttributes(availableStudies, "pioneer-available-studies");
 }