From 84deec4e5a96a40519c4503669c91c509ff05b29 Mon Sep 17 00:00:00 2001
From: Rebeka Dekany <50901361+rebekadekany@users.noreply.github.com>
Date: Mon, 20 Jan 2025 19:03:10 +0100
Subject: [PATCH] Merge pull request #22993 from
 overleaf/rd-searchbar-button-fix-migration

[web] Fix close button alignment of search bar

GitOrigin-RevId: ef6761f6f068090d8cbf7e8922b257bd499ee5c3
---
 .../features/project-list/components/search-form.tsx |  2 +-
 .../stories/ui/form/form-input-bs5.stories.tsx       |  8 ++++----
 .../web/frontend/stylesheets/app/project-list.less   | 12 ------------
 .../stylesheets/bootstrap-5/abstracts/mixins.scss    |  8 +++-----
 .../stylesheets/bootstrap-5/components/form.scss     |  7 +++++++
 .../stylesheets/bootstrap-5/pages/project-list.scss  |  4 ----
 6 files changed, 15 insertions(+), 26 deletions(-)

diff --git a/services/web/frontend/js/features/project-list/components/search-form.tsx b/services/web/frontend/js/features/project-list/components/search-form.tsx
index b71ea63bf0..9f64cdb0c9 100644
--- a/services/web/frontend/js/features/project-list/components/search-form.tsx
+++ b/services/web/frontend/js/features/project-list/components/search-form.tsx
@@ -91,7 +91,7 @@ function SearchForm({
               inputValue.length > 0 && (
                 <button
                   type="button"
-                  className="project-search-clear-btn"
+                  className="form-control-search-clear-btn"
                   aria-label={t('clear_search')}
                   onClick={handleClear}
                 >
diff --git a/services/web/frontend/stories/ui/form/form-input-bs5.stories.tsx b/services/web/frontend/stories/ui/form/form-input-bs5.stories.tsx
index b0c4ef8dea..82b9125fcd 100644
--- a/services/web/frontend/stories/ui/form/form-input-bs5.stories.tsx
+++ b/services/web/frontend/stories/ui/form/form-input-bs5.stories.tsx
@@ -226,7 +226,7 @@ export const WithIcons: Story = {
             append={
               <button
                 type="button"
-                className="project-search-clear-btn"
+                className="form-control-search-clear-btn"
                 onClick={handleClear}
               >
                 <MaterialIcon type="clear" />
@@ -246,7 +246,7 @@ export const WithIcons: Story = {
             append={
               <button
                 type="button"
-                className="project-search-clear-btn"
+                className="form-control-search-clear-btn"
                 onClick={handleClear}
               >
                 <MaterialIcon type="clear" />
@@ -265,7 +265,7 @@ export const WithIcons: Story = {
             append={
               <button
                 type="button"
-                className="project-search-clear-btn"
+                className="form-control-search-clear-btn"
                 onClick={handleClear}
               >
                 <MaterialIcon type="clear" />
@@ -286,7 +286,7 @@ export const WithIcons: Story = {
             append={
               <button
                 type="button"
-                className="project-search-clear-btn"
+                className="form-control-search-clear-btn"
                 onClick={handleClear}
                 disabled
               >
diff --git a/services/web/frontend/stylesheets/app/project-list.less b/services/web/frontend/stylesheets/app/project-list.less
index 32507e3dbc..ec7370e5c8 100644
--- a/services/web/frontend/stylesheets/app/project-list.less
+++ b/services/web/frontend/stylesheets/app/project-list.less
@@ -390,18 +390,6 @@ form.project-search {
   }
 }
 
-.project-search-clear-btn {
-  width: 100%;
-  padding: 0;
-  border: 0;
-  color: @ol-type-color;
-
-  &:hover,
-  &:active {
-    color: @ol-type-color;
-  }
-}
-
 ul.structured-list {
   list-style-type: none;
   margin: 0;
diff --git a/services/web/frontend/stylesheets/bootstrap-5/abstracts/mixins.scss b/services/web/frontend/stylesheets/bootstrap-5/abstracts/mixins.scss
index 66b58a9a0b..b35dec6212 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/abstracts/mixins.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/abstracts/mixins.scss
@@ -61,13 +61,11 @@
 }
 
 @mixin reset-button() {
-  appearance: none;
+  padding: 0;
+  cursor: pointer;
   background: transparent;
   border: 0;
-  cursor: pointer;
-  height: 20px;
-  padding: 0;
-  width: 20px;
+  appearance: none;
 }
 
 @mixin modal-lg {
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/form.scss b/services/web/frontend/stylesheets/bootstrap-5/components/form.scss
index b4897bad1c..c777258235 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/form.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/form.scss
@@ -157,6 +157,13 @@
   .form-control-end-icon {
     right: 0;
     padding-right: calc(var(--form-control-padding-x) + var(--bs-border-width));
+
+    .form-control-search-clear-btn {
+      @include reset-button;
+
+      display: flex;
+      justify-content: center;
+    }
   }
 
   --icon-width: 20px;
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/project-list.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/project-list.scss
index c71ab65be6..c7a8cad1dc 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/project-list.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/project-list.scss
@@ -673,10 +673,6 @@ form.project-search {
   }
 }
 
-.project-search-clear-btn {
-  @include reset-button;
-}
-
 .add-affiliation-mobile-wrapper {
   padding: var(--spacing-07) 0;
 }