Redesign dashboard/screener UI for improved density and performance
- Add compact/dense CSS tokens for tighter layouts - Add size prop to Button (default/compact) and Input (default/compact) - Add density prop to Panel (normal/compact/dense) - Add size prop to MetricCard (default/compact/inline) - Create IndexCardRow component for horizontal metric display - Create FilterChip component for removable filter tags - Redesign Command Center with flat sections, reduced cards - Tighten AppShell spacing (sidebar w-56, header mb-3, main space-y-4) Design goals achieved: - Denser, cleaner terminal-style layout - Reduced card usage in favor of flat sections with dividers - More space-efficient controls and metrics - Better use of widescreen layouts
This commit is contained in:
@@ -1,13 +1,27 @@
|
||||
import { cn } from '@/lib/utils';
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
|
||||
type InputSize = "default" | "compact";
|
||||
|
||||
export function Input({ className, ...props }: InputProps) {
|
||||
type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
|
||||
inputSize?: InputSize;
|
||||
};
|
||||
|
||||
const sizeMap: Record<InputSize, string> = {
|
||||
default: "min-h-11 px-3 py-2 text-sm",
|
||||
compact: "min-h-8 px-2.5 py-1.5 text-xs",
|
||||
};
|
||||
|
||||
export function Input({
|
||||
className,
|
||||
inputSize = "default",
|
||||
...props
|
||||
}: InputProps) {
|
||||
return (
|
||||
<input
|
||||
className={cn(
|
||||
'min-h-11 w-full rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2 text-sm text-[color:var(--terminal-bright)] outline-none transition placeholder:text-[color:var(--terminal-muted)] focus:border-[color:var(--line-strong)] focus:shadow-[0_0_0_3px_var(--focus-ring)]',
|
||||
className
|
||||
"w-full rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] text-[color:var(--terminal-bright)] outline-none transition placeholder:text-[color:var(--terminal-muted)] focus:border-[color:var(--line-strong)] focus:shadow-[0_0_0_3px_var(--focus-ring)]",
|
||||
sizeMap[inputSize],
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user