feat: redesign + avatars + theme + call presence fixes (v0.6.0)
Visual:
- Light/dark theme via ThemeContext + CSS vars
- New design tokens (surface/fg/accent/line/etc.) across all pages
- Reusable Avatar component (img + letter fallback) wired into UserBar,
ConversationHeader, ChatsPage, FriendsPage, GroupInfoPanel, IncomingCallPanel
Calls:
- Split call UI: IncomingCallPanel, InCallPanel, CallControls,
CallParticipantTile, ScreenShareViewer
- Active speaker hook (useActiveSpeakers)
- Fix: ActiveCallBanner stayed hidden after hangup while peers in room.
- useCallPresence: bind presence callbacks only when we own subscribe
(Supabase forbids .on() after .subscribe() on shared dedup'd channels)
- useCallPresence: never removeChannel — channel is shared with CallContext
so tearing it down on ConversationHeader unmount killed live tracking
- ActiveCallBanner: lastCallConversationId fallback so banner shows
instantly after hangup, auto-dismiss when room confirmed empty
- Drop unused useAnyActiveCall
Bump tauri version 0.5.0 -> 0.6.0
This commit is contained in:
@@ -4,11 +4,42 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
}
|
||||
/* ---------------------------------------------------------------------------
|
||||
* Clean-Rail design tokens.
|
||||
*
|
||||
* `--bg-rgb / --fg-rgb / --accent-rgb` are *space-separated rgb triplets*
|
||||
* (no `rgb(...)` wrapper) so Tailwind's `rgb(var(--x) / <alpha-value>)`
|
||||
* alpha modifier works (e.g. `bg-surface/40`).
|
||||
*
|
||||
* `--line` is a full color value with baked-in alpha — theme decides whether
|
||||
* borders are inked-on-white or white-on-ink.
|
||||
* ------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--bg-rgb: 250 250 249;
|
||||
--bg-2-rgb: 244 244 242;
|
||||
--bg-3-rgb: 255 255 255;
|
||||
--fg-rgb: 10 10 15;
|
||||
--fg-muted-rgb: 115 115 128;
|
||||
--accent-rgb: 79 70 229;
|
||||
--accent-fg-rgb: 255 255 255;
|
||||
--line: rgba(10, 10, 15, 0.08);
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--bg-rgb: 5 5 7;
|
||||
--bg-2-rgb: 17 17 24;
|
||||
--bg-3-rgb: 10 10 15;
|
||||
--fg-rgb: 244 244 245;
|
||||
--fg-muted-rgb: 138 138 153;
|
||||
--accent-rgb: 109 115 255;
|
||||
--accent-fg-rgb: 255 255 255;
|
||||
--line: rgba(255, 255, 255, 0.07);
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
@@ -16,12 +47,12 @@
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-ink-950 text-neutral-100 font-sans antialiased;
|
||||
@apply bg-surface text-fg font-sans antialiased;
|
||||
font-feature-settings: 'cv11', 'ss01';
|
||||
}
|
||||
|
||||
::selection {
|
||||
@apply bg-brand-500/40 text-white;
|
||||
@apply bg-accent/40 text-white;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
@@ -46,4 +77,15 @@
|
||||
background-size: 32px 32px;
|
||||
background-position: -1px -1px;
|
||||
}
|
||||
/* Glass pill used for the fullscreen call controls bar. */
|
||||
.glass-pill {
|
||||
background: rgba(10, 10, 15, 0.7);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.glass-chip {
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
backdrop-filter: blur(10px);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user