63dbed757a
## ✅ 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** 🎯
40 lines
1.5 KiB
TypeScript
40 lines
1.5 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { SettingsLayout } from './components/SettingsLayout';
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
import { __ } from '@/lib/i18n';
|
|
import NotificationEvents from './Notifications/Events';
|
|
import NotificationChannels from './Notifications/Channels';
|
|
import NotificationTemplates from './Notifications/Templates';
|
|
|
|
export default function NotificationsSettings() {
|
|
const [activeTab, setActiveTab] = useState('events');
|
|
|
|
return (
|
|
<SettingsLayout
|
|
title={__('Notifications')}
|
|
description={__('Manage notification events, channels, and templates')}
|
|
action={<div />} // Empty action to trigger contextual header
|
|
>
|
|
<Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
|
|
<TabsList className="grid w-full grid-cols-3">
|
|
<TabsTrigger value="events">{__('Events')}</TabsTrigger>
|
|
<TabsTrigger value="channels">{__('Channels')}</TabsTrigger>
|
|
<TabsTrigger value="templates">{__('Templates')}</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="events" className="space-y-4">
|
|
<NotificationEvents />
|
|
</TabsContent>
|
|
|
|
<TabsContent value="channels" className="space-y-4">
|
|
<NotificationChannels />
|
|
</TabsContent>
|
|
|
|
<TabsContent value="templates" className="space-y-4">
|
|
<NotificationTemplates />
|
|
</TabsContent>
|
|
</Tabs>
|
|
</SettingsLayout>
|
|
);
|
|
}
|