From 923695ffdeeba5abea307e870f17596bb1e1f4fb Mon Sep 17 00:00:00 2001
From: Kelly Yang <124ykl@gmail.com>
Date: Thu, 27 Nov 2025 14:43:55 -0800
Subject: [PATCH] fix(ui): update button style for mask editor (#6991)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Updated the styling of the `resetToDefault` button to match the visual
design and UX behavior (hover states, dimensions) of other buttons in
the `TopBarHeader`

## Changes

Applied the standard top bar button CSS classes to the resetToDefault
button to ensure visual consistency. @jtydhr88


## Review Focus

Please verify that the button alignment and hover effects now match the
adjacent UI elements.

## Screenshots
<img width="2746" height="2300" alt="ScreenShot_2025-11-27_010713_634"
src="https://github.com/user-attachments/assets/758e108f-7c38-4b51-a236-fee2e049186e"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6991-fix-ui-update-button-style-for-mask-editor-2b86d73d3650813ea3cbd28203239cd8)
by [Unito](https://www.unito.io)
---
 src/components/maskeditor/BrushSettingsPanel.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/maskeditor/BrushSettingsPanel.vue b/src/components/maskeditor/BrushSettingsPanel.vue
index a43707ac1..444dc8ceb 100644
--- a/src/components/maskeditor/BrushSettingsPanel.vue
+++ b/src/components/maskeditor/BrushSettingsPanel.vue
@@ -6,10 +6,7 @@
       {{ t('maskEditor.brushSettings') }}
     </h3>
 
-    <button
-      class="w-45 h-7.5 border-none bg-black/20 border border-[var(--border-color)] text-[var(--input-text)] font-sans text-[15px] pointer-events-auto transition-colors duration-100 hover:bg-[var(--p-overlaybadge-outline-color)] hover:border-none"
-      @click="resetToDefault"
-    >
+    <button :class="textButtonClass" @click="resetToDefault">
       {{ t('maskEditor.resetToDefault') }}
     </button>
 
@@ -99,6 +96,9 @@ import SliderControl from './controls/SliderControl.vue'
 
 const store = useMaskEditorStore()
 
+const textButtonClass =
+  'h-7.5 w-32 rounded-[10px] border border-[var(--p-form-field-border-color)] text-[var(--input-text)] font-sans pointer-events-auto transition-colors duration-100 bg-[var(--comfy-menu-bg)] hover:bg-secondary-background-hover'
+
 const setBrushShape = (shape: BrushShape) => {
   store.brushSettings.type = shape
 }