refactor(webui): use central mailbox icon action

webui/src/features/mail/MailboxPage.tsx

@@ -5,6 +5,7 @@ import {
   DataGridPaginationBar,
   DismissibleAlert,
   ExplorerTree,
+  IconButton,
   LoadingIndicator,
   MessageDisplayPanel,
   formatDateTime,
@@ -416,7 +417,7 @@ export default function MailboxPage({ settings }: {settings: ApiSettings;}) {
               <label className="mailbox-search-field">
                 <Search size={15} aria-hidden="true" />
                 <input value={messageQuery} onChange={(event) => setMessageQuery(event.target.value)} placeholder="i18n:govoplan-mail.search_messages.abea65ae" />
-                {messageQuery && <button type="button" onClick={() => setMessageQuery("")} aria-label="i18n:govoplan-mail.clear_message_search.cc9f2800"><X size={14} /></button>}
+                {messageQuery && <IconButton label="i18n:govoplan-mail.clear_message_search.cc9f2800" icon={<X />} variant="ghost" onClick={() => setMessageQuery("")} />}
               </label>
             </div>
 

webui/src/styles/mail-profiles.css

@@ -559,25 +559,6 @@
   padding: 6px 0;
 }
 
-.mailbox-search-field button {
-  display: inline-grid;
-  place-items: center;
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  border: 0;
-  border-radius: var(--radius-xs, 5px);
-  background: transparent;
-  color: var(--muted);
-  cursor: pointer;
-}
-
-.mailbox-search-field button:hover,
-.mailbox-search-field button:focus-visible {
-  background: var(--surface-subtle);
-  color: var(--text-strong);
-}
-
 .mailbox-error-state {
   color: var(--danger-text);
 }