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

fix: Polish notification UI - mobile, colors, and layout

Browse Source 
## ✅ All UI Improvements

### 1. Contextual Header
- Added contextual header to Notifications page
- Consistent with Payments and Shipping pages
- Saves vertical space

### 2. Mobile View Improvements
**Channels Page:**
- Responsive flex-col on mobile, flex-row on desktop
- Full-width buttons on mobile
- Better spacing and alignment
- Push subscription toggle in bordered container on mobile

**Templates Accordion:**
- Better mobile layout
- Badges wrap properly
- Icon and title alignment improved
- Responsive padding

### 3. Active State Colors
- **Green color for active channels** (consistent with Payments)
- `bg-green-500/20 text-green-600` for active
- `bg-muted text-muted-foreground` for inactive
- Applied to:
  - Events page channel icons
  - Channels page channel icons
  - Active badges

### 4. Badge Layout
- Badges moved under title on mobile
- Better visual hierarchy
- Title → Badges → Description flow
- Proper spacing between elements

### 5. Template Variables Card Removed
- Variables already in template editor modal
- Click-to-insert functionality
- No need for separate reference card
- Cleaner page layout

### 6. Accordion Polish
- Better padding and spacing
- Responsive layout
- Icon stays visible
- Badges wrap on small screens

---

**Next: Email toggle and push settings backend** 🎯
This commit is contained in:
dwindown
2025-11-11 14:51:42 +07:00
parent 200245491f
commit 63dbed757a
4 changed files with 53 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
admin-spa/src/routes/Settings/Notifications/Channels.tsx
View File

@@ -169,20 +169,27 @@ export default function NotificationChannels() {
<SettingsCard title={__('Built-in Channels')} description={__('Channels included with WooNooW')}>
<div className="space-y-4">
{builtinChannels.map((channel: NotificationChannel) => (
<div key={channel.id} className="flex items-center justify-between p-4 rounded-lg border bg-card">
<div className="flex items-center gap-4 flex-1">
<div className="p-3 rounded-lg bg-primary/10">{getChannelIcon(channel.id)}</div>
<div className="flex-1">
<div className="flex items-center gap-2 mb-1">
<div key={channel.id} className="flex flex-col sm:flex-row sm:items-center gap-4 p-4 rounded-lg border bg-card">
<div className="flex items-start gap-3 flex-1 min-w-0">
<div className={`p-3 rounded-lg shrink-0 ${channel.enabled ? 'bg-green-500/20 text-green-600' : 'bg-muted text-muted-foreground'}`}>
{getChannelIcon(channel.id)}
</div>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-2">
<h3 className="font-medium">{channel.label}</h3>
</div>
<div className="flex flex-wrap items-center gap-2 mb-2">
<Badge variant="secondary" className="text-xs">
{__('Built-in')}
</Badge>
<Badge variant={channel.enabled ? 'default' : 'secondary'} className="text-xs">
<Badge
variant={channel.enabled ? 'default' : 'secondary'}
className={`text-xs ${channel.enabled ? 'bg-green-500 hover:bg-green-600' : ''}`}
>
{channel.enabled ? __('Active') : __('Inactive')}
</Badge>
</div>
<p className="text-sm text-muted-foreground">
<p className="text-sm text-muted-foreground mt-1">
{channel.id === 'email' &&
__('Email notifications powered by WooCommerce. Configure templates and SMTP settings.')}
{channel.id === 'push' &&
@@ -190,7 +197,7 @@ export default function NotificationChannels() {
</p>
</div>
</div>
<div className="flex items-center gap-2">
<div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 sm:gap-2">
<Button
variant="outline"
size="sm"
@@ -198,32 +205,31 @@ export default function NotificationChannels() {
setSelectedChannel(channel);
setConfigOpen(true);
}}
className="w-full sm:w-auto"
>
<Settings className="h-4 w-4 mr-2" />
{__('Configure')}
<Settings className="h-4 w-4 sm:mr-2" />
<span className="sm:inline">{__('Configure')}</span>
</Button>
{channel.id === 'push' && pushSupported && (
<div className="flex items-center gap-3">
<div className="flex items-center gap-2">
<span className="text-sm text-muted-foreground">
{pushSubscribed ? __('Subscribed') : __('Not subscribed')}
</span>
<Switch
checked={pushSubscribed}
onCheckedChange={(checked) => {
if (checked) {
subscribeToPush.mutate();
} else {
unsubscribeFromPush.mutate();
}
}}
disabled={subscribeToPush.isPending || unsubscribeFromPush.isPending}
/>
</div>
<div className="flex items-center justify-between sm:justify-start gap-2 p-2 sm:p-0 rounded-lg sm:rounded-none border sm:border-0">
<span className="text-sm text-muted-foreground">
{pushSubscribed ? __('Subscribed') : __('Not subscribed')}
</span>
<Switch
checked={pushSubscribed}
onCheckedChange={(checked) => {
if (checked) {
subscribeToPush.mutate();
} else {
unsubscribeFromPush.mutate();
}
}}
disabled={subscribeToPush.isPending || unsubscribeFromPush.isPending}
/>
</div>
)}
{channel.id === 'push' && !pushSupported && (
<Badge variant="destructive" className="text-xs">
<Badge variant="destructive" className="text-xs w-full sm:w-auto justify-center">
{__('Not Supported')}
</Badge>
)}