Make extension icon part of the theme (#1665)

Author: ia3andy

.github/quarkus-ecosystem-test

@@ -1,7 +1,7 @@
 #!/usr/bin/env bash
 set -e
 
-mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="install-deps chromium"
+mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="install chromium --with-deps"
 
 ## Testing using quarkus snapshot + no real platform; just core. Will thus not find platform issues; but will
 ## find core vs code.quarkus issues.

.github/workflows/build.actions.yml

@@ -30,7 +30,7 @@ jobs:
           path: ~/.m2/repository
           key: ${{ runner.os }}-maven-${{ hashFiles('**/pom.xml') }}
       - name: Ensure browsers are installed
-        run: mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="install --with-deps"
+        run: mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="install chromium --with-deps"
       - name: Build
         run: |
           mvn -e -B -DskipTests=true clean package -Dlib -Dacceptance-test -Dcommunity-app

.github/workflows/release.actions.yml

@@ -65,7 +65,7 @@ jobs:
           git config --local user.name "GitHub Action"
 
       - name: Ensure browsers are installed
-        run: mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="install-deps chromium"
+        run: mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="install chromium --with-deps"
 
       - name: Maven release ${{steps.metadata.outputs.current-version}}
         if: steps.check_changes.outputs.skip == 'false'

base/src/main/resources/web/community-app/theme.scss

@@ -119,6 +119,8 @@
   --clearSelectedExtensionButtonBorderColor: var(--warningColor);
   --clearSelectedExtensionButtonTextColor: var(--mainContainerTextColor);
 
+  --extensionIconSvg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 512 512'%3E%3C!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath opacity='.4' d='M-2.9 271.5C-15.7 292.9-.3 320 24.5 320L128 320c14.2-67.4 34.3-119.7 58.1-160l-95 0c-16.9 0-32.5 8.8-41.2 23.3L-2.9 271.5zM192 384l0 103.5c0 24.9 27.1 40.2 48.5 27.4L328.7 462c14.5-8.7 23.3-24.3 23.3-41.2l0-95c-40.3 23.8-92.6 43.9-160 58.1z'/%3E%3Cpath d='M128 320c59.6-283.1 224-298.9 323.6-284.3 12.8 1.9 22.8 11.9 24.6 24.6 14.6 99.6-1.2 264-284.3 323.6 0-35.3-28.7-64-64-64zM400 160a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z'/%3E%3C/svg%3E");
+
   // Presets
   --presetsPanelBg: var(--extensionsPickerListBg);
   --presetsTitleTextColor: var(--mainContainerTextColor);

base/src/main/resources/web/lib/components/code-quarkus.scss

@@ -19,6 +19,14 @@ code {
   text-transform: var(--mainTitleTextTransform) !important;
 }
 
+.extension-icon {
+  background-image: var(--extensionIconSvg);
+  background-repeat: no-repeat;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+}
+
 .responsive-container {
   max-width: 1200px;
 

base/src/main/resources/web/lib/components/extensions-picker/presets-panel.tsx

@@ -1,7 +1,6 @@
 import styled from 'styled-components';
 import {TagEntry} from "./extensions-picker";
 import {Platform, Preset} from "../api/model";
-import {FaRocket} from 'react-icons/fa';
 
 import {useAnalytics} from "../../core/analytics";
 
@@ -24,8 +23,8 @@ const PresetsPanelDiv = styled.div`
         background-color: var(--presetsPanelBg);
         color: var(--presetsTitleTextColor);
         
-        svg {
-            margin-right: 5px;
+        .extension-icon {
+            margin-right: 3px;
         }
     }
 
@@ -89,7 +88,7 @@ export const PresetsPanel = (props: PresetsProps) => {
   };
   return (
     <PresetsPanelDiv className="presets-panel">
-      <div className="panel-title main-title"><FaRocket />&nbsp;Start with a preset of extensions</div>
+      <div className="panel-title main-title"><span className="extension-icon"></span>&nbsp;Start with a preset of extensions</div>
       <div className="presets-list">
         {presets.map(p => (
           <PresetCard key={p.key} preset={p} onClick={() => selectPreset(p)}/>

base/src/main/resources/web/lib/components/generate-project/extensions-cart.scss

@@ -6,17 +6,16 @@
     background-color: var(--extensionsCartButtonBgColor);
     color: var(--extensionsCartButtonTextColor);
     width: 50px;
-    text-align: center;
-    line-height: 40px;
     font-weight: bold;
     padding: 0;
     border: none;
     cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
-    svg {
+    .extension-icon {
       margin-right: 5px;
-      height: 40px;
-      vertical-align: top;
     }
   }
 

base/src/main/resources/web/lib/components/generate-project/extensions-cart.tsx

@@ -1,6 +1,5 @@
 import React, {useEffect, useState} from 'react';
 import './extensions-cart.scss';
-import {FaRocket} from 'react-icons/fa';
 import {Button, ButtonGroup, Dropdown} from 'react-bootstrap';
 import DropdownToggle from 'react-bootstrap/DropdownToggle';
 import {ExtensionEntry, TagEntry} from '../extensions-picker/extensions-picker';
@@ -50,7 +49,7 @@ export function ExtensionsCart(props: ExtensionsCartProps) {
               show={isOpen || openedFromChange} onMouseLeave={onMouseLeaveFn}>
       <DropdownToggle as={Button} aria-label="Selected extensions" className="extensions-cart-button"
                       onMouseEnter={onMouseEnterFn}>
-        <FaRocket/>
+        <span className="extension-icon"></span>
         {props.value.extensions.length}
       </DropdownToggle>
 

base/src/main/resources/web/lib/components/generate-project/generate-button.scss

@@ -23,7 +23,6 @@
       text-align: center;
       border: 2px solid var(--generateButtonBgColor);
       color: var(--generateButtonTextColor);
-      font-weight: bold;
 
       &:hover {
         border: 2px solid var(--generateButtonBorderColorOnHover);