Tria/edr-platform
1
0
Fork 0
mirror of https://github.com/Tria-plc/edr-platform.git synced 2026-09-08 05:25:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: update the chat widget

Browse Source
This commit is contained in:
Nathnael
2026-07-09 07:02:02 +00:00
parent 32aaa77d50
commit 66edeb84bf
1 changed files with 22 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
apps/edr-passenger-web/portal/src/features/support/SupportWidget.tsx
View File

@@ -1,6 +1,6 @@
'use client'; 'use client';
import { Headset, MessageCircle } from 'lucide-react'; import { Headset } from 'lucide-react';
import { useState } from 'react'; import { useState } from 'react';
import { SupportPanel } from './SupportPanel'; import { SupportPanel } from './SupportPanel';
@@ -8,6 +8,7 @@ import { useUnreadCount } from './useSupport';
import { useSupportSocket } from './useSupportSocket'; import { useSupportSocket } from './useSupportSocket';
const GREEN = 'rgb(20 113 76)'; const GREEN = 'rgb(20 113 76)';
const GRADIENT = `linear-gradient(135deg, ${GREEN}, rgb(30 140 96))`;
/** /**
* Floating support launcher for the portal. One device-scoped thread — opens * Floating support launcher for the portal. One device-scoped thread — opens
@@ -28,10 +29,27 @@ export function SupportWidget() {
<button <button
onClick={() => setOpen(true)} onClick={() => setOpen(true)}
aria-label="Open support chat" aria-label="Open support chat"
className="relative flex h-14 w-14 items-center justify-center rounded-full text-white shadow-lg transition hover:scale-105" className="group relative flex items-center gap-2.5 rounded-full p-2 pr-2 text-white transition-transform duration-150 hover:-translate-y-0.5 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-primary active:translate-y-0 motion-reduce:transition-none motion-reduce:hover:translate-y-0 sm:pr-5"
style={{ background: GREEN, boxShadow: '0 8px 24px rgba(20,113,76,0.4)' }} style={{ background: GRADIENT, boxShadow: '0 10px 28px rgba(20,113,76,0.4)' }}
> >
{unread > 0 ? <Headset size={26} /> : <MessageCircle size={26} />} {/* Faint breathing ring; the unread badge is loud enough on its own. */}
{unread === 0 && (
<span className="pointer-events-none absolute -inset-1 animate-pulse rounded-full ring-2 ring-primary/50 motion-reduce:animate-none" />
)}
<span className="relative grid h-[42px] w-[42px] shrink-0 place-items-center rounded-full bg-white/20">
<Headset size={22} />
</span>
<span className="relative hidden text-left leading-tight sm:block">
<span className="block whitespace-nowrap text-sm font-semibold">
👋 Need help?
</span>
<span className="block whitespace-nowrap text-[11px] opacity-85">
Chat with our team
</span>
</span>
{unread > 0 && ( {unread > 0 && (
<span className="absolute -right-1 -top-1 flex h-5 min-w-5 items-center justify-center rounded-full border-2 border-white bg-red-500 px-1 text-xs font-bold text-white"> <span className="absolute -right-1 -top-1 flex h-5 min-w-5 items-center justify-center rounded-full border-2 border-white bg-red-500 px-1 text-xs font-bold text-white">
{unread > 9 ? '9+' : unread} {unread > 9 ? '9+' : unread}