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

give dark mode some love 🖤

Browse Source
This commit is contained in:
Carl-Gerhard Lindesvärd
2024-05-31 22:25:07 +02:00
parent ff31cc506c
commit 1665924073
77 changed files with 256 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/dashboard/src/components/report/chart/ChartLoading.tsx
View File

@@ -7,7 +7,7 @@ export function ChartLoading({ className }: ChartLoadingProps) {
return (
<div
className={cn(
'aspect-video max-h-[300px] min-h-[200px] w-full animate-pulse rounded bg-slate-200',
'bg-def-200 aspect-video max-h-[300px] min-h-[200px] w-full animate-pulse rounded',
className
)}
/>

8
apps/dashboard/src/components/report/chart/MetricCard.tsx
View File

@@ -115,7 +115,7 @@ export function MetricCard({
export function MetricCardEmpty() {
return (
<div className="card h-24 p-4">
<div className="flex h-full items-center justify-center text-slate-600">
<div className="flex h-full items-center justify-center text-muted-foreground">
No data
</div>
</div>
@@ -125,9 +125,9 @@ export function MetricCardEmpty() {
export function MetricCardLoading() {
return (
<div className="flex h-[70px] flex-col justify-between">
<div className="h-4 w-1/2 animate-pulse rounded bg-slate-200"></div>
<div className="h-8 w-1/3 animate-pulse rounded bg-slate-200"></div>
<div className="h-3 w-1/5 animate-pulse rounded bg-slate-200"></div>
<div className="bg-def-200 h-4 w-1/2 animate-pulse rounded"></div>
<div className="bg-def-200 h-8 w-1/3 animate-pulse rounded"></div>
<div className="bg-def-200 h-3 w-1/5 animate-pulse rounded"></div>
</div>
);
}

2
apps/dashboard/src/components/report/chart/ReportAreaChart.tsx
View File

@@ -104,7 +104,7 @@ export function ReportAreaChart({
strokeDasharray="3 3"
horizontal={true}
vertical={false}
className="stroke-slate-300"
className="stroke-def-200"
/>
</AreaChart>
)}

2
apps/dashboard/src/components/report/chart/ReportBarChart.tsx
View File

@@ -41,7 +41,7 @@ export function ReportBarChart({ data }: ReportBarChartProps) {
{...(isClickable ? { onClick: () => onClick(serie) } : {})}
>
<div
className="absolute bottom-0 left-0 top-0 rounded bg-slate-100"
className="bg-def-200 absolute bottom-0 left-0 top-0 rounded"
style={{
width: `${(serie.metrics.sum / maxCount) * 100}%`,
}}

2
apps/dashboard/src/components/report/chart/ReportChartTooltip.tsx
View File

@@ -39,7 +39,7 @@ export function ReportChartTooltip({
const hidden = sorted.slice(limit);
return (
<div className="flex min-w-[180px] flex-col gap-2 rounded-xl border bg-background p-3 text-sm shadow-xl">
<div className="flex min-w-[180px] flex-col gap-2 rounded-xl border bg-card p-3 text-sm shadow-xl">
{visible.map((item, index) => {
// If we have a <Cell /> component, payload can be nested
const payload = item.payload.payload ?? item.payload;

2
apps/dashboard/src/components/report/chart/ReportHistogramChart.tsx
View File

@@ -50,7 +50,7 @@ export function ReportHistogramChart({
<CartesianGrid
strokeDasharray="3 3"
vertical={false}
className="stroke-slate-300"
className="stroke-def-200"
/>
<Tooltip content={<ReportChartTooltip />} cursor={<BarHover />} />
<XAxis

2
apps/dashboard/src/components/report/chart/ReportLineChart.tsx
View File

@@ -55,7 +55,7 @@ export function ReportLineChart({
strokeDasharray="3 3"
horizontal={true}
vertical={false}
className="stroke-slate-300"
className="stroke-def-200"
/>
{references.map((ref) => (
<ReferenceLine

4
apps/dashboard/src/components/report/funnel/Funnel.old.tsx
View File

@@ -100,7 +100,7 @@ export function FunnelSteps({
)}
key={step.event.id}
>
<div className="card divide-y divide-border bg-background">
<div className="card divide-y divide-border bg-card">
<div className="p-4">
<p className="text-muted-foreground">Step {index + 1}</p>
<h3 className="font-bold">
@@ -109,7 +109,7 @@ export function FunnelSteps({
</div>
<div className="relative aspect-square">
<FunnelChart from={step.prevPercent} to={step.percent} />
<div className="absolute left-0 right-0 top-0 flex flex-col bg-background/40 p-4">
<div className="absolute left-0 right-0 top-0 flex flex-col bg-card/40 p-4">
<div className="font-medium uppercase text-muted-foreground">
Sessions
</div>

4
apps/dashboard/src/components/report/funnel/Funnel.tsx
View File

@@ -105,8 +105,8 @@ export function FunnelSteps({
nameKey="label"
dataKey="value"
>
<Cell strokeWidth={0} className="fill-blue-600" />
<Cell strokeWidth={0} className="fill-slate-200" />
<Cell strokeWidth={0} className="fill-highlight" />
<Cell strokeWidth={0} className="fill-def-200" />
</Pie>
</PieChart>
<div

2
apps/dashboard/src/components/report/sidebar/ReportBreakdowns.tsx
View File

@@ -43,7 +43,7 @@ export function ReportBreakdowns() {
<div className="flex flex-col gap-4">
{selectedBreakdowns.map((item, index) => {
return (
<div key={item.name} className="rounded-lg border bg-slate-50">
<div key={item.name} className="bg-def-100 rounded-lg border">
<div className="flex items-center gap-2 p-2 px-4">
<ColorSquare>{index}</ColorSquare>
<Combobox

4
apps/dashboard/src/components/report/sidebar/ReportEvents.tsx
View File

@@ -54,7 +54,7 @@ export function ReportEvents() {
<div className="flex flex-col gap-4">
{selectedEvents.map((event) => {
return (
<div key={event.id} className="rounded-lg border bg-slate-50">
<div key={event.id} className="bg-def-100 rounded-lg border">
<div className="flex items-center gap-2 p-2">
<ColorSquare>{event.id}</ColorSquare>
<Combobox
@@ -135,7 +135,7 @@ export function ReportEvents() {
]}
label="Segment"
>
<button className="flex items-center gap-1 rounded-md border border-border bg-background p-1 px-2 text-xs font-medium leading-none">
<button className="flex items-center gap-1 rounded-md border border-border bg-card p-1 px-2 text-xs font-medium leading-none">
{event.segment === 'user' ? (
<>
<Users size={12} /> Unique users

2
apps/dashboard/src/components/report/sidebar/filters/FilterItem.tsx
View File

@@ -90,7 +90,7 @@ export function FilterItem({ filter, event }: FilterProps) {
return (
<div
key={filter.name}
className="px-4 py-2 shadow-[inset_6px_0_0] shadow-slate-200 first:border-t"
className="shadow-def-200 px-4 py-2 shadow-[inset_6px_0_0] first:border-t"
>
<div className="mb-2 flex items-center gap-2">
<ColorSquare className="bg-emerald-500">

2
apps/dashboard/src/components/report/sidebar/filters/FiltersCombobox.tsx
View File

@@ -54,7 +54,7 @@ export function FiltersCombobox({ event }: FiltersComboboxProps) {
);
}}
>
<button className="flex items-center gap-1 rounded-md border border-border bg-background p-1 px-2 text-xs font-medium leading-none">
<button className="flex items-center gap-1 rounded-md border border-border bg-card p-1 px-2 text-xs font-medium leading-none">
<FilterIcon size={12} /> Add filter
</button>
</Combobox>

2
apps/dashboard/src/components/report/sidebar/filters/FiltersList.tsx
View File

@@ -9,7 +9,7 @@ interface ReportEventFiltersProps {
export function FiltersList({ event }: ReportEventFiltersProps) {
return (
<div>
<div className="flex flex-col divide-y bg-slate-50">
<div className="bg-def-100 flex flex-col divide-y">
{event.filters.map((filter) => {
return <FilterItem key={filter.name} filter={filter} event={event} />;
})}