admin/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: US-019 - Update global layout tokens and Card/CardHeader component

Browse Source
This commit is contained in:
Andy Charlwood
2026-02-14 20:17:27 +00:00
parent f6463cc4b1
commit 645088bbc1
2 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Card.tsx
+6 -6
View File
@@ -16,7 +16,7 @@ export function Card({ children, full, className, tileId }: CardProps) {
? '1px solid var(--border)' ? '1px solid var(--border)'
: '1px solid var(--border-light)', : '1px solid var(--border-light)',
borderRadius: 'var(--radius)', borderRadius: 'var(--radius)',
padding: '20px', padding: '24px',
boxShadow: isHovered ? 'var(--shadow-md)' : 'var(--shadow-sm)', boxShadow: isHovered ? 'var(--shadow-md)' : 'var(--shadow-sm)',
transition: 'box-shadow 0.2s, border-color 0.2s', transition: 'box-shadow 0.2s, border-color 0.2s',
gridColumn: full ? '1 / -1' : undefined, gridColumn: full ? '1 / -1' : undefined,
@@ -56,19 +56,19 @@ export function CardHeader({ dotColor, title, rightText }: CardHeaderProps) {
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
gap: '8px', gap: '8px',
marginBottom: '16px', marginBottom: '18px',
} }
const dotStyles: React.CSSProperties = { const dotStyles: React.CSSProperties = {
width: '8px', width: '9px',
height: '8px', height: '9px',
borderRadius: '50%', borderRadius: '50%',
backgroundColor: dotColorMap[dotColor], backgroundColor: dotColorMap[dotColor],
flexShrink: 0, flexShrink: 0,
} }
const titleStyles: React.CSSProperties = { const titleStyles: React.CSSProperties = {
fontSize: '12px', fontSize: '13px',
fontWeight: 600, fontWeight: 600,
textTransform: 'uppercase', textTransform: 'uppercase',
letterSpacing: '0.06em', letterSpacing: '0.06em',
@@ -76,7 +76,7 @@ export function CardHeader({ dotColor, title, rightText }: CardHeaderProps) {
} }
const rightTextStyles: React.CSSProperties = { const rightTextStyles: React.CSSProperties = {
fontSize: '10px', fontSize: '11px',
fontWeight: 400, fontWeight: 400,
textTransform: 'none', textTransform: 'none',
letterSpacing: 'normal', letterSpacing: 'normal',
src/index.css
+6 -6
View File
@@ -122,9 +122,9 @@
--purple-border: rgba(124,58,237,0.18); --purple-border: rgba(124,58,237,0.18);
--border: #D4E0DE; --border: #D4E0DE;
--border-light: #E4EDEB; --border-light: #E4EDEB;
--sidebar-width: 272px; --sidebar-width: 304px;
--topbar-height: 48px; --topbar-height: 56px;
--subnav-height: 36px; --subnav-height: 42px;
--radius-card: 8px; --radius-card: 8px;
--radius-sm: 6px; --radius-sm: 6px;
--shadow-sm: 0 1px 2px rgba(26,43,42,0.05); --shadow-sm: 0 1px 2px rgba(26,43,42,0.05);
@@ -267,21 +267,21 @@ html {
.dashboard-grid { .dashboard-grid {
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 12px; gap: 14px;
} }
/* Tablet: 2 columns on wider screens */ /* Tablet: 2 columns on wider screens */
@media (min-width: 768px) { @media (min-width: 768px) {
.dashboard-grid { .dashboard-grid {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
gap: 16px; gap: 20px;
} }
} }
/* Desktop: maintain 2 columns with generous gap */ /* Desktop: maintain 2 columns with generous gap */
@media (min-width: 1024px) { @media (min-width: 1024px) {
.dashboard-grid { .dashboard-grid {
gap: 16px; gap: 20px;
} }
} }