style(editor): use the original dialog, material and field classes

Author: dnlblasco

resources/js/components/Modal.tsx

@@ -4,15 +4,16 @@ interface ModalProps {
     title: string;
     children: ReactNode;
     footer?: ReactNode;
-    wide?: boolean;
+    /** Extra class the original gave each dialog, which carries its width. */
+    variant?: string;
     onClose: () => void;
 }
 
 /**
  * The editor's dialog shell. Escape and a click on the backdrop close it, the
  * way every dialog in the legacy editor behaved.
  */
-export function Modal({ title, children, footer, wide, onClose }: ModalProps) {
+export function Modal({ title, children, footer, variant, onClose }: ModalProps) {
     useEffect(() => {
         const escape = (event: KeyboardEvent): void => {
             if (event.key === 'Escape') {
@@ -31,7 +32,7 @@ export function Modal({ title, children, footer, wide, onClose }: ModalProps) {
             role="presentation"
             onClick={event => event.target === event.currentTarget && onClose()}
         >
-            <div className="modal" role="dialog" aria-modal="true" aria-label={title} style={wide ? { minWidth: '640px' } : undefined}>
+            <div className={`modal${variant === undefined ? '' : ` ${variant}`}`} role="dialog" aria-modal="true" aria-label={title}>
                 <div className="modal-header">{title}</div>
                 <div className="modal-body">{children}</div>
                 {footer !== undefined && <div className="modal-footer">{footer}</div>}

resources/js/components/visual/ActionEditor.tsx

@@ -118,6 +118,7 @@ function ActionDialog({
     return (
         <Modal
             title="Action"
+            variant="action-editor-modal"
             onClose={onClose}
             footer={
                 <>

resources/js/components/visual/ConditionEditor.tsx

@@ -168,6 +168,7 @@ function ConditionDialog({
     return (
         <Modal
             title="Condition"
+            variant="condition-editor-modal"
             onClose={onClose}
             footer={
                 <>

resources/js/components/visual/ItemEditor.tsx

@@ -19,9 +19,9 @@ interface ItemEditorProps {
 export function ItemEditor({ slot, item, serverVersion, onChange, onRemove }: ItemEditorProps) {
     if (item === undefined) {
         return (
-            <p className="item-editor-content">
+            <div className="item-editor-notice">
                 Slot {slot} is empty. Drop a material on it, or pick one from the palette.
-            </p>
+            </div>
         );
     }
 
@@ -51,7 +51,7 @@ export function ItemEditor({ slot, item, serverVersion, onChange, onRemove }: It
 
                 <div className="item-editor-section">
                     <div className="editor-field">
-                        <span>Material</span>
+                        <span className="item-label">Material</span>
                         <MaterialSelector
                             material={item.material}
                             serverVersion={serverVersion}
@@ -60,9 +60,10 @@ export function ItemEditor({ slot, item, serverVersion, onChange, onRemove }: It
                     </div>
 
                     <div className="editor-field">
-                        <label htmlFor="item-amount">Amount</label>
+                        <label className="item-label" htmlFor="item-amount">Amount</label>
                         <input
                             id="item-amount"
+                            className="item-input"
                             type="number"
                             min={1}
                             max={64}
@@ -73,9 +74,10 @@ export function ItemEditor({ slot, item, serverVersion, onChange, onRemove }: It
 
                     {item.material === 'PLAYER_HEAD' && (
                         <div className="editor-field">
-                            <label htmlFor="item-head">Head texture</label>
+                            <label className="item-label" htmlFor="item-head">Head texture</label>
                             <input
                                 id="item-head"
+                                className="item-input"
                                 value={typeof item.value === 'string' ? item.value : ''}
                                 onChange={event => update({ value: event.target.value })}
                             />
@@ -86,7 +88,7 @@ export function ItemEditor({ slot, item, serverVersion, onChange, onRemove }: It
 
                 <div className="item-editor-section">
                     <div className="editor-field">
-                        <label htmlFor="item-name">Name</label>
+                        <span className="item-label">Name</span>
                         <FormattedInput
                             ariaLabel="Item name"
                             value={typeof item.name === 'string' ? item.name : ''}
@@ -95,7 +97,7 @@ export function ItemEditor({ slot, item, serverVersion, onChange, onRemove }: It
                     </div>
 
                     <div className="editor-field">
-                        <label htmlFor="item-lore">Lore</label>
+                        <span className="item-label">Lore</span>
                         <FormattedInput
                             ariaLabel="Item lore"
                             multiline

resources/js/components/visual/ItemIcon.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { getMaterialEmoji, getMaterialImageUrl } from '../../editor/materials';
 import { getPlayerHeadImageUrl } from '../../editor/heads';
 
-type IconVariant = 'canvas' | 'palette';
+type IconVariant = 'canvas' | 'palette' | 'material-list';
 
 interface ItemIconProps {
     item: { material: string; value?: unknown };
@@ -13,6 +13,7 @@ interface ItemIconProps {
 const CLASSES: Record<IconVariant, { image: string; fallback: string }> = {
     canvas: { image: 'item-icon-image', fallback: 'item-icon-fallback' },
     palette: { image: 'palette-item-image', fallback: 'palette-item-fallback' },
+    'material-list': { image: 'material-list-image', fallback: 'material-list-fallback' },
 };
 
 /**

resources/js/components/visual/MaterialSelector.tsx

@@ -19,7 +19,7 @@ export function MaterialSelector({ material, serverVersion, onChange }: Material
         <>
             <button type="button" className="material-selector-btn" onClick={() => setOpen(true)}>
                 <span className="material-preview-inline">
-                    <ItemIcon item={{ material }} serverVersion={serverVersion} variant="palette" />
+                    <ItemIcon item={{ material }} serverVersion={serverVersion} variant="material-list" />
                     <span className="material-list-name">{formatMaterialName(material)}</span>
                 </span>
                 <span className="material-change-icon">Change</span>
@@ -61,7 +61,7 @@ function MaterialModal({
     return (
         <Modal
             title="Choose a material"
-            wide
+            variant="material-selector-modal"
             onClose={onClose}
             footer={
                 <button type="button" className="btn btn-secondary" onClick={onClose}>
@@ -90,7 +90,7 @@ function MaterialModal({
                         onKeyDown={event => event.key === 'Enter' && onPick(name)}
                         title={name}
                     >
-                        <ItemIcon item={{ material: name }} serverVersion={serverVersion} variant="palette" />
+                        <ItemIcon item={{ material: name }} serverVersion={serverVersion} variant="material-list" />
                         <span className="material-list-name">{formatMaterialName(name)}</span>
                     </div>
                 ))}

resources/js/components/visual/SlotContextMenu.tsx

@@ -62,6 +62,7 @@ export function SlotContextMenu({
         >
             {hasItem && <Entry label="Copy" shortcut="Ctrl+C" onClick={onCopy} />}
             {canPaste && <Entry label={hasItem ? 'Paste (replace)' : 'Paste'} shortcut="Ctrl+V" onClick={onPaste} />}
+            {hasItem && <div className="context-menu-divider" />}
             {hasItem && <Entry label="Delete" shortcut="Del" onClick={onDelete} tone="danger" />}
         </div>
     );