style(dashboard): simplify scope indicators to icons only without background color
This commit is contained in:
Gabriel Menezes
parent
b41e664d8a
commit
f8b8bc14b8
3 changed files with 83 additions and 26 deletions
|
|
@ -16,6 +16,8 @@ import {
|
|||
Trash2,
|
||||
Edit2,
|
||||
GripVertical,
|
||||
User,
|
||||
Users,
|
||||
} from 'lucide-react'
|
||||
import type { DashboardV2Card } from '../../lib/userPreferences'
|
||||
import type { Task, Project, Category } from '../../types/task'
|
||||
|
|
@ -557,21 +559,20 @@ export const BiUniformCard: React.FC<BiUniformCardProps> = ({
|
|||
|
||||
{/* Footer: Compact Dimension Tags */}
|
||||
<div className="pt-1.5 border-t border-border-soft/60 flex items-center gap-1.5 flex-wrap text-[9px] truncate">
|
||||
{/* Scope Tag */}
|
||||
{/* Scope Icon (only icon, without background color) */}
|
||||
<span
|
||||
className={`px-1.5 py-0.2 rounded font-semibold border ${
|
||||
effectiveScope === 'mine'
|
||||
? 'bg-brand/10 text-brand border-brand/25'
|
||||
: 'bg-zinc-500/10 text-muted border-zinc-500/20'
|
||||
}`}
|
||||
className="text-muted/70 hover:text-foreground transition-colors shrink-0 inline-flex items-center px-0.5"
|
||||
title={
|
||||
card.scope && card.scope !== 'INHERIT'
|
||||
? 'Escopo fixado nas configurações deste card'
|
||||
: 'Escopo herdado do filtro global da página'
|
||||
? `Escopo fixado: ${effectiveScope === 'mine' ? 'Individual' : 'Equipe'}`
|
||||
: `Escopo: ${effectiveScope === 'mine' ? 'Individual' : 'Equipe'}`
|
||||
}
|
||||
>
|
||||
{effectiveScope === 'mine' ? '👤 Minhas' : '👥 Equipe'}
|
||||
{card.scope && card.scope !== 'INHERIT' && ' • fixo'}
|
||||
{effectiveScope === 'mine' ? (
|
||||
<User className="w-3.5 h-3.5 text-brand" />
|
||||
) : (
|
||||
<Users className="w-3.5 h-3.5 text-muted" />
|
||||
)}
|
||||
</span>
|
||||
|
||||
<span className={`px-1.5 py-0.2 rounded font-semibold border ${theme.badge}`}>
|
||||
|
|
|
|||
|
|
@ -373,8 +373,15 @@ export const AnalyticsPage: React.FC = () => {
|
|||
<p className="text-2xl sm:text-3xl font-extrabold text-foreground tracking-tight font-mono">
|
||||
{formatSecondsToTimer(kpis.totalSecondsTracked)}
|
||||
</p>
|
||||
<span className="px-1.5 py-0.5 rounded text-[9px] font-bold uppercase tracking-wider bg-surface-sunken text-muted border border-border-soft">
|
||||
{selectedMember === 'ALL' ? '👥 Equipe' : '👤 Individual'}
|
||||
<span
|
||||
className="text-muted/70 hover:text-foreground transition-colors shrink-0"
|
||||
title={selectedMember === 'ALL' ? 'Métrica da Equipe' : 'Métrica Individual'}
|
||||
>
|
||||
{selectedMember === 'ALL' ? (
|
||||
<Users className="w-4 h-4 text-muted" />
|
||||
) : (
|
||||
<User className="w-4 h-4 text-brand" />
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-[11px] text-muted mt-1">
|
||||
|
|
@ -396,8 +403,15 @@ export const AnalyticsPage: React.FC = () => {
|
|||
<p className="text-2xl sm:text-3xl font-extrabold text-emerald-700 dark:text-emerald-400 tracking-tight">
|
||||
{kpis.completionRate}%
|
||||
</p>
|
||||
<span className="px-1.5 py-0.5 rounded text-[9px] font-bold uppercase tracking-wider bg-surface-sunken text-muted border border-border-soft">
|
||||
{selectedMember === 'ALL' ? '👥 Equipe' : '👤 Individual'}
|
||||
<span
|
||||
className="text-muted/70 hover:text-foreground transition-colors shrink-0"
|
||||
title={selectedMember === 'ALL' ? 'Métrica da Equipe' : 'Métrica Individual'}
|
||||
>
|
||||
{selectedMember === 'ALL' ? (
|
||||
<Users className="w-4 h-4 text-muted" />
|
||||
) : (
|
||||
<User className="w-4 h-4 text-brand" />
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-[11px] text-muted mt-1">
|
||||
|
|
@ -419,8 +433,15 @@ export const AnalyticsPage: React.FC = () => {
|
|||
<p className="text-2xl sm:text-3xl font-extrabold text-teal-700 dark:text-teal-300 tracking-tight">
|
||||
{kpis.inProgressTasks} tarefas
|
||||
</p>
|
||||
<span className="px-1.5 py-0.5 rounded text-[9px] font-bold uppercase tracking-wider bg-surface-sunken text-muted border border-border-soft">
|
||||
{selectedMember === 'ALL' ? '👥 Equipe' : '👤 Individual'}
|
||||
<span
|
||||
className="text-muted/70 hover:text-foreground transition-colors shrink-0"
|
||||
title={selectedMember === 'ALL' ? 'Métrica da Equipe' : 'Métrica Individual'}
|
||||
>
|
||||
{selectedMember === 'ALL' ? (
|
||||
<Users className="w-4 h-4 text-muted" />
|
||||
) : (
|
||||
<User className="w-4 h-4 text-brand" />
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-[11px] text-muted mt-1">
|
||||
|
|
@ -442,8 +463,15 @@ export const AnalyticsPage: React.FC = () => {
|
|||
<p className="text-2xl sm:text-3xl font-extrabold text-foreground tracking-tight font-mono">
|
||||
{formatSecondsToHuman(kpis.avgSecondsPerCompletedTask)}
|
||||
</p>
|
||||
<span className="px-1.5 py-0.5 rounded text-[9px] font-bold uppercase tracking-wider bg-surface-sunken text-muted border border-border-soft">
|
||||
{selectedMember === 'ALL' ? '👥 Equipe' : '👤 Individual'}
|
||||
<span
|
||||
className="text-muted/70 hover:text-foreground transition-colors shrink-0"
|
||||
title={selectedMember === 'ALL' ? 'Métrica da Equipe' : 'Métrica Individual'}
|
||||
>
|
||||
{selectedMember === 'ALL' ? (
|
||||
<Users className="w-4 h-4 text-muted" />
|
||||
) : (
|
||||
<User className="w-4 h-4 text-brand" />
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-[11px] text-muted mt-1">
|
||||
|
|
|
|||
|
|
@ -436,8 +436,15 @@ export const DashboardPage: React.FC = () => {
|
|||
<p className="text-3xl font-extrabold text-teal-700 dark:text-teal-400 tracking-tight font-mono">
|
||||
{stats.inProgress}
|
||||
</p>
|
||||
<span className="px-1.5 py-0.5 rounded text-[9px] font-bold uppercase tracking-wider bg-surface-sunken text-muted border border-border-soft">
|
||||
{viewScope === 'mine' ? '👤 Minhas' : '👥 Equipe'}
|
||||
<span
|
||||
className="text-muted/70 hover:text-foreground transition-colors shrink-0"
|
||||
title={viewScope === 'mine' ? 'Métrica Individual' : 'Métrica da Equipe'}
|
||||
>
|
||||
{viewScope === 'mine' ? (
|
||||
<User className="w-4 h-4 text-brand" />
|
||||
) : (
|
||||
<Users className="w-4 h-4 text-muted" />
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-[11px] text-muted font-medium mt-1">
|
||||
|
|
@ -463,8 +470,15 @@ export const DashboardPage: React.FC = () => {
|
|||
<p className="text-3xl font-extrabold text-emerald-700 dark:text-emerald-400 tracking-tight font-mono">
|
||||
{stats.completed}
|
||||
</p>
|
||||
<span className="px-1.5 py-0.5 rounded text-[9px] font-bold uppercase tracking-wider bg-surface-sunken text-muted border border-border-soft">
|
||||
{viewScope === 'mine' ? '👤 Minhas' : '👥 Equipe'}
|
||||
<span
|
||||
className="text-muted/70 hover:text-foreground transition-colors shrink-0"
|
||||
title={viewScope === 'mine' ? 'Métrica Individual' : 'Métrica da Equipe'}
|
||||
>
|
||||
{viewScope === 'mine' ? (
|
||||
<User className="w-4 h-4 text-brand" />
|
||||
) : (
|
||||
<Users className="w-4 h-4 text-muted" />
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-[11px] text-muted font-medium mt-1">
|
||||
|
|
@ -490,8 +504,15 @@ export const DashboardPage: React.FC = () => {
|
|||
<p className="text-3xl font-extrabold text-amber-400 tracking-tight font-mono">
|
||||
{formatSecondsToTimer(stats.totalSeconds)}
|
||||
</p>
|
||||
<span className="px-1.5 py-0.5 rounded text-[9px] font-bold uppercase tracking-wider bg-surface-sunken text-muted border border-border-soft">
|
||||
{viewScope === 'mine' ? '👤 Minhas' : '👥 Equipe'}
|
||||
<span
|
||||
className="text-muted/70 hover:text-foreground transition-colors shrink-0"
|
||||
title={viewScope === 'mine' ? 'Métrica Individual' : 'Métrica da Equipe'}
|
||||
>
|
||||
{viewScope === 'mine' ? (
|
||||
<User className="w-4 h-4 text-brand" />
|
||||
) : (
|
||||
<Users className="w-4 h-4 text-muted" />
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-[11px] text-muted font-medium mt-1">
|
||||
|
|
@ -517,8 +538,15 @@ export const DashboardPage: React.FC = () => {
|
|||
<p className="text-3xl font-extrabold text-foreground tracking-tight font-mono">
|
||||
{stats.projectsCount}
|
||||
</p>
|
||||
<span className="px-1.5 py-0.5 rounded text-[9px] font-bold uppercase tracking-wider bg-surface-sunken text-muted border border-border-soft">
|
||||
{viewScope === 'mine' ? '👤 Minhas' : '👥 Equipe'}
|
||||
<span
|
||||
className="text-muted/70 hover:text-foreground transition-colors shrink-0"
|
||||
title={viewScope === 'mine' ? 'Métrica Individual' : 'Métrica da Equipe'}
|
||||
>
|
||||
{viewScope === 'mine' ? (
|
||||
<User className="w-4 h-4 text-brand" />
|
||||
) : (
|
||||
<Users className="w-4 h-4 text-muted" />
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-[11px] text-muted font-medium mt-1">
|
||||
|
|
|
|||
Loading…
Reference in a new issue