Funnel report styling.

This commit is contained in:
Mike Cao 2024-04-02 23:53:08 -07:00
parent cfe7089916
commit 3aee54009c
2 changed files with 10 additions and 7 deletions

View File

@ -37,12 +37,12 @@
.card { .card {
display: grid; display: grid;
gap: 20px; gap: 20px;
margin-top: 8px;
} }
.header { .header {
display: flex; display: flex;
align-items: center; flex-direction: column;
font-weight: 700;
gap: 20px; gap: 20px;
} }
@ -58,7 +58,9 @@
} }
.label { .label {
color: var(--base700); color: var(--base600);
font-weight: 700;
text-transform: uppercase;
} }
.track { .track {
@ -71,9 +73,9 @@
} }
.item { .item {
padding: 6px 10px; font-size: 24px;
border-radius: 4px; color: var(--base900);
border: 1px solid var(--base300); font-weight: 700;
} }
.metric { .metric {
@ -88,6 +90,7 @@
.visitors { .visitors {
color: var(--base900); color: var(--base900);
font-size: 32px;
font-weight: 900; font-weight: 900;
margin-right: 10px; margin-right: 10px;
} }

View File

@ -25,7 +25,7 @@ export function FunnelChart({ className }: FunnelChartProps) {
<div className={styles.card}> <div className={styles.card}>
<div className={styles.header}> <div className={styles.header}>
<span className={styles.label}> <span className={styles.label}>
{formatMessage(type === 'url' ? labels.viewedPage : labels.triggeredEvent)}: {formatMessage(type === 'url' ? labels.viewedPage : labels.triggeredEvent)}
</span> </span>
<span className={styles.item}>{value}</span> <span className={styles.item}>{value}</span>
</div> </div>