andras/perfect-postcode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

UI changes

Browse source
This commit is contained in:
Andras Schmelczer 2026-03-24 20:50:24 +00:00
parent 0aba73a2a3
commit 8616837c01
13 changed files with 126 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/components/ui/FeatureIcons.tsx
View file

@ -23,7 +23,7 @@ export function FeatureActions({
<div className="flex items-center gap-0.5 shrink-0">
{feature.detail && onShowInfo && (
<IconButton onClick={() => onShowInfo(feature)} title="Feature info" size="md">
<InfoIcon className="w-7 h-7 md:w-3.5 md:h-3.5" />
<InfoIcon className="w-5 h-5 md:w-3.5 md:h-3.5" />
</IconButton>
)}
<IconButton
@ -32,7 +32,7 @@ export function FeatureActions({
active={isPinned}
size="md"
>
<EyeIcon filled={isPinned} className="w-7 h-7 md:w-3.5 md:h-3.5" />
<EyeIcon filled={isPinned} className="w-5 h-5 md:w-3.5 md:h-3.5" />
</IconButton>
{onAdd && (
<button
@ -40,7 +40,7 @@ export function FeatureActions({
title="Add filter"
className="p-1 rounded-md text-teal-600 dark:text-teal-400 bg-teal-50 dark:bg-teal-900/30 hover:bg-teal-100 dark:hover:bg-teal-800/40"
>
<PlusIcon className="w-7 h-7 md:w-5 md:h-5" strokeWidth={2.5} />
<PlusIcon className="w-5 h-5 md:w-5 md:h-5" strokeWidth={2.5} />
</button>
)}
{onRemove && (

27
frontend/src/components/ui/FeatureLabel.tsx
View file

@ -14,6 +14,7 @@ interface FeatureLabelProps {
onShowInfo?: (feature: FeatureMeta) => void;
className?: string;
size?: 'xs' | 'sm';
description?: string;
}
export function FeatureLabel({
@ -21,6 +22,7 @@ export function FeatureLabel({
onShowInfo,
className = '',
size = 'xs',
description,
}: FeatureLabelProps) {
const textClass = size === 'sm' ? 'text-sm' : 'text-xs';
const iconClass = 'w-3.5 h-3.5 text-teal-600 dark:text-teal-400 shrink-0';
@ -31,12 +33,8 @@ export function FeatureLabel({
? feature.modes.map((m) => MODE_LABELS[m] || m).join(' · ')
: null;
return (
<div
className={`flex ${size === 'xs' ? 'items-center' : 'items-start'} gap-1 min-w-0 ${className}`}
>
{featureIcon}
{GroupIcon && <GroupIcon className={iconClass} />}
const nameContent = (
<>
<span
className={`${textClass} ${size === 'sm' ? 'font-medium text-navy-950 dark:text-warm-100' : 'text-warm-700 dark:text-warm-300 truncate'}`}
>
@ -56,6 +54,23 @@ export function FeatureLabel({
<InfoIcon className="w-3.5 h-3.5" />
</button>
)}
</>
);
return (
<div
className={`flex ${size === 'xs' ? 'items-center' : 'items-start'} gap-1 min-w-0 ${className}`}
>
{featureIcon}
{GroupIcon && <GroupIcon className={iconClass} />}
{description ? (
<div className="min-w-0">
<div className="flex items-center gap-1">{nameContent}</div>
<span className="text-xs text-warm-400 dark:text-warm-500 block">{description}</span>
</div>
) : (
nameContent
)}
</div>
);
}