Implements meteoChartsPage, fixed responsiveness overall
This commit is contained in:
@@ -34,6 +34,7 @@ export function AppShell({ activePage, onNavigate, children }: AppShellProps) {
|
||||
});
|
||||
|
||||
const isDark = theme === "dark";
|
||||
const isDashboard = activePage === "dashboard";
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem(THEME_STORAGE_KEY, theme);
|
||||
@@ -47,14 +48,14 @@ export function AppShell({ activePage, onNavigate, children }: AppShellProps) {
|
||||
<div
|
||||
className={
|
||||
isDark
|
||||
? "fixed inset-0 overflow-hidden bg-[#0b1220] text-slate-100"
|
||||
: "fixed inset-0 overflow-hidden bg-slate-100 text-slate-950"
|
||||
? "fixed inset-0 overflow-hidden bg-[#07101B] text-slate-100"
|
||||
: "fixed inset-0 overflow-hidden bg-white text-slate-950"
|
||||
}
|
||||
>
|
||||
<style>{`
|
||||
.app-scrollbar {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: ${isDark ? "#334155 #0b1220" : "#94a3b8 #f1f5f9"};
|
||||
scrollbar-color: ${isDark ? "#334155 #07101B" : "#94a3b8 #f8fafc"};
|
||||
}
|
||||
|
||||
.app-scrollbar::-webkit-scrollbar {
|
||||
@@ -63,14 +64,14 @@ export function AppShell({ activePage, onNavigate, children }: AppShellProps) {
|
||||
}
|
||||
|
||||
.app-scrollbar::-webkit-scrollbar-track {
|
||||
background: ${isDark ? "#0b1220" : "#f1f5f9"};
|
||||
background: ${isDark ? "#07101B" : "#f8fafc"};
|
||||
border-left: 1px solid ${isDark ? "rgba(255,255,255,0.06)" : "#e2e8f0"};
|
||||
}
|
||||
|
||||
.app-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: ${isDark ? "#334155" : "#94a3b8"};
|
||||
border-radius: 999px;
|
||||
border: 2px solid ${isDark ? "#0b1220" : "#f1f5f9"};
|
||||
border: 2px solid ${isDark ? "#07101B" : "#f8fafc"};
|
||||
}
|
||||
|
||||
.app-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
@@ -115,17 +116,25 @@ export function AppShell({ activePage, onNavigate, children }: AppShellProps) {
|
||||
<main
|
||||
className={
|
||||
isDark
|
||||
? `app-scrollbar min-h-0 flex-1 border-t border-white/10 bg-[#0b1220] ${activePage === "dashboard"
|
||||
? "overflow-hidden p-0"
|
||||
: "overflow-y-auto p-4"
|
||||
? `app-scrollbar min-h-0 flex-1 border-t border-white/10 ${isDashboard
|
||||
? "overflow-y-auto bg-[#07101B] p-0"
|
||||
: "overflow-y-auto bg-[#0b1220] p-4"
|
||||
}`
|
||||
: `app-scrollbar min-h-0 flex-1 border-t border-slate-200 bg-slate-100 ${activePage === "dashboard"
|
||||
? "overflow-hidden p-0"
|
||||
: "overflow-y-auto p-4"
|
||||
: `app-scrollbar min-h-0 flex-1 border-t border-slate-200 ${isDashboard
|
||||
? "overflow-y-auto bg-white p-0"
|
||||
: "overflow-y-auto bg-slate-100 p-4"
|
||||
}`
|
||||
}
|
||||
>
|
||||
<div className="h-full w-full">
|
||||
<div
|
||||
className={
|
||||
isDashboard
|
||||
? isDark
|
||||
? "h-full w-full bg-[#07101B]"
|
||||
: "h-full w-full bg-white"
|
||||
: "h-full w-full"
|
||||
}
|
||||
>
|
||||
{children({
|
||||
theme,
|
||||
snapshots: telemetry.snapshots,
|
||||
|
||||
Reference in New Issue
Block a user