Change filter button focus and fix issue (#1682)

Author: ia3andy

base/src/main/resources/web/lib/components/extensions-picker/extension-search-bar.scss

@@ -58,6 +58,11 @@
     gap: 5px;
     background-color: var(--extensionsPickerSearchBg);
 
+
+    @media screen and (max-width: $mobileWidth) {
+      margin: 0 10px;
+    }
+
     .search-icon {
       flex-basis: 40px;
       height: 100%;
@@ -100,6 +105,7 @@
     &:focus {
       outline: none;
     }
+
   }
 
   .filters-bar {
@@ -120,7 +126,7 @@
 
     .filters {
       display: flex;
-
+      gap: 3px;
 
       @media screen and (max-width: $mobileWidth) {
         display: none;
@@ -164,9 +170,10 @@
       text-transform: capitalize;
       margin: 0;
       padding: 0px 20px;
+      border: 1px solid transparent;
 
       &[aria-expanded="true"], &:hover {
-        background-color: var(--extensionsPickerSearchBorderColorOnFocus);
+        border-color: var(--extensionsPickerSearchBorderColorOnFocus);
       }
     }
 

base/src/main/resources/web/lib/components/extensions-picker/extension-search-bar.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {Button, Form, FormGroup} from 'react-bootstrap';
-import {FaSearch, FaTimes, FaCaretUp, FaCaretDown} from 'react-icons/fa';
+import {FaSearch, FaCaretUp, FaCaretDown} from 'react-icons/fa';
+import {FaRegCircleXmark} from 'react-icons/fa6';
 import {QuarkusProject} from '../api/model';
 import './extension-search-bar.scss';
 import {
@@ -114,7 +115,7 @@ export function ExtensionSearchBar(props: ExtensionSearchBarProps) {
           onChange={search}
         />
         {!isFilterEmpty(filter) &&
-            <Button as="a" className='clear-button' onClick={clearFilters} aria-label="Clear filters"><FaTimes/><span>Clear filters</span></Button>
+            <Button as="a" className='clear-button' onClick={clearFilters} aria-label="Clear filters"><FaRegCircleXmark/><span>Clear filters</span></Button>
         }
 
       </FormGroup>

base/src/main/resources/web/lib/components/extensions-picker/extensions-utils.ts

@@ -272,7 +272,7 @@ export function clearMetadataFilter(query: string, key: string) {
 }
 
 export function addExcludeMetadataFilter(query: string, key: string) {
-  return `!${key}` + query.replace(new RegExp(`${key}:\\S+`), '').trim();
+  return `!${key} ` + query.replace(new RegExp(`${key}:\\S+`), '').trim();
 }
 
 export function addStarMetadataFilter(query: string, key: string) {

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

@@ -65,7 +65,7 @@
       }
 
       @media screen and (max-width: $mobileWidth) {
-        margin-left: 20px;
+        margin-left: 10px;
         img {
           height: 20px;
         }

base/src/main/resources/web/lib/components/quarkus-project/quarkus-project-edition-form.scss

@@ -4,7 +4,7 @@
   padding-bottom: 30px;
 
   @media screen and (max-width: $mobileWidth) {
-    margin: 0 10px;
+    margin: 0;
   }
 
   .form-header-sticky-container {

base/src/test/resources/__snapshots__/QuarkusProjectServiceTest/test3__15/dir-tree.snapshot

@@ -2,8 +2,6 @@
 .gitignore
 .mvn/
 .mvn/wrapper/
-.mvn/wrapper/.gitignore
-.mvn/wrapper/MavenWrapperDownloader.java
 .mvn/wrapper/maven-wrapper.properties
 /
 README.md

pom.xml

@@ -17,7 +17,7 @@
 
         <quarkus.platform.artifact-id>quarkus-bom</quarkus.platform.artifact-id>
         <quarkus.platform.group-id>io.quarkus.platform</quarkus.platform.group-id>
-        <quarkus.platform.version>3.26.4</quarkus.platform.version>
+        <quarkus.platform.version>3.28.1</quarkus.platform.version>
 
         <skipITs>true</skipITs>
         <surefire-plugin.version>3.5.4</surefire-plugin.version>

web-deps/locker/pom.xml

@@ -957,7 +957,7 @@
       <dependency>
         <groupId>org.mvnpm</groupId>
         <artifactId>react-icons</artifactId>
-        <version>5.1.0</version>
+        <version>5.5.0</version>
       </dependency>
       <dependency>
         <groupId>org.mvnpm</groupId>

web-deps/pom.xml

@@ -77,7 +77,7 @@
         <dependency>
             <groupId>org.mvnpm</groupId>
             <artifactId>react-icons</artifactId>
-            <version>5.1.0</version>
+            <version>5.5.0</version>
         </dependency>
         <dependency>
             <groupId>org.mvnpm</groupId>