g/ember-market-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor customer dialog styles for consistency

Browse Source 
Updated the customer profile dialog to use more consistent and theme-based styling classes, replacing hardcoded colors and gradients with utility classes. Improved layout and text handling for better responsiveness and readability, and simplified button styles for maintainability.
This commit is contained in:
g
2026-01-12 09:40:08 +00:00
parent d78e6c0725
commit a6b7286b45
1 changed files with 19 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
app/dashboard/storefront/customers/page.tsx
View File

@@ -556,17 +556,17 @@ export default function CustomerManagementPage() {
<AnimatePresence> <AnimatePresence>
{selectedCustomer && ( {selectedCustomer && (
<Dialog open={!!selectedCustomer} onOpenChange={(open) => !open && setSelectedCustomer(null)}> <Dialog open={!!selectedCustomer} onOpenChange={(open) => !open && setSelectedCustomer(null)}>
<DialogContent className="max-w-[95vw] sm:max-w-2xl w-full overflow-y-auto max-h-[90vh] z-[80] bg-black/80 backdrop-blur-xl border-white/10 shadow-2xl p-0 gap-0"> <DialogContent className="max-w-[95vw] sm:max-w-2xl w-full overflow-y-auto max-h-[90vh] z-[80]">
<DialogHeader className="p-6 pb-2 border-b border-white/5"> <DialogHeader>
<DialogTitle className="text-xl flex items-center gap-3"> <DialogTitle className="text-lg flex items-center gap-3">
<div className="h-10 w-10 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center text-white font-bold text-lg shadow-lg shadow-indigo-500/20"> <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold text-lg">
{selectedCustomer.telegramUsername ? selectedCustomer.telegramUsername.substring(0, 1).toUpperCase() : 'U'} {selectedCustomer.telegramUsername ? selectedCustomer.telegramUsername.substring(0, 1).toUpperCase() : 'U'}
</div> </div>
<div> <div>
<div className="font-bold">Customer Details</div> <div className="font-bold">Customer Details</div>
<div className="text-sm font-normal text-muted-foreground flex items-center gap-2"> <div className="text-sm font-normal text-muted-foreground flex items-center gap-2">
@{selectedCustomer.telegramUsername || "Unknown"} @{selectedCustomer.telegramUsername || "Unknown"}
<span className="w-1 h-1 rounded-full bg-indigo-500" /> <span className="w-1 h-1 rounded-full bg-primary" />
<span className="font-mono text-xs opacity-70">ID: {selectedCustomer.telegramUserId}</span> <span className="font-mono text-xs opacity-70">ID: {selectedCustomer.telegramUserId}</span>
</div> </div>
</div> </div>
@@ -583,35 +583,35 @@ export default function CustomerManagementPage() {
className="space-y-4" className="space-y-4"
> >
<h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider pl-1">Contact Info</h3> <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider pl-1">Contact Info</h3>
<div className="rounded-xl border border-white/5 bg-white/5 p-4 space-y-4 backdrop-blur-sm"> <div className="rounded-xl border border-border p-4 space-y-4">
<div className="space-y-3"> <div className="space-y-3">
<div className="flex justify-between items-center text-sm group"> <div className="flex justify-between items-center text-sm group">
<div className="text-muted-foreground flex items-center gap-2"> <div className="text-muted-foreground flex items-center gap-2">
<Users className="h-4 w-4 opacity-50" /> <Users className="h-4 w-4 opacity-50" />
Username Username
</div> </div>
<div className="font-medium text-white group-hover:text-primary transition-colors">@{selectedCustomer.telegramUsername || "Unknown"}</div> <div className="font-medium group-hover:text-primary transition-colors">@{selectedCustomer.telegramUsername || "Unknown"}</div>
</div> </div>
<div className="flex justify-between items-center text-sm group"> <div className="flex justify-between items-center text-sm group">
<div className="text-muted-foreground flex items-center gap-2"> <div className="text-muted-foreground flex items-center gap-2">
<CreditCard className="h-4 w-4 opacity-50" /> <CreditCard className="h-4 w-4 opacity-50" />
User ID User ID
</div> </div>
<div className="font-medium font-mono text-white/80">{selectedCustomer.telegramUserId}</div> <div className="font-medium font-mono">{selectedCustomer.telegramUserId}</div>
</div> </div>
<div className="flex justify-between items-center text-sm group"> <div className="flex justify-between items-center text-sm group">
<div className="text-muted-foreground flex items-center gap-2"> <div className="text-muted-foreground flex items-center gap-2">
<MessageCircle className="h-4 w-4 opacity-50" /> <MessageCircle className="h-4 w-4 opacity-50" />
Chat ID Chat ID
</div> </div>
<div className="font-medium font-mono text-white/80">{selectedCustomer.chatId}</div> <div className="font-medium font-mono">{selectedCustomer.chatId}</div>
</div> </div>
</div> </div>
<Button <Button
variant="outline" variant="outline"
size="sm" size="sm"
className="w-full border-indigo-500/20 hover:bg-indigo-500/10 hover:text-indigo-400 text-indigo-300 transition-colors" className="w-full"
onClick={() => { onClick={() => {
window.open(`https://t.me/${selectedCustomer.telegramUsername || selectedCustomer.telegramUserId}`, '_blank'); window.open(`https://t.me/${selectedCustomer.telegramUsername || selectedCustomer.telegramUserId}`, '_blank');
}} }}
@@ -630,14 +630,14 @@ export default function CustomerManagementPage() {
className="space-y-4" className="space-y-4"
> >
<h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider pl-1">Lifetime Stats</h3> <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider pl-1">Lifetime Stats</h3>
<div className="rounded-xl border border-white/5 bg-gradient-to-br from-white/5 to-white/[0.02] p-4 space-y-4 backdrop-blur-sm"> <div className="rounded-xl border border-border p-4 space-y-4">
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<div className="bg-emerald-500/10 rounded-lg p-3 border border-emerald-500/20"> <div className="bg-emerald-500/10 rounded-lg p-3 border border-emerald-500/20 min-w-0">
<div className="text-xs text-emerald-400/70 uppercase font-medium mb-1">Total Spent</div> <div className="text-xs text-emerald-400/70 uppercase font-medium mb-1 whitespace-nowrap">Total Spent</div>
<div className="text-xl font-bold text-emerald-400">{formatCurrency(selectedCustomer.totalSpent)}</div> <div className="text-xl font-bold text-emerald-400 truncate">{formatCurrency(selectedCustomer.totalSpent)}</div>
</div> </div>
<div className="bg-blue-500/10 rounded-lg p-3 border border-blue-500/20"> <div className="bg-blue-500/10 rounded-lg p-3 border border-blue-500/20 min-w-0">
<div className="text-xs text-blue-400/70 uppercase font-medium mb-1">Total Orders</div> <div className="text-xs text-blue-400/70 uppercase font-medium mb-1 whitespace-nowrap">Total Orders</div>
<div className="text-xl font-bold text-blue-400">{selectedCustomer.totalOrders}</div> <div className="text-xl font-bold text-blue-400">{selectedCustomer.totalOrders}</div>
</div> </div>
</div> </div>
@@ -693,17 +693,17 @@ export default function CustomerManagementPage() {
</motion.div> </motion.div>
</div> </div>
<DialogFooter className="p-6 pt-2 border-t border-white/5 bg-white/[0.02]"> <DialogFooter className="pt-4 border-t">
<Button <Button
variant="ghost" variant="ghost"
onClick={() => setSelectedCustomer(null)} onClick={() => setSelectedCustomer(null)}
className="hover:bg-white/5 text-muted-foreground hover:text-white" className=""
> >
Close Profile Close Profile
</Button> </Button>
<Button <Button
onClick={() => router.push(`/dashboard/storefront/chat/new?userId=${selectedCustomer.telegramUserId}`)} onClick={() => router.push(`/dashboard/storefront/chat/new?userId=${selectedCustomer.telegramUserId}`)}
className="bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500 text-white shadow-lg shadow-indigo-500/25 border-0" className=""
> >
<MessageCircle className="h-4 w-4 mr-2" /> <MessageCircle className="h-4 w-4 mr-2" />
Message Customer Message Customer