style: match poly-click-stat active state from reference hub
Apply default, hover, and selected styles for stat filter chips including white text when active. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -41,7 +41,7 @@ export function DashboardHeader({
|
||||
{ label: '진행', value: stats.inProgress, statusKey: 'IN_PROGRESS' as const },
|
||||
{ label: '보류', value: stats.review, statusKey: 'REVIEW' as const },
|
||||
{ label: '완료', value: stats.done, statusKey: 'DONE' as const },
|
||||
{ label: '이슈', value: stats.issues, statusKey: 'ISSUES' as const, issue: true },
|
||||
{ label: '이슈', value: stats.issues, statusKey: 'ISSUES' as const },
|
||||
];
|
||||
|
||||
return (
|
||||
@@ -70,7 +70,6 @@ export function DashboardHeader({
|
||||
statusKey={item.statusKey}
|
||||
activeStatus={activeStatus}
|
||||
accent={STAT_ACCENT[item.statusKey]}
|
||||
issue={item.issue}
|
||||
onClick={onStatusChange}
|
||||
/>
|
||||
</span>
|
||||
@@ -110,11 +109,10 @@ interface StatClickProps {
|
||||
statusKey: keyof typeof STAT_ACCENT;
|
||||
activeStatus: string;
|
||||
accent: string;
|
||||
issue?: boolean;
|
||||
onClick: (key: string) => void;
|
||||
}
|
||||
|
||||
function StatClick({ label, value, statusKey, activeStatus, accent, issue, onClick }: StatClickProps) {
|
||||
function StatClick({ label, value, statusKey, activeStatus, accent, onClick }: StatClickProps) {
|
||||
const isActive = activeStatus === statusKey;
|
||||
|
||||
return (
|
||||
@@ -123,11 +121,11 @@ function StatClick({ label, value, statusKey, activeStatus, accent, issue, onCli
|
||||
onClick={() => onClick(isActive ? '전체' : statusKey)}
|
||||
className={`poly-click-stat header-stat-text cursor-pointer whitespace-nowrap leading-none ${
|
||||
isActive ? 'active' : ''
|
||||
} ${issue && !isActive ? 'issue' : ''}`}
|
||||
}`}
|
||||
>
|
||||
{label}{' '}
|
||||
<span className={`font-extrabold ${accent}`}>{value}</span>
|
||||
<span className="text-[14px] font-medium opacity-50">건</span>
|
||||
<span className={`poly-stat-val font-extrabold ${isActive ? '' : accent}`}>{value}</span>
|
||||
<span className="poly-stat-unit text-[14px] font-medium opacity-50">건</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -138,14 +138,17 @@ body,
|
||||
background-color: rgba(230, 234, 227, 0.4);
|
||||
}
|
||||
|
||||
/* F12 — poly-click-stat */
|
||||
/* F12 — poly-click-stat (기본 / hover / active) */
|
||||
.poly-click-stat {
|
||||
color: rgba(255, 255, 255, 0.99);
|
||||
color: #fffc;
|
||||
user-select: none;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
border: 1px solid #1d6947;
|
||||
background: linear-gradient(180deg, #337c5f 0%, #1c4638 100%);
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
@@ -170,8 +173,8 @@ body,
|
||||
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.poly-click-stat.issue {
|
||||
background: linear-gradient(180deg, #337c5f 0%, #1c4638 100%);
|
||||
border: 1px solid #1d6947;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
|
||||
.poly-click-stat.active .poly-stat-val,
|
||||
.poly-click-stat.active .poly-stat-unit {
|
||||
color: #fff;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user