Skip to content

Commit f522165

Browse files
ux: center stamp in flow, show death label on certificate, tighten date padding
- Move stamp from position:absolute to normal flow (centered flexbox) inside inner border - Add death label badge (dead dead / dying / struggling) in cause-of-death section - Reduce date/age row padding 28px→18px / 12px→10px for tighter layout Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent 1f5b3d0 commit f522165

File tree

1 file changed

+27
-24
lines changed

1 file changed

+27
-24
lines changed

src/components/CertificateFixed.tsx

Lines changed: 27 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -87,27 +87,6 @@ const CertificateFixed = forwardRef<HTMLDivElement, Props>(
8787
>
8888
{PAPER_TEXTURE_SVG}
8989

90-
{showStamp && (
91-
<div
92-
ref={stampRef}
93-
className="stamp-animate"
94-
style={{
95-
position: 'absolute',
96-
bottom: '28px',
97-
left: '50%',
98-
transform: 'translateX(-50%)',
99-
pointerEvents: 'none',
100-
userSelect: 'none',
101-
zIndex: 10,
102-
}}
103-
>
104-
<div style={{ border: '5px solid rgba(139,26,26,0.72)', borderRadius: '4px', padding: '10px 28px', background: 'rgba(139,26,26,0.04)' }}>
105-
<span style={{ fontFamily: MONO, fontSize: '13px', fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(139,26,26,0.75)', display: 'block', textAlign: 'center', whiteSpace: 'nowrap' }}>
106-
Issued by commitmentissues.dev
107-
</span>
108-
</div>
109-
</div>
110-
)}
11190

11291
<div
11392
style={{
@@ -161,17 +140,22 @@ const CertificateFixed = forwardRef<HTMLDivElement, Props>(
161140

162141
<div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', padding: '34px 0', borderBottom: '2px solid #C4A882' }}>
163142
<p style={{ ...labelStyle, margin: '0 0 14px 0', fontSize: '16px' }}>CAUSE OF DEATH</p>
164-
<p style={{ fontFamily: UI, fontStyle: 'italic', fontWeight: 600, fontSize: '36px', color: '#8B0000', lineHeight: 1.35, maxWidth: '560px', margin: '20px 0' }}>
143+
<div style={{ border: '3px solid rgba(139,26,26,0.65)', padding: '5px 18px', marginBottom: '18px', background: 'rgba(139,26,26,0.04)' }}>
144+
<span style={{ fontFamily: MONO, fontSize: '12px', fontWeight: 700, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'rgba(139,26,26,0.80)' }}>
145+
{cert.deathLabel}
146+
</span>
147+
</div>
148+
<p style={{ fontFamily: UI, fontStyle: 'italic', fontWeight: 600, fontSize: '36px', color: '#8B0000', lineHeight: 1.35, maxWidth: '560px', margin: '0' }}>
165149
{cert.causeOfDeath}
166150
</p>
167151
</div>
168152

169-
<div style={{ padding: '28px 0', borderBottom: '2px solid #C4A882' }}>
153+
<div style={{ padding: '18px 0', borderBottom: '2px solid #C4A882' }}>
170154
{[
171155
{ label: 'Date of death', value: cert.deathDate },
172156
{ label: 'Age at death', value: cert.age },
173157
].map(({ label, value }, i) => (
174-
<div key={label} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: '12px 0', borderBottom: i === 0 ? '1px solid #EDE5D8' : 'none' }}>
158+
<div key={label} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: '10px 0', borderBottom: i === 0 ? '1px solid #EDE5D8' : 'none' }}>
175159
<span style={{ fontFamily: MONO, fontSize: '15px', color: '#8B6B4A', letterSpacing: '0.06em' }}>{label}</span>
176160
<span style={{ fontFamily: MONO, fontSize: '17px', color: '#1A0F06', fontWeight: 600 }}>{value}</span>
177161
</div>
@@ -200,6 +184,25 @@ const CertificateFixed = forwardRef<HTMLDivElement, Props>(
200184
</p>
201185
</div>
202186

187+
{showStamp && (
188+
<div
189+
ref={stampRef}
190+
className="stamp-animate"
191+
style={{
192+
display: 'flex',
193+
justifyContent: 'center',
194+
paddingTop: '20px',
195+
pointerEvents: 'none',
196+
userSelect: 'none',
197+
}}
198+
>
199+
<div style={{ border: '5px solid rgba(139,26,26,0.72)', borderRadius: '4px', padding: '10px 28px', background: 'rgba(139,26,26,0.04)' }}>
200+
<span style={{ fontFamily: MONO, fontSize: '13px', fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(139,26,26,0.75)', display: 'block', textAlign: 'center', whiteSpace: 'nowrap' }}>
201+
Issued by commitmentissues.dev
202+
</span>
203+
</div>
204+
</div>
205+
)}
203206

204207
</div>
205208
</div>

0 commit comments

Comments
 (0)