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

feat: US-025 - Scale WorkExperienceSubsection and RepeatMedicationsSubsection

Browse Source
This commit is contained in:
Andy Charlwood
2026-02-14 20:37:22 +00:00
parent 3f026a0701
commit daabfb7fd2
2 changed files with 23 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/RepeatMedicationsSubsection.tsx
+12 -12
View File
@@ -54,7 +54,7 @@ function SkillRow({ skill, onClick, onHighlight }: SkillRowProps) {
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
gap: '10px', gap: '10px',
padding: '8px 10px', padding: '10px 12px',
minHeight: '44px', minHeight: '44px',
background: 'var(--bg-dashboard)', background: 'var(--bg-dashboard)',
borderRadius: 'var(--radius-sm)', borderRadius: 'var(--radius-sm)',
@@ -75,8 +75,8 @@ function SkillRow({ skill, onClick, onHighlight }: SkillRowProps) {
> >
<div <div
style={{ style={{
width: '26px', width: '30px',
height: '26px', height: '30px',
borderRadius: '6px', borderRadius: '6px',
background: 'var(--accent-light)', background: 'var(--accent-light)',
color: 'var(--accent)', color: 'var(--accent)',
@@ -86,12 +86,12 @@ function SkillRow({ skill, onClick, onHighlight }: SkillRowProps) {
flexShrink: 0, flexShrink: 0,
}} }}
> >
{IconComponent && <IconComponent size={13} />} {IconComponent && <IconComponent size={15} />}
</div> </div>
<div style={{ flex: 1, minWidth: 0 }}> <div style={{ flex: 1, minWidth: 0 }}>
<div <div
style={{ style={{
fontSize: '12.5px', fontSize: '14px',
fontWeight: 600, fontWeight: 600,
color: 'var(--text-primary)', color: 'var(--text-primary)',
lineHeight: 1.3, lineHeight: 1.3,
@@ -101,7 +101,7 @@ function SkillRow({ skill, onClick, onHighlight }: SkillRowProps) {
</div> </div>
<div <div
style={{ style={{
fontSize: '10.5px', fontSize: '12px',
color: 'var(--text-tertiary)', color: 'var(--text-tertiary)',
fontFamily: '"Geist Mono", monospace', fontFamily: '"Geist Mono", monospace',
}} }}
@@ -111,9 +111,9 @@ function SkillRow({ skill, onClick, onHighlight }: SkillRowProps) {
</div> </div>
<div <div
style={{ style={{
fontSize: '10px', fontSize: '11px',
fontWeight: 500, fontWeight: 500,
padding: '2px 7px', padding: '3px 8px',
borderRadius: '20px', borderRadius: '20px',
background: 'var(--success-light)', background: 'var(--success-light)',
color: 'var(--success)', color: 'var(--success)',
@@ -165,7 +165,7 @@ function CategorySection({
> >
<span <span
style={{ style={{
fontSize: '10px', fontSize: '11px',
fontWeight: 600, fontWeight: 600,
textTransform: 'uppercase', textTransform: 'uppercase',
letterSpacing: '0.06em', letterSpacing: '0.06em',
@@ -184,7 +184,7 @@ function CategorySection({
/> />
<span <span
style={{ style={{
fontSize: '10px', fontSize: '11px',
color: 'var(--text-tertiary)', color: 'var(--text-tertiary)',
fontFamily: '"Geist Mono", monospace', fontFamily: '"Geist Mono", monospace',
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
@@ -193,7 +193,7 @@ function CategorySection({
{categorySkills.length} items {categorySkills.length} items
</span> </span>
</div> </div>
<div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}> <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
{visibleSkills.map((skill) => ( {visibleSkills.map((skill) => (
<SkillRow <SkillRow
key={skill.id} key={skill.id}
@@ -216,7 +216,7 @@ function CategorySection({
background: 'none', background: 'none',
border: 'none', border: 'none',
cursor: 'pointer', cursor: 'pointer',
fontSize: '11px', fontSize: '12px',
fontWeight: 500, fontWeight: 500,
color: 'var(--accent)', color: 'var(--accent)',
fontFamily: 'inherit', fontFamily: 'inherit',
src/components/WorkExperienceSubsection.tsx
+11 -11
View File
@@ -53,7 +53,7 @@ function RoleItem({ consultation, isExpanded, onToggle, onViewFull, onHighlight
style={{ style={{
display: 'flex', display: 'flex',
gap: '10px', gap: '10px',
padding: '10px 12px', padding: '12px 14px',
cursor: 'pointer', cursor: 'pointer',
minHeight: '44px', minHeight: '44px',
alignItems: 'flex-start', alignItems: 'flex-start',
@@ -75,8 +75,8 @@ function RoleItem({ consultation, isExpanded, onToggle, onViewFull, onHighlight
<div <div
aria-hidden="true" aria-hidden="true"
style={{ style={{
width: '8px', width: '9px',
height: '8px', height: '9px',
borderRadius: '50%', borderRadius: '50%',
background: '#0D6E6E', background: '#0D6E6E',
flexShrink: 0, flexShrink: 0,
@@ -88,7 +88,7 @@ function RoleItem({ consultation, isExpanded, onToggle, onViewFull, onHighlight
<div style={{ flex: 1, minWidth: 0 }}> <div style={{ flex: 1, minWidth: 0 }}>
<div <div
style={{ style={{
fontSize: '12.5px', fontSize: '14px',
fontWeight: 600, fontWeight: 600,
color: 'var(--text-primary)', color: 'var(--text-primary)',
lineHeight: 1.3, lineHeight: 1.3,
@@ -98,7 +98,7 @@ function RoleItem({ consultation, isExpanded, onToggle, onViewFull, onHighlight
</div> </div>
<div <div
style={{ style={{
fontSize: '11px', fontSize: '12px',
color: 'var(--text-secondary)', color: 'var(--text-secondary)',
marginTop: '2px', marginTop: '2px',
}} }}
@@ -107,7 +107,7 @@ function RoleItem({ consultation, isExpanded, onToggle, onViewFull, onHighlight
</div> </div>
<div <div
style={{ style={{
fontSize: '10px', fontSize: '11px',
fontFamily: 'var(--font-mono)', fontFamily: 'var(--font-mono)',
color: 'var(--text-tertiary)', color: 'var(--text-tertiary)',
marginTop: '3px', marginTop: '3px',
@@ -168,7 +168,7 @@ function RoleItem({ consultation, isExpanded, onToggle, onViewFull, onHighlight
<li <li
key={i} key={i}
style={{ style={{
fontSize: '11.5px', fontSize: '13px',
color: 'var(--text-primary)', color: 'var(--text-primary)',
lineHeight: 1.5, lineHeight: 1.5,
paddingLeft: '12px', paddingLeft: '12px',
@@ -206,9 +206,9 @@ function RoleItem({ consultation, isExpanded, onToggle, onViewFull, onHighlight
<span <span
key={entry.code} key={entry.code}
style={{ style={{
fontSize: '10px', fontSize: '11px',
fontFamily: 'var(--font-mono)', fontFamily: 'var(--font-mono)',
padding: '2px 6px', padding: '3px 8px',
borderRadius: '4px', borderRadius: '4px',
background: 'var(--accent-light)', background: 'var(--accent-light)',
color: 'var(--accent)', color: 'var(--accent)',
@@ -230,7 +230,7 @@ function RoleItem({ consultation, isExpanded, onToggle, onViewFull, onHighlight
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
gap: '4px', gap: '4px',
fontSize: '11px', fontSize: '12px',
fontWeight: 500, fontWeight: 500,
color: 'var(--accent)', color: 'var(--accent)',
background: 'transparent', background: 'transparent',
@@ -279,7 +279,7 @@ export function WorkExperienceSubsection({ onNodeHighlight }: WorkExperienceSubs
return ( return (
<div> <div>
<CardHeader dotColor="teal" title="WORK EXPERIENCE" rightText={`${consultations.length} roles`} /> <CardHeader dotColor="teal" title="WORK EXPERIENCE" rightText={`${consultations.length} roles`} />
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}> <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
{consultations.map((c) => ( {consultations.map((c) => (
<RoleItem <RoleItem
key={c.id} key={c.id}