Now let me build this premium dark-themed sports match chat. I'll create the components and update the theme.
Now I need to add the custom color tokens to the @theme inline block:
Now let me update the layout with proper metadata and fonts:
Now update the font references in globals.css:
Now let me build the components. I'll create the match header, event items, chat messages, and the input bar:
Now let me create the main page that composes everything together:
Now let me add smooth scrollbar styling and some polish to globals:
Now let me check if the Goal icon actually exists in lucide-react since I used it in the match event component:
The Goal icon doesn't exist in lucide-react. Let me fix the match event to use proper icons:
Now for the goal icon, let me use a custom SVG football icon instead:
Let me verify the page looks correct by checking everything compiles. Let me also verify no import issues:
Everything looks solid. I've completely redesigned the match chat with a premium dark sports aesthetic. Here's what changed:
Dark theme with a deep navy-tinted background and a vibrant green accent color for live indicators and goal events — giving it that FotMob/premium sports app feel instead of the Skype messenger look. The match header now shows a proper scoreboard with team badges, live pulse indicator, and the score in bold monospace type. Match events (goals, offsides) are visually distinct with color-coded borders and icons. User comments have clean avatar circles, hoverable reaction pills that toggle on click, and subtle hover states. The message input uses a modern rounded pill shape with a glowing send button. The whole thing is wrapped in a floating card with a thin scrollbar and stacked avatar indicators showing who's watching.
You can send messages while the preview loads