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

feat: US-021 - Scale Sidebar proportions

Browse Source
This commit is contained in:
Andy Charlwood
2026-02-14 20:24:34 +00:00
parent a7537083e6
commit 364efb8805
1 changed files with 34 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Sidebar.tsx
+34 -34
View File
@@ -15,7 +15,7 @@ function SectionTitle({ children }: SectionTitleProps) {
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
gap: '6px', gap: '6px',
fontSize: '10px', fontSize: '11px',
fontWeight: 600, fontWeight: 600,
textTransform: 'uppercase', textTransform: 'uppercase',
letterSpacing: '0.08em', letterSpacing: '0.08em',
@@ -62,9 +62,9 @@ function TagPill({ tag }: TagPillProps) {
<span <span
style={{ style={{
display: 'inline-flex', display: 'inline-flex',
fontSize: '10.5px', fontSize: '12px',
fontWeight: 500, fontWeight: 500,
padding: '3px 8px', padding: '4px 10px',
borderRadius: '4px', borderRadius: '4px',
lineHeight: 1.3, lineHeight: 1.3,
...styles[tag.colorVariant], ...styles[tag.colorVariant],
@@ -101,9 +101,9 @@ function AlertFlag({ alert }: AlertFlagProps) {
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
gap: '8px', gap: '8px',
fontSize: '11px', fontSize: '13px',
fontWeight: 700, fontWeight: 700,
padding: '7px 10px', padding: '8px 12px',
borderRadius: 'var(--radius-sm)', borderRadius: 'var(--radius-sm)',
letterSpacing: '0.02em', letterSpacing: '0.02em',
...styles[alert.severity], ...styles[alert.severity],
@@ -111,15 +111,15 @@ function AlertFlag({ alert }: AlertFlagProps) {
> >
<div <div
style={{ style={{
width: '16px', width: '18px',
height: '16px', height: '18px',
flexShrink: 0, flexShrink: 0,
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
}} }}
> >
<Icon size={14} strokeWidth={2.5} /> <Icon size={16} strokeWidth={2.5} />
</div> </div>
<span>{alert.message}</span> <span>{alert.message}</span>
</div> </div>
@@ -135,7 +135,7 @@ export default function Sidebar() {
background: 'var(--sidebar-bg)', background: 'var(--sidebar-bg)',
borderRight: '1px solid var(--border)', borderRight: '1px solid var(--border)',
overflowY: 'auto', overflowY: 'auto',
padding: '20px 16px', padding: '24px 20px',
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
gap: '2px', gap: '2px',
@@ -147,21 +147,21 @@ export default function Sidebar() {
style={{ style={{
borderBottom: '2px solid var(--accent)', borderBottom: '2px solid var(--accent)',
paddingBottom: '16px', paddingBottom: '16px',
marginBottom: '6px', marginBottom: '10px',
}} }}
> >
{/* Avatar */} {/* Avatar */}
<div <div
style={{ style={{
width: '52px', width: '60px',
height: '52px', height: '60px',
borderRadius: '50%', borderRadius: '50%',
background: 'linear-gradient(135deg, var(--accent), #0A8080)', background: 'linear-gradient(135deg, var(--accent), #0A8080)',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
color: '#FFFFFF', color: '#FFFFFF',
fontSize: '18px', fontSize: '20px',
fontWeight: 700, fontWeight: 700,
boxShadow: '0 2px 8px rgba(13,110,110,0.25)', boxShadow: '0 2px 8px rgba(13,110,110,0.25)',
marginBottom: '12px', marginBottom: '12px',
@@ -173,7 +173,7 @@ export default function Sidebar() {
{/* Name */} {/* Name */}
<div <div
style={{ style={{
fontSize: '15px', fontSize: '17px',
fontWeight: 700, fontWeight: 700,
color: 'var(--text-primary)', color: 'var(--text-primary)',
letterSpacing: '-0.01em', letterSpacing: '-0.01em',
@@ -185,7 +185,7 @@ export default function Sidebar() {
{/* Title */} {/* Title */}
<div <div
style={{ style={{
fontSize: '11.5px', fontSize: '13px',
fontFamily: 'Geist Mono, monospace', fontFamily: 'Geist Mono, monospace',
fontWeight: 400, fontWeight: 400,
color: 'var(--text-secondary)', color: 'var(--text-secondary)',
@@ -202,7 +202,7 @@ export default function Sidebar() {
alignItems: 'center', alignItems: 'center',
gap: '5px', gap: '5px',
marginTop: '8px', marginTop: '8px',
fontSize: '11px', fontSize: '12px',
fontWeight: 500, fontWeight: 500,
color: 'var(--success)', color: 'var(--success)',
background: 'var(--success-light)', background: 'var(--success-light)',
@@ -213,8 +213,8 @@ export default function Sidebar() {
> >
<span <span
style={{ style={{
width: '6px', width: '7px',
height: '6px', height: '7px',
borderRadius: '50%', borderRadius: '50%',
background: 'var(--success)', background: 'var(--success)',
animation: 'pulse 2s infinite', animation: 'pulse 2s infinite',
@@ -229,7 +229,7 @@ export default function Sidebar() {
style={{ style={{
display: 'grid', display: 'grid',
gridTemplateColumns: '1fr', gridTemplateColumns: '1fr',
gap: '6px', gap: '8px',
marginTop: '12px', marginTop: '12px',
}} }}
> >
@@ -239,8 +239,8 @@ export default function Sidebar() {
display: 'flex', display: 'flex',
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
fontSize: '11.5px', fontSize: '13px',
padding: '2px 0', padding: '4px 0',
}} }}
> >
<span style={{ color: 'var(--text-tertiary)', fontWeight: 400 }}> <span style={{ color: 'var(--text-tertiary)', fontWeight: 400 }}>
@@ -251,7 +251,7 @@ export default function Sidebar() {
color: 'var(--text-primary)', color: 'var(--text-primary)',
fontWeight: 500, fontWeight: 500,
fontFamily: 'Geist Mono, monospace', fontFamily: 'Geist Mono, monospace',
fontSize: '11px', fontSize: '12px',
letterSpacing: '0.12em', letterSpacing: '0.12em',
}} }}
> >
@@ -265,8 +265,8 @@ export default function Sidebar() {
display: 'flex', display: 'flex',
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
fontSize: '11.5px', fontSize: '13px',
padding: '2px 0', padding: '4px 0',
}} }}
> >
<span style={{ color: 'var(--text-tertiary)', fontWeight: 400 }}> <span style={{ color: 'var(--text-tertiary)', fontWeight: 400 }}>
@@ -289,8 +289,8 @@ export default function Sidebar() {
display: 'flex', display: 'flex',
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
fontSize: '11.5px', fontSize: '13px',
padding: '2px 0', padding: '4px 0',
}} }}
> >
<span style={{ color: 'var(--text-tertiary)', fontWeight: 400 }}> <span style={{ color: 'var(--text-tertiary)', fontWeight: 400 }}>
@@ -313,8 +313,8 @@ export default function Sidebar() {
display: 'flex', display: 'flex',
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
fontSize: '11.5px', fontSize: '13px',
padding: '2px 0', padding: '4px 0',
}} }}
> >
<span style={{ color: 'var(--text-tertiary)', fontWeight: 400 }}> <span style={{ color: 'var(--text-tertiary)', fontWeight: 400 }}>
@@ -345,8 +345,8 @@ export default function Sidebar() {
display: 'flex', display: 'flex',
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
fontSize: '11.5px', fontSize: '13px',
padding: '2px 0', padding: '4px 0',
}} }}
> >
<span style={{ color: 'var(--text-tertiary)', fontWeight: 400 }}> <span style={{ color: 'var(--text-tertiary)', fontWeight: 400 }}>
@@ -377,8 +377,8 @@ export default function Sidebar() {
display: 'flex', display: 'flex',
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
fontSize: '11.5px', fontSize: '13px',
padding: '2px 0', padding: '4px 0',
}} }}
> >
<span style={{ color: 'var(--text-tertiary)', fontWeight: 400 }}> <span style={{ color: 'var(--text-tertiary)', fontWeight: 400 }}>
@@ -398,7 +398,7 @@ export default function Sidebar() {
</div> </div>
{/* Tags Section */} {/* Tags Section */}
<div style={{ padding: '14px 0 6px' }}> <div style={{ padding: '16px 0 8px' }}>
<SectionTitle>Tags</SectionTitle> <SectionTitle>Tags</SectionTitle>
<div <div
style={{ style={{
@@ -414,7 +414,7 @@ export default function Sidebar() {
</div> </div>
{/* Alerts / Highlights Section */} {/* Alerts / Highlights Section */}
<div style={{ padding: '14px 0 6px' }}> <div style={{ padding: '16px 0 8px' }}>
<SectionTitle>Alerts / Highlights</SectionTitle> <SectionTitle>Alerts / Highlights</SectionTitle>
<div <div
style={{ style={{