Issue #3498562: The styling of the new installed button is not inline in light...

Issue #3498562: The styling of the new installed button is not inline in light and broken in dark mode

css/pb.css

@@ -1109,3 +1109,11 @@
 .views-bulk-actions__item-gin {
   color: var(--gin-color-text-light);
 }
+
+button.project_status-indicator.project_status-indicator-gin {
+  margin-bottom: 5px;
+  margin-left: 5px;
+  background: none;
+  font-size: 16px;
+  font-weight: 700;
+}

images/green-checkmark-icon.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 13"><path d="M2 6.571L5.6 10 14 2" fill="none" stroke="#42a877" stroke-width="3"/></svg>

sveltejs/src/Project/ActionButton.svelte

@@ -15,6 +15,7 @@
 
   // eslint-disable-next-line import/no-mutable-exports,import/prefer-default-export
   export let project;
+  const drupalSetting = drupalSettings;
 
   const { Drupal } = window;
   const processMultipleProjects = MAX_SELECTIONS === null || MAX_SELECTIONS > 1;
@@ -58,7 +59,11 @@
     <ProjectStatusIndicator {project} statusText={Drupal.t('Not compatible')} />
   {:else if project.status === 'active'}
     <ProjectStatusIndicator {project} statusText={Drupal.t('Installed')}>
-      <ProjectIcon type="installed" />
+      {#if 'gin' in drupalSetting && drupalSetting.gin.darkmode === '1'}
+        <ProjectIcon type="greenInstalled" />
+      {:else}
+        <ProjectIcon type="installed" />
+      {/if}
     </ProjectStatusIndicator>
   {:else}
     <span>

sveltejs/src/Project/ProjectIcon.svelte

@@ -37,6 +37,11 @@
       alt: Drupal.t('Installed'),
       title: Drupal.t('This project is installed.'),
     },
+    greenInstalled: {
+      path: 'green-checkmark-icon',
+      alt: Drupal.t('Installed'),
+      title: Drupal.t('This module is installed.'),
+    },
   };
 </script>
 

sveltejs/src/Project/ProjectStatusIndicator.svelte

 <script>
   export let project;
   export let statusText;
+  let buttonClasses = '';
+  let buttonLabelClasses = '';
 
   const { Drupal } = window;
+  $: {
+    // @see css/pb.css
+    if ('gin' in drupalSettings && drupalSettings.gin.darkmode === '1') {
+      buttonClasses = 'project_status-indicator-gin';
+      buttonLabelClasses = 'project_status-indicator__label-gin';
+    } else {
+      buttonLabelClasses = 'project_status-indicator__label';
+    }
+  }
 </script>
 
-<button class="project_status-indicator" aria-disabled="true">
+<button class="project_status-indicator {buttonClasses}" aria-disabled="true">
   <slot />
   <span class="visually-hidden">
     {Drupal.t('@module is', {
       '@module': `${project.title}`,
     })}
   </span>
-  <span class="project_status-indicator__label">{statusText}</span>
+  <span class={buttonLabelClasses}>{statusText}</span>
 </button>