Tighten KPI card layout
This commit is contained in:
@@ -213,7 +213,7 @@ export function KpiStrip({
|
|||||||
const { glassSurface, border, textStrong, textMuted, primary, surfaceMuted, surface } = useAdminTheme();
|
const { glassSurface, border, textStrong, textMuted, primary, surfaceMuted, surface } = useAdminTheme();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<XStack flexWrap="wrap" gap="$1.5">
|
<XStack flexWrap="wrap" gap="$2">
|
||||||
{items.map((item, index) => {
|
{items.map((item, index) => {
|
||||||
const isNeutral = item.tone === 'neutral';
|
const isNeutral = item.tone === 'neutral';
|
||||||
const iconColor = isNeutral ? textStrong : item.color || primary;
|
const iconColor = isNeutral ? textStrong : item.color || primary;
|
||||||
@@ -226,11 +226,11 @@ export function KpiStrip({
|
|||||||
borderRadius={14}
|
borderRadius={14}
|
||||||
borderWidth={1}
|
borderWidth={1}
|
||||||
borderColor={border}
|
borderColor={border}
|
||||||
padding="$2"
|
padding="$2.5"
|
||||||
flexGrow={1}
|
flexGrow={1}
|
||||||
flexBasis="28%"
|
flexBasis="48%"
|
||||||
minWidth={96}
|
minWidth={150}
|
||||||
maxWidth={140}
|
maxWidth={220}
|
||||||
>
|
>
|
||||||
<XStack alignItems="center" space="$1">
|
<XStack alignItems="center" space="$1">
|
||||||
<Text
|
<Text
|
||||||
@@ -264,6 +264,7 @@ export function KpiStrip({
|
|||||||
>
|
>
|
||||||
{item.label}
|
{item.label}
|
||||||
</Text>
|
</Text>
|
||||||
|
<Separator backgroundColor={border} opacity={0.4} width={28} alignSelf="center" />
|
||||||
{item.note ? (
|
{item.note ? (
|
||||||
<Text fontSize={9} fontWeight="800" color={iconColor} opacity={0.9} textTransform="uppercase">
|
<Text fontSize={9} fontWeight="800" color={iconColor} opacity={0.9} textTransform="uppercase">
|
||||||
{item.note}
|
{item.note}
|
||||||
|
|||||||
Reference in New Issue
Block a user