zias/stats
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

dashboard: add dark mode

Browse Source
This commit is contained in:
Carl-Gerhard Lindesvärd
2024-03-28 06:47:04 +01:00
parent 64701bf29f
commit a1fa48da75
37 changed files with 181 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/dashboard/src/components/overview/overview-live-histogram.tsx
View File

@@ -85,7 +85,7 @@ export function OverviewLiveHistogram({
{staticArray.map((percent, i) => (
<div
key={i}
className="flex-1 animate-pulse rounded-md bg-slate-200"
className="flex-1 animate-pulse rounded-md bg-slate-200 dark:bg-slate-800"
style={{ height: `${percent}%` }}
/>
))}
@@ -147,7 +147,7 @@ function Wrapper({ open, children, count }: WrapperProps) {
<div className="absolute -top-3 right-0 text-xs text-muted-foreground">
NOW
</div>
{/* <div className="md:absolute top-0 left-0 md:card md:p-4 mr-2 md:bg-white/90 z-50"> */}
{/* <div className="md:absolute top-0 left-0 md:card md:p-4 mr-2 md:bg-background/90 z-50"> */}
{children}
</div>
</div>

6
apps/dashboard/src/components/overview/overview-metrics.tsx
View File

@@ -192,13 +192,13 @@ export default function OverviewMetrics({ projectId }: OverviewMetricsProps) {
return (
<>
<div className="col-span-6 grid grid-cols-6 gap-1">
<div className="col-span-6 flex flex-wrap gap-4">
{reports.map((report, index) => (
<button
key={index}
className={cn(
'group relative col-span-3 scale-95 transition-all md:col-span-2 lg:col-span-1',
index === metric && 'z-10 scale-105 rounded-xl shadow-md'
'group relative col-span-3 min-w-[170px] transition-all max-md:flex-1 md:col-span-2 lg:col-span-1 [&_[role="heading"]]:text-sm',
index === metric && 'z-10 scale-[101%] rounded-xl shadow-md'
)}
onClick={() => {
setMetric(index);

4
apps/dashboard/src/components/overview/overview-widget.tsx
View File

@@ -20,7 +20,7 @@ export function WidgetHead({ className, ...props }: WidgetHeadProps) {
return (
<WidgetHeadBase
className={cn(
'flex flex-col p-0 [&_.title]:flex [&_.title]:items-center [&_.title]:justify-between [&_.title]:p-4',
'flex flex-col rounded-t-xl p-0 [&_.title]:flex [&_.title]:items-center [&_.title]:justify-between [&_.title]:p-4',
className
)}
{...props}
@@ -85,7 +85,7 @@ export function WidgetButtons({
<div
ref={container}
className={cn(
'flex flex-wrap justify-start self-stretch px-4 transition-opacity [&_button.active]:border-b [&_button.active]:border-black [&_button.active]:opacity-100 [&_button]:whitespace-nowrap [&_button]:py-1 [&_button]:text-xs [&_button]:opacity-50',
'-mt-2 flex flex-wrap justify-start self-stretch px-4 transition-opacity [&_button.active]:border-b-2 [&_button.active]:border-black [&_button.active]:opacity-100 [&_button]:whitespace-nowrap [&_button]:py-1 [&_button]:text-xs [&_button]:opacity-50',
className
)}
style={{ gap }}