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

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

@@ -93,7 +93,7 @@ export function MarkdownToolbar({ onInsert }: MarkdownToolbarProps) {
Choose a card type to insert into your template Choose a card type to insert into your template
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<div className="space-y-4 py-4"> <div className="space-y-4 px-6 py-4">
<div className="space-y-2"> <div className="space-y-2">
<label className="text-sm font-medium">Card Type</label> <label className="text-sm font-medium">Card Type</label>
<Select value={selectedCardType} onValueChange={setSelectedCardType}> <Select value={selectedCardType} onValueChange={setSelectedCardType}>
@@ -140,7 +140,7 @@ export function MarkdownToolbar({ onInsert }: MarkdownToolbarProps) {
Choose a button style to insert Choose a button style to insert
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<div className="space-y-4 py-4"> <div className="space-y-4 px-6 py-4">
<div className="space-y-2"> <div className="space-y-2">
<label className="text-sm font-medium">Button Style</label> <label className="text-sm font-medium">Button Style</label>
<Select value={buttonStyle} onValueChange={setButtonStyle}> <Select value={buttonStyle} onValueChange={setButtonStyle}>
@@ -191,7 +191,7 @@ export function MarkdownToolbar({ onInsert }: MarkdownToolbarProps) {
Insert an image using standard Markdown syntax Insert an image using standard Markdown syntax
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<div className="space-y-4 py-4"> <div className="space-y-4 px-6 py-4">
<div className="text-sm text-muted-foreground"> <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>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> <p className="mt-2">Example: <code className="px-1 py-0.5 bg-muted rounded">![Logo](https://example.com/logo.png)</code></p>

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

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

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

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

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

@@ -205,7 +205,7 @@ export default function ProductAttributes() {
{editingAttribute ? __('Update attribute information') : __('Create a new product attribute')} {editingAttribute ? __('Update attribute information') : __('Create a new product attribute')}
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<form onSubmit={handleSubmit} className="space-y-4"> <form onSubmit={handleSubmit} className="space-y-4 px-6 py-4">
<div> <div>
<Label htmlFor="label">{__('Label')}</Label> <Label htmlFor="label">{__('Label')}</Label>
<Input <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')} {editingCategory ? __('Update category information') : __('Create a new product category')}
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<form onSubmit={handleSubmit} className="space-y-4"> <form onSubmit={handleSubmit} className="space-y-4 px-6 py-4">
<div> <div>
<Label htmlFor="name">{__('Name')}</Label> <Label htmlFor="name">{__('Name')}</Label>
<Input <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} {__('Release a new version of')} {selectedProductData?.name}
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<div className="space-y-4 py-4"> <div className="space-y-4 px-6 py-4">
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="version">{__('Version Number')}</Label> <Label htmlFor="version">{__('Version Number')}</Label>
<Input <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')} {editingTag ? __('Update tag information') : __('Create a new product tag')}
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<form onSubmit={handleSubmit} className="space-y-4"> <form onSubmit={handleSubmit} className="space-y-4 px-6 py-4">
<div> <div>
<Label htmlFor="name">{__('Name')}</Label> <Label htmlFor="name">{__('Name')}</Label>
<Input <Input

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

@@ -36,7 +36,7 @@ export default function ChannelConfig({ open, onClose, channelId, channelLabel }
</DialogDescription> </DialogDescription>
</DialogHeader> </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"> <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.' 'Email notifications are powered by WooCommerce. You can configure SMTP settings, email templates, and sender information in the WooCommerce settings.'
@@ -128,7 +128,7 @@ export default function ChannelConfig({ open, onClose, channelId, channelLabel }
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" /> <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
</div> </div>
) : ( ) : (
<div className="space-y-6 py-4"> <div className="space-y-6 px-6 py-4">
{/* Branding */} {/* Branding */}
<div className="space-y-3"> <div className="space-y-3">
<Label>{__('Notification Branding')}</Label> <Label>{__('Notification Branding')}</Label>
@@ -143,7 +143,7 @@ export default function ChannelConfig({ open, onClose, channelId, channelLabel }
<Switch <Switch
id="use-logo" id="use-logo"
checked={settings.use_logo} checked={settings.use_logo}
onCheckedChange={(checked) => setSettings({...settings, use_logo: checked})} onCheckedChange={(checked) => setSettings({ ...settings, use_logo: checked })}
/> />
</div> </div>
@@ -157,7 +157,7 @@ export default function ChannelConfig({ open, onClose, channelId, channelLabel }
<Switch <Switch
id="use-product-image" id="use-product-image"
checked={settings.use_product_images} checked={settings.use_product_images}
onCheckedChange={(checked) => setSettings({...settings, use_product_images: checked})} onCheckedChange={(checked) => setSettings({ ...settings, use_product_images: checked })}
/> />
</div> </div>
@@ -171,7 +171,7 @@ export default function ChannelConfig({ open, onClose, channelId, channelLabel }
<Switch <Switch
id="use-gravatar" id="use-gravatar"
checked={settings.use_gravatar} checked={settings.use_gravatar}
onCheckedChange={(checked) => setSettings({...settings, use_gravatar: checked})} onCheckedChange={(checked) => setSettings({ ...settings, use_gravatar: checked })}
/> />
</div> </div>
</div> </div>
@@ -187,7 +187,7 @@ export default function ChannelConfig({ open, onClose, channelId, channelLabel }
id="click-action" id="click-action"
placeholder={__('https://yourstore.com/orders')} placeholder={__('https://yourstore.com/orders')}
value={settings.click_action} value={settings.click_action}
onChange={(e) => setSettings({...settings, click_action: e.target.value})} onChange={(e) => setSettings({ ...settings, click_action: e.target.value })}
/> />
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
{__('Where users are redirected when clicking the notification')} {__('Where users are redirected when clicking the notification')}
@@ -204,7 +204,7 @@ export default function ChannelConfig({ open, onClose, channelId, channelLabel }
<Switch <Switch
id="require-interaction" id="require-interaction"
checked={settings.require_interaction} checked={settings.require_interaction}
onCheckedChange={(checked) => setSettings({...settings, require_interaction: checked})} onCheckedChange={(checked) => setSettings({ ...settings, require_interaction: checked })}
/> />
</div> </div>
@@ -218,7 +218,7 @@ export default function ChannelConfig({ open, onClose, channelId, channelLabel }
<Switch <Switch
id="silent" id="silent"
checked={settings.silent} checked={settings.silent}
onCheckedChange={(checked) => setSettings({...settings, silent: checked})} onCheckedChange={(checked) => setSettings({ ...settings, silent: checked })}
/> />
</div> </div>
</div> </div>
@@ -233,7 +233,7 @@ export default function ChannelConfig({ open, onClose, channelId, channelLabel }
) )
} }
<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}> <Button variant="outline" onClick={onClose} disabled={saveMutation.isPending}>
{__('Cancel')} {__('Cancel')}
</Button> </Button>
@@ -264,13 +264,13 @@ export default function ChannelConfig({ open, onClose, channelId, channelLabel }
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<div className="space-y-4 py-4"> <div className="space-y-4 px-6 py-4">
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
{__('Configuration for this channel is provided by the addon.')} {__('Configuration for this channel is provided by the addon.')}
</p> </p>
</div> </div>
<div className="flex justify-end"> <div className="flex justify-end px-6 pb-4">
<Button variant="outline" onClick={onClose}> <Button variant="outline" onClick={onClose}>
{__('Close')} {__('Close')}
</Button> </Button>

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

@@ -409,7 +409,7 @@ export default function TaxSettings() {
</DialogTitle> </DialogTitle>
</DialogHeader> </DialogHeader>
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<div className="space-y-4 py-4"> <div className="space-y-4 px-6 py-4">
<div> <div>
<Label>{__('Country')}</Label> <Label>{__('Country')}</Label>
<Input <Input