fix(ui): improve dashboard widget edit controls

packages/ui/src/elements/Button/index.css

@@ -56,11 +56,11 @@
     border: var(--stroke-width-small) solid var(--special-border-translucent);
 
     &:hover:not(.btn--disabled) {
-      background-color: var(--color-bg-transparent-hover);
+      background-color: var(--color-bg-secondary-hover);
     }
 
     &:active:not(.btn--disabled) {
-      background-color: var(--color-bg-transparent-pressed);
+      background-color: var(--color-bg-secondary-pressed);
     }
 
     &.btn--disabled {

packages/ui/src/elements/QueryPresets/QueryPresetBar/index.tsx

@@ -335,7 +335,7 @@ export const QueryPresetBar: React.FC<{
                     )}
                     {queryPresetPermissions?.update && (
                       <PopupList.Button
-                        icon={<EditIcon size={16} />}
+                        icon={<EditIcon />}
                         id="edit-preset"
                         onClick={() => {
                           close()

packages/ui/src/icons/Edit/index.tsx

@@ -3,14 +3,14 @@ import React from 'react'
 import './index.css'
 
 const paths = {
+  // icon-16-edit-object from Figma
   16: 'M9.86914 2.72438C10.2619 2.40402 10.8409 2.42662 11.207 2.79273L13.207 4.79273C13.5974 5.18327 13.5975 5.81631 13.207 6.2068L6.70703 12.7068C6.51951 12.8943 6.26516 12.9998 6 12.9998H4C3.44779 12.9998 3.00013 12.5519 3 11.9998V9.99977C3 9.7346 3.10551 9.48026 3.29297 9.29273L9.79297 2.79273L9.86914 2.72438ZM4 9.99977V11.9998H6L10.6465 7.35328L8.64648 5.35328L4 9.99977ZM9.35352 4.64625L11.3535 6.64625L12.5 5.49977L10.5 3.49977L9.35352 4.64625Z',
-  24: 'M5.514 6.664a1 1 0 0 1 1.15-1.15l2.684.447a2 2 0 0 1 1.086.559l7.42 7.42a1.5 1.5 0 0 1 0 2.12l-1.793 1.794a1.5 1.5 0 0 1-2.122 0l-7.42-7.42a2 2 0 0 1-.558-1.086zm9.883 6.233-5.67-5.67a1 1 0 0 0-.543-.28l-1.641-.273L6.5 6.5l.174 1.043.273 1.64a1 1 0 0 0 .28.544l5.67 5.67zm.707.707-2.5 2.5 1.043 1.043a.5.5 0 0 0 .707 0l1.793-1.793a.5.5 0 0 0 0-.707z',
 }
 
+const size = 16
 export const EditIcon: React.FC<{
   readonly className?: string
-  readonly size?: 16 | 24
-}> = ({ className, size = 16 }) => (
+}> = ({ className }) => (
   <svg
     className={['icon', 'icon--edit', className].filter(Boolean).join(' ')}
     fill="none"

packages/ui/src/views/Dashboard/Default/ModularDashboard/WidgetEditControl.tsx

@@ -4,6 +4,7 @@ import type { Data } from 'payload'
 
 import React, { useId } from 'react'
 
+import { Button } from '../../../../elements/Button/index.js'
 import { useModal } from '../../../../elements/Modal/index.js'
 import { EditIcon } from '../../../../icons/Edit/index.js'
 import { useConfig } from '../../../../providers/Config/index.js'
@@ -39,18 +40,16 @@ export function WidgetEditControl({
 
   return (
     <>
-      <button
+      <Button
+        aria-label={`${t('general:edit')} ${widgetID}`}
+        buttonStyle="secondary"
         className="widget-wrapper__edit-btn"
+        icon={<EditIcon />}
+        margin={false}
         onClick={() => {
           openModal(drawerSlug)
         }}
-        type="button"
-      >
-        <span className="sr-only">
-          {t('general:edit')} {widgetID}
-        </span>
-        <EditIcon />
-      </button>
+      />
       <WidgetConfigDrawer
         drawerSlug={drawerSlug}
         onSave={onSave}

packages/ui/src/views/Dashboard/Default/ModularDashboard/index.client.tsx

@@ -5,12 +5,12 @@ import type { ClientWidget, WidgetWidth } from 'payload'
 
 import { DndContext, DragOverlay, useDraggable, useDroppable } from '@dnd-kit/core'
 import { snapCenterToCursor } from '@dnd-kit/modifiers'
-import React, { useMemo, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 
+import { Button } from '../../../../elements/Button/index.js'
 import { Popup } from '../../../../elements/Popup/index.js'
 import * as PopupList from '../../../../elements/Popup/PopupButtonList/index.js'
 import { ChevronIcon } from '../../../../icons/Chevron/index.js'
-import { XIcon } from '../../../../icons/X/index.js'
 import { useTranslation } from '../../../../providers/Translation/index.js'
 import { DashboardStepNav } from './DashboardStepNav.js'
 import { useDashboardLayout } from './useDashboardLayout.js'
@@ -86,8 +86,15 @@ export function ModularDashboardClient({
   } = useDashboardLayout(initialLayout)
 
   const [activeDragId, setActiveDragId] = useState<null | string>(null)
+  const [activeControlsWidgetID, setActiveControlsWidgetID] = useState<null | string>(null)
   const sensors = useDashboardSensors()
 
+  useEffect(() => {
+    if (!isEditing) {
+      setActiveControlsWidgetID(null)
+    }
+  }, [isEditing])
+
   return (
     <div>
       <DndContext
@@ -160,10 +167,21 @@ export function ModularDashboardClient({
                 }}
                 width={widget.item.width}
               >
-                <div className={`widget-wrapper ${isEditing ? 'widget-wrapper--editing' : ''}`}>
+                <div
+                  className={[
+                    'widget-wrapper',
+                    isEditing ? 'widget-wrapper--editing' : '',
+                    activeControlsWidgetID === widget.item.id
+                      ? 'widget-wrapper--controls-active'
+                      : '',
+                  ]
+                    .filter(Boolean)
+                    .join(' ')}
+                >
                   <div aria-hidden={isEditing} className="widget-content" inert={isEditing}>
                     {widget.component}
                   </div>
+                  {isEditing && <div aria-hidden className="widget-wrapper__edit-overlay" />}
                   {isEditing && (
                     <div
                       className="widget-wrapper__controls"
@@ -180,18 +198,20 @@ export function ModularDashboardClient({
                         currentWidth={widget.item.width}
                         maxWidth={widget.item.maxWidth}
                         minWidth={widget.item.minWidth}
+                        onOpenChange={(isOpen) => {
+                          setActiveControlsWidgetID(isOpen ? widget.item.id : null)
+                        }}
                         onResize={(width) => resizeWidget(widget.item.id, width)}
                       />
-                      <button
+                      <Button
+                        aria-label={t('dashboard:deleteWidget', { id: widget.item.id })}
+                        buttonStyle="destructive"
                         className="widget-wrapper__delete-btn"
+                        icon="x"
+                        margin={false}
                         onClick={() => deleteWidget(widget.item.id)}
-                        type="button"
-                      >
-                        <span className="sr-only">
-                          {t('dashboard:deleteWidget', { id: widget.item.id })}
-                        </span>
-                        <XIcon />
-                      </button>
+                        round
+                      />
                     </div>
                   )}
                 </div>
@@ -247,11 +267,13 @@ function WidgetWidthDropdown({
   currentWidth,
   maxWidth,
   minWidth,
+  onOpenChange,
   onResize,
 }: {
   currentWidth: WidgetWidth
   maxWidth: WidgetWidth
   minWidth: WidgetWidth
+  onOpenChange: (isOpen: boolean) => void
   onResize: (width: WidgetWidth) => void
 }) {
   // Filter options based on minWidth and maxWidth
@@ -275,17 +297,8 @@ function WidgetWidthDropdown({
 
   return (
     <Popup
-      button={
-        <button
-          className="widget-wrapper__size-btn"
-          onPointerDown={(e) => e.stopPropagation()}
-          type="button"
-        >
-          <span className="widget-wrapper__size-btn-text">{currentWidth}</span>
-          <ChevronIcon className="widget-wrapper__size-btn-icon" />
-        </button>
-      }
-      buttonType="custom"
+      onToggleClose={() => onOpenChange(false)}
+      onToggleOpen={onOpenChange}
       render={({ close }) => (
         <PopupList.ButtonGroup>
           {validOptions.map((option) => {
@@ -308,6 +321,23 @@ function WidgetWidthDropdown({
           })}
         </PopupList.ButtonGroup>
       )}
+      renderButton={({ active: _active, onClick, onKeyDown, ...ariaProps }) => (
+        <Button
+          buttonStyle="secondary"
+          className="widget-wrapper__size-btn"
+          extraButtonProps={{
+            onKeyDown,
+            onPointerDown: (e) => e.stopPropagation(),
+            ...ariaProps,
+          }}
+          icon={<ChevronIcon className="widget-wrapper__size-btn-icon" size={16} />}
+          margin={false}
+          onClick={onClick}
+          selected={_active}
+        >
+          {currentWidth}
+        </Button>
+      )}
       size="small"
       verticalAlign="bottom"
     />
@@ -372,7 +402,7 @@ function DroppableItem({ id, position }: { id: string; position: 'after' | 'befo
         bottom: 0,
         borderRadius: '1000px',
         width: '4px',
-        backgroundColor: isOver ? 'var(--color-bg-success)' : 'transparent',
+        backgroundColor: isOver ? 'var(--color-bg-brand-secondary)' : 'transparent',
         marginBottom: '10px',
         marginTop: '10px',
         pointerEvents: 'none',