dwindown/WooNooW
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: Standardize dialog paddings across Admin SPA

Browse Source
This commit is contained in:
Dwindi Ramadhana
2026-02-28 20:40:34 +07:00
parent 6f23ccdda4
commit 7ff429502d
9 changed files with 104 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
admin-spa/src/components/ui/markdown-toolbar.tsx
View File

@@ -53,7 +53,7 @@ export function MarkdownToolbar({ onInsert }: MarkdownToolbarProps) {
const cardTemplate = selectedCardType === 'default'
? '[card]\n\n## Your heading here\n\nYour content here...\n\n[/card]'
: `[card:${selectedCardType}]\n\n## Your heading here\n\nYour content here...\n\n[/card]`;
onInsert(cardTemplate, '');
setShowCardDialog(false);
};
@@ -93,7 +93,7 @@ export function MarkdownToolbar({ onInsert }: MarkdownToolbarProps) {
Choose a card type to insert into your template
</DialogDescription>
</DialogHeader>
<div className="space-y-4 py-4">
<div className="space-y-4 px-6 py-4">
<div className="space-y-2">
<label className="text-sm font-medium">Card Type</label>
<Select value={selectedCardType} onValueChange={setSelectedCardType}>
@@ -140,7 +140,7 @@ export function MarkdownToolbar({ onInsert }: MarkdownToolbarProps) {
Choose a button style to insert
</DialogDescription>
</DialogHeader>
<div className="space-y-4 py-4">
<div className="space-y-4 px-6 py-4">
<div className="space-y-2">
<label className="text-sm font-medium">Button Style</label>
<Select value={buttonStyle} onValueChange={setButtonStyle}>
@@ -191,7 +191,7 @@ export function MarkdownToolbar({ onInsert }: MarkdownToolbarProps) {
Insert an image using standard Markdown syntax
</DialogDescription>
</DialogHeader>
<div className="space-y-4 py-4">
<div className="space-y-4 px-6 py-4">
<div className="text-sm text-muted-foreground">
<p>Syntax: <code className="px-1 py-0.5 bg-muted rounded">![Alt text](image-url)</code></p>
<p className="mt-2">Example: <code className="px-1 py-0.5 bg-muted rounded">![Logo](https://example.com/logo.png)</code></p>
@@ -220,7 +220,7 @@ export function MarkdownToolbar({ onInsert }: MarkdownToolbarProps) {
<tool.icon className="h-4 w-4" />
</Button>
))}
<div className="flex-1" />
<div className="flex items-center gap-2 text-xs text-muted-foreground">
<span className="hidden sm:inline">Quick formatting:</span>

2
admin-spa/src/routes/Appearance/Pages/components/CreatePageModal.tsx
View File

@@ -147,7 +147,7 @@ export function CreatePageModal({ open, onOpenChange, onCreated }: CreatePageMod
</DialogDescription>
</DialogHeader>
<div className="space-y-6 py-4 px-1">
<div className="space-y-6 px-6 py-4">
{/* Page Type Selection */}
<RadioGroup value={pageType} onValueChange={(v) => setPageType(v as 'page' | 'template')} className="grid grid-cols-2 gap-4">
<div

4
admin-spa/src/routes/Marketing/Campaigns/Edit.tsx
View File

@@ -327,7 +327,7 @@ export default function CampaignEdit() {
<DialogTitle>{__('Email Preview')}</DialogTitle>
<DialogDescription>{__('Preview how your email will look to subscribers')}</DialogDescription>
</DialogHeader>
<div className="border rounded-lg overflow-hidden bg-gray-100">
<div className="border rounded-lg overflow-hidden bg-gray-100 mx-6 mb-6">
<iframe
srcDoc={previewHtml}
className="w-full min-h-[600px] bg-white"
@@ -344,7 +344,7 @@ export default function CampaignEdit() {
<DialogTitle>{__('Send Test Email')}</DialogTitle>
<DialogDescription>{__('Send a test email to verify your campaign before sending to all subscribers')}</DialogDescription>
</DialogHeader>
<div className="space-y-4 p-4">
<div className="space-y-4 px-6 py-4">
<div className="space-y-2">
<Label htmlFor="test-email">{__('Email Address')}</Label>
<Input

8
admin-spa/src/routes/Products/Attributes.tsx
View File

@@ -25,9 +25,9 @@ export default function ProductAttributes() {
const [search, setSearch] = useState('');
const [dialogOpen, setDialogOpen] = useState(false);
const [editingAttribute, setEditingAttribute] = useState<Attribute | null>(null);
const [formData, setFormData] = useState({
name: '',
label: '',
const [formData, setFormData] = useState({
name: '',
label: '',
type: 'select',
orderby: 'menu_order',
public: 1
@@ -205,7 +205,7 @@ export default function ProductAttributes() {
{editingAttribute ? __('Update attribute information') : __('Create a new product attribute')}
</DialogDescription>
</DialogHeader>
<form onSubmit={handleSubmit} className="space-y-4">
<form onSubmit={handleSubmit} className="space-y-4 px-6 py-4">
<div>
<Label htmlFor="label">{__('Label')}</Label>
<Input

2
admin-spa/src/routes/Products/Categories.tsx
View File

@@ -198,7 +198,7 @@ export default function ProductCategories() {
{editingCategory ? __('Update category information') : __('Create a new product category')}
</DialogDescription>
</DialogHeader>
<form onSubmit={handleSubmit} className="space-y-4">
<form onSubmit={handleSubmit} className="space-y-4 px-6 py-4">
<div>
<Label htmlFor="name">{__('Name')}</Label>
<Input

2
admin-spa/src/routes/Products/SoftwareVersions/index.tsx
View File

@@ -239,7 +239,7 @@ export default function SoftwareVersions() {
{__('Release a new version of')} {selectedProductData?.name}
</DialogDescription>
</DialogHeader>
<div className="space-y-4 py-4">
<div className="space-y-4 px-6 py-4">
<div className="space-y-2">
<Label htmlFor="version">{__('Version Number')}</Label>
<Input

2
admin-spa/src/routes/Products/Tags.tsx
View File

@@ -196,7 +196,7 @@ export default function ProductTags() {
{editingTag ? __('Update tag information') : __('Create a new product tag')}
</DialogDescription>
</DialogHeader>
<form onSubmit={handleSubmit} className="space-y-4">
<form onSubmit={handleSubmit} className="space-y-4 px-6 py-4">
<div>
<Label htmlFor="name">{__('Name')}</Label>
<Input

174
admin-spa/src/routes/Settings/Notifications/ChannelConfig.tsx
View File

@@ -36,7 +36,7 @@ export default function ChannelConfig({ open, onClose, channelId, channelLabel }
</DialogDescription>
</DialogHeader>
<div className="space-y-4 py-4">
<div className="space-y-4 px-6 py-4 mb-4">
<p className="text-sm text-muted-foreground">
{__(
'Email notifications are powered by WooCommerce. You can configure SMTP settings, email templates, and sender information in the WooCommerce settings.'
@@ -128,112 +128,112 @@ export default function ChannelConfig({ open, onClose, channelId, channelLabel }
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
</div>
) : (
<div className="space-y-6 py-4">
{/* Branding */}
<div className="space-y-3">
<Label>{__('Notification Branding')}</Label>
<div className="space-y-6 px-6 py-4">
{/* Branding */}
<div className="space-y-3">
<div className="flex items-center justify-between">
<div className="space-y-0.5">
<Label htmlFor="use-logo">{__('Use Store Logo')}</Label>
<p className="text-xs text-muted-foreground">
{__('Display your store logo in push notifications')}
</p>
<Label>{__('Notification Branding')}</Label>
<div className="space-y-3">
<div className="flex items-center justify-between">
<div className="space-y-0.5">
<Label htmlFor="use-logo">{__('Use Store Logo')}</Label>
<p className="text-xs text-muted-foreground">
{__('Display your store logo in push notifications')}
</p>
</div>
<Switch
id="use-logo"
checked={settings.use_logo}
onCheckedChange={(checked) => setSettings({ ...settings, use_logo: checked })}
/>
</div>
<Switch
id="use-logo"
checked={settings.use_logo}
onCheckedChange={(checked) => setSettings({...settings, use_logo: checked})}
/>
</div>
<div className="flex items-center justify-between">
<div className="space-y-0.5">
<Label htmlFor="use-product-image">{__('Use Product Images')}</Label>
<p className="text-xs text-muted-foreground">
{__('Show product images in order notifications')}
</p>
<div className="flex items-center justify-between">
<div className="space-y-0.5">
<Label htmlFor="use-product-image">{__('Use Product Images')}</Label>
<p className="text-xs text-muted-foreground">
{__('Show product images in order notifications')}
</p>
</div>
<Switch
id="use-product-image"
checked={settings.use_product_images}
onCheckedChange={(checked) => setSettings({ ...settings, use_product_images: checked })}
/>
</div>
<Switch
id="use-product-image"
checked={settings.use_product_images}
onCheckedChange={(checked) => setSettings({...settings, use_product_images: checked})}
/>
</div>
<div className="flex items-center justify-between">
<div className="space-y-0.5">
<Label htmlFor="use-gravatar">{__('Use Customer Gravatar')}</Label>
<p className="text-xs text-muted-foreground">
{__('Display customer avatar when available')}
</p>
<div className="flex items-center justify-between">
<div className="space-y-0.5">
<Label htmlFor="use-gravatar">{__('Use Customer Gravatar')}</Label>
<p className="text-xs text-muted-foreground">
{__('Display customer avatar when available')}
</p>
</div>
<Switch
id="use-gravatar"
checked={settings.use_gravatar}
onCheckedChange={(checked) => setSettings({ ...settings, use_gravatar: checked })}
/>
</div>
<Switch
id="use-gravatar"
checked={settings.use_gravatar}
onCheckedChange={(checked) => setSettings({...settings, use_gravatar: checked})}
/>
</div>
</div>
</div>
{/* Behavior */}
<div className="space-y-3">
<Label>{__('Notification Behavior')}</Label>
{/* Behavior */}
<div className="space-y-3">
<div className="space-y-2">
<Label htmlFor="click-action">{__('Click Action URL')}</Label>
<Input
id="click-action"
placeholder={__('https://yourstore.com/orders')}
value={settings.click_action}
onChange={(e) => setSettings({...settings, click_action: e.target.value})}
/>
<p className="text-xs text-muted-foreground">
{__('Where users are redirected when clicking the notification')}
</p>
</div>
<div className="flex items-center justify-between">
<div className="space-y-0.5">
<Label htmlFor="require-interaction">{__('Require Interaction')}</Label>
<Label>{__('Notification Behavior')}</Label>
<div className="space-y-3">
<div className="space-y-2">
<Label htmlFor="click-action">{__('Click Action URL')}</Label>
<Input
id="click-action"
placeholder={__('https://yourstore.com/orders')}
value={settings.click_action}
onChange={(e) => setSettings({ ...settings, click_action: e.target.value })}
/>
<p className="text-xs text-muted-foreground">
{__('Notification stays until user dismisses it')}
{__('Where users are redirected when clicking the notification')}
</p>
</div>
<Switch
id="require-interaction"
checked={settings.require_interaction}
onCheckedChange={(checked) => setSettings({...settings, require_interaction: checked})}
/>
</div>
<div className="flex items-center justify-between">
<div className="space-y-0.5">
<Label htmlFor="silent">{__('Silent Notifications')}</Label>
<p className="text-xs text-muted-foreground">
{__('Disable notification sound')}
</p>
<div className="flex items-center justify-between">
<div className="space-y-0.5">
<Label htmlFor="require-interaction">{__('Require Interaction')}</Label>
<p className="text-xs text-muted-foreground">
{__('Notification stays until user dismisses it')}
</p>
</div>
<Switch
id="require-interaction"
checked={settings.require_interaction}
onCheckedChange={(checked) => setSettings({ ...settings, require_interaction: checked })}
/>
</div>
<div className="flex items-center justify-between">
<div className="space-y-0.5">
<Label htmlFor="silent">{__('Silent Notifications')}</Label>
<p className="text-xs text-muted-foreground">
{__('Disable notification sound')}
</p>
</div>
<Switch
id="silent"
checked={settings.silent}
onCheckedChange={(checked) => setSettings({ ...settings, silent: checked })}
/>
</div>
<Switch
id="silent"
checked={settings.silent}
onCheckedChange={(checked) => setSettings({...settings, silent: checked})}
/>
</div>
</div>
</div>
<div className="bg-muted/50 rounded-lg p-4">
<p className="text-xs text-muted-foreground">
💡 {__('Note: These settings will be saved and applied to all push notifications. Individual templates can override the icon and image.')}
</p>
</div>
<div className="bg-muted/50 rounded-lg p-4">
<p className="text-xs text-muted-foreground">
💡 {__('Note: These settings will be saved and applied to all push notifications. Individual templates can override the icon and image.')}
</p>
</div>
</div>
)
}
<div className="flex justify-end gap-2">
<div className="flex justify-end gap-2 px-6 pb-4">
<Button variant="outline" onClick={onClose} disabled={saveMutation.isPending}>
{__('Cancel')}
</Button>
@@ -264,13 +264,13 @@ export default function ChannelConfig({ open, onClose, channelId, channelLabel }
</DialogDescription>
</DialogHeader>
<div className="space-y-4 py-4">
<div className="space-y-4 px-6 py-4">
<p className="text-sm text-muted-foreground">
{__('Configuration for this channel is provided by the addon.')}
</p>
</div>
<div className="flex justify-end">
<div className="flex justify-end px-6 pb-4">
<Button variant="outline" onClick={onClose}>
{__('Close')}
</Button>

4
admin-spa/src/routes/Settings/Tax.tsx
View File

@@ -136,7 +136,7 @@ export default function TaxSettings() {
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const formData = new FormData(e.currentTarget);
const data = {
country: formData.get('country') as string,
state: formData.get('state') as string || '',
@@ -409,7 +409,7 @@ export default function TaxSettings() {
</DialogTitle>
</DialogHeader>
<form onSubmit={handleSubmit}>
<div className="space-y-4 py-4">
<div className="space-y-4 px-6 py-4">
<div>
<Label>{__('Country')}</Label>
<Input