style: improve light theme border and input visibility

This commit is contained in:
2026-02-25 16:09:29 +01:00
parent 2fb2eaa54c
commit 880bce157b
12 changed files with 36 additions and 36 deletions

View File

@@ -57,9 +57,9 @@ export function FontPreview({ text, font, isLoading, onCopy, onDownload, onShare
};
return (
<Card className={cn('relative', className)}>
<CardHeader className="flex flex-row items-center justify-between flex-wrap gap-2 space-y-0">
<CardHeader className="flex flex-row items-center justify-between flex-wrap gap-2">
<div className="flex items-center gap-2">
<CardTitle className="text-sm font-medium">Preview</CardTitle>
<CardTitle>Preview</CardTitle>
{font && (
<span className="text-xs px-2 py-0.5 bg-primary/10 text-primary rounded-md font-mono">
{font}

View File

@@ -93,8 +93,8 @@ export function FontSelector({
return (
<Card className={cn("flex flex-col min-h-0 overflow-hidden", className)}>
<CardHeader className="flex flex-row items-center justify-between shrink-0 space-y-0">
<CardTitle className="text-sm font-medium">Select Font</CardTitle>
<CardHeader className="flex flex-row items-center justify-between flex-wrap gap-2 space-y-0">
<CardTitle>Select Font</CardTitle>
{onRandomFont && (
<Button
variant="outline"

View File

@@ -121,7 +121,7 @@ export default function MainConverter() {
{/* Quick Access Row */}
<Card>
<CardContent className="flex flex-col md:flex-row md:items-center gap-4 justify-between pt-6">
<CardContent className="flex flex-col md:flex-row md:items-center gap-4 justify-between">
<div className="flex-1">
<SearchUnits onSelectUnit={handleSearchSelect} />
</div>
@@ -156,7 +156,7 @@ export default function MainConverter() {
<CardHeader>
<CardTitle>Convert {formatMeasureName(selectedMeasure)}</CardTitle>
</CardHeader>
<CardContent className="space-y-6 pt-0">
<CardContent className="space-y-6">
{/* Input row, stacks vertically on mobile, horizontal on desktop */}
<div className="flex flex-col gap-4 md:flex-row md:items-end md:gap-2">
{/* Value Input */}