benya/Messenger
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): notification media preview and theme switching
Some checks failed
CI / test (push) Failing after 19s
Details

Browse Source 
- show media labels instead of raw URLs in browser notifications

- support notification icon preview for image messages

- implement effective light/dark/system theme application

- apply appearance prefs on app startup
This commit is contained in:
Alex
2026-03-08 11:07:30 +03:00
parent 663df37d92
commit 0e44988634
4 changed files with 109 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
web/src/index.css
View File

@@ -4,6 +4,16 @@
@tailwind components;
@tailwind utilities;
:root {
--bm-font-size: 16px;
--bm-bg-primary: #101e30;
--bm-bg-secondary: #162233;
--bm-bg-tertiary: #19283a;
--bm-text-color: #e5edf9;
--bm-panel-bg: rgba(19, 31, 47, 0.9);
--bm-panel-border: rgba(146, 174, 208, 0.14);
}
html,
body,
#root {
@@ -17,8 +27,8 @@ body {
background:
radial-gradient(circle at 22% 18%, rgba(36, 68, 117, 0.35), transparent 26%),
radial-gradient(circle at 82% 12%, rgba(24, 95, 102, 0.25), transparent 30%),
linear-gradient(180deg, #101e30 0%, #162233 55%, #19283a 100%);
color: #e5edf9;
linear-gradient(180deg, var(--bm-bg-primary) 0%, var(--bm-bg-secondary) 55%, var(--bm-bg-tertiary) 100%);
color: var(--bm-text-color);
}
* {
@@ -26,8 +36,8 @@ body {
}
.tg-panel {
background: rgba(19, 31, 47, 0.9);
border: 1px solid rgba(146, 174, 208, 0.14);
background: var(--bm-panel-bg);
border: 1px solid var(--bm-panel-border);
backdrop-filter: blur(8px);
}
@@ -46,3 +56,47 @@ body {
background: rgba(126, 159, 201, 0.35);
border-radius: 999px;
}
html[data-theme="light"] {
--bm-bg-primary: #eef3fb;
--bm-bg-secondary: #f5f8fd;
--bm-bg-tertiary: #ffffff;
--bm-text-color: #0f172a;
--bm-panel-bg: rgba(255, 255, 255, 0.93);
--bm-panel-border: rgba(15, 23, 42, 0.12);
}
html[data-theme="light"] .tg-chat-wallpaper {
background:
radial-gradient(circle at 14% 18%, rgba(59, 130, 246, 0.08), transparent 30%),
radial-gradient(circle at 86% 74%, rgba(34, 197, 94, 0.06), transparent 33%),
linear-gradient(160deg, rgba(15, 23, 42, 0.01) 0%, rgba(15, 23, 42, 0.02) 100%);
}
html[data-theme="light"] .bg-slate-900\/95,
html[data-theme="light"] .bg-slate-900\/90,
html[data-theme="light"] .bg-slate-900\/80,
html[data-theme="light"] .bg-slate-900\/70,
html[data-theme="light"] .bg-slate-900\/60,
html[data-theme="light"] .bg-slate-900,
html[data-theme="light"] .bg-slate-800\/80,
html[data-theme="light"] .bg-slate-800\/70,
html[data-theme="light"] .bg-slate-800\/60,
html[data-theme="light"] .bg-slate-800 {
background-color: rgba(255, 255, 255, 0.92) !important;
}
html[data-theme="light"] .border-slate-700\/80,
html[data-theme="light"] .border-slate-700\/70,
html[data-theme="light"] .border-slate-700\/60,
html[data-theme="light"] .border-slate-700\/50,
html[data-theme="light"] .border-slate-700 {
border-color: rgba(15, 23, 42, 0.14) !important;
}
html[data-theme="light"] .text-slate-100,
html[data-theme="light"] .text-slate-200,
html[data-theme="light"] .text-slate-300,
html[data-theme="light"] .text-slate-400 {
color: #334155 !important;
}