alee/relicario
1
0
Fork 0
Code Issues Pull Requests 4 Actions Packages Projects Releases Wiki Activity

feat(ext/popup): lowercase form labels + gold required marker

Browse Source 
.label drops text-transform: uppercase and tightens letter-spacing.
The `*` required marker gets wrapped in <span class="req"> so it
picks up the gold accent color (matches palette refresh).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
adlee-was-taken
2026-04-24 23:15:44 -04:00
parent 3c0f8d2c5c
commit 083b01aa91
7 changed files with 17 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
extension/src/popup/components/types/card.ts
View File

@@ -166,7 +166,7 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
<div class="pad"> <div class="pad">
<div class="detail-title" style="margin-bottom:16px;">${mode === 'add' ? 'new card' : 'edit card'}</div> <div class="detail-title" style="margin-bottom:16px;">${mode === 'add' ? 'new card' : 'edit card'}</div>
${state.error ? `<div class="error">${escapeHtml(state.error)}</div>` : ''} ${state.error ? `<div class="error">${escapeHtml(state.error)}</div>` : ''}
<div class="form-group"><label class="label" for="f-title">title *</label> <div class="form-group"><label class="label" for="f-title">title <span class="req">*</span></label>
<input id="f-title" type="text" value="${escapeHtml(title)}" placeholder="Amex Gold"></div> <input id="f-title" type="text" value="${escapeHtml(title)}" placeholder="Amex Gold"></div>
<div class="form-group"><label class="label" for="f-number">number</label> <div class="form-group"><label class="label" for="f-number">number</label>
<input id="f-number" type="text" inputmode="numeric" value="${escapeHtml(c?.number ?? '')}" placeholder="378282246310005"></div> <input id="f-number" type="text" inputmode="numeric" value="${escapeHtml(c?.number ?? '')}" placeholder="378282246310005"></div>

2
extension/src/popup/components/types/identity.ts
View File

@@ -126,7 +126,7 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
<div class="pad"> <div class="pad">
<div class="detail-title" style="margin-bottom:16px;">${mode === 'add' ? 'new identity' : 'edit identity'}</div> <div class="detail-title" style="margin-bottom:16px;">${mode === 'add' ? 'new identity' : 'edit identity'}</div>
${state.error ? `<div class="error">${escapeHtml(state.error)}</div>` : ''} ${state.error ? `<div class="error">${escapeHtml(state.error)}</div>` : ''}
<div class="form-group"><label class="label" for="f-title">title *</label> <div class="form-group"><label class="label" for="f-title">title <span class="req">*</span></label>
<input id="f-title" type="text" value="${escapeHtml(title)}" placeholder="Aaron Lee · personal"></div> <input id="f-title" type="text" value="${escapeHtml(title)}" placeholder="Aaron Lee · personal"></div>
<div class="form-group"><label class="label" for="f-full-name">full name</label> <div class="form-group"><label class="label" for="f-full-name">full name</label>
<input id="f-full-name" type="text" value="${escapeHtml(c?.full_name ?? '')}" placeholder="Aaron Lee"></div> <input id="f-full-name" type="text" value="${escapeHtml(c?.full_name ?? '')}" placeholder="Aaron Lee"></div>

4
extension/src/popup/components/types/key.ts
View File

@@ -115,9 +115,9 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
<div class="pad"> <div class="pad">
<div class="detail-title" style="margin-bottom:16px;">${mode === 'add' ? 'new key' : 'edit key'}</div> <div class="detail-title" style="margin-bottom:16px;">${mode === 'add' ? 'new key' : 'edit key'}</div>
${state.error ? `<div class="error">${escapeHtml(state.error)}</div>` : ''} ${state.error ? `<div class="error">${escapeHtml(state.error)}</div>` : ''}
<div class="form-group"><label class="label" for="f-title">title *</label> <div class="form-group"><label class="label" for="f-title">title <span class="req">*</span></label>
<input id="f-title" type="text" value="${escapeHtml(title)}" placeholder="github ssh"></div> <input id="f-title" type="text" value="${escapeHtml(title)}" placeholder="github ssh"></div>
<div class="form-group"><label class="label" for="f-key-material">key material *</label> <div class="form-group"><label class="label" for="f-key-material">key material <span class="req">*</span></label>
<div style="position:relative;"> <div style="position:relative;">
<textarea id="f-key-material" rows="8" style="font-family:monospace;-webkit-text-security:disc;" placeholder="paste key here">${escapeHtml(c?.key_material ?? '')}</textarea> <textarea id="f-key-material" rows="8" style="font-family:monospace;-webkit-text-security:disc;" placeholder="paste key here">${escapeHtml(c?.key_material ?? '')}</textarea>
<button type="button" id="key-show-btn" class="btn" style="position:absolute;right:6px;top:6px;font-size:10px;padding:2px 8px;">show</button> <button type="button" id="key-show-btn" class="btn" style="position:absolute;right:6px;top:6px;font-size:10px;padding:2px 8px;">show</button>

2
extension/src/popup/components/types/login.ts
View File

@@ -231,7 +231,7 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
<div class="pad"> <div class="pad">
<div class="detail-title" style="margin-bottom:16px;">${mode === 'add' ? 'new login' : 'edit login'}</div> <div class="detail-title" style="margin-bottom:16px;">${mode === 'add' ? 'new login' : 'edit login'}</div>
${state.error ? `<div class="error">${escapeHtml(state.error)}</div>` : ''} ${state.error ? `<div class="error">${escapeHtml(state.error)}</div>` : ''}
<div class="form-group"><label class="label" for="f-title">title *</label> <div class="form-group"><label class="label" for="f-title">title <span class="req">*</span></label>
<input id="f-title" type="text" value="${escapeHtml(title)}" placeholder="GitHub"></div> <input id="f-title" type="text" value="${escapeHtml(title)}" placeholder="GitHub"></div>
<div class="form-group"><label class="label" for="f-url">url</label> <div class="form-group"><label class="label" for="f-url">url</label>
<input id="f-url" type="text" value="${escapeHtml(url)}" placeholder="https://github.com/login"></div> <input id="f-url" type="text" value="${escapeHtml(url)}" placeholder="https://github.com/login"></div>

2
extension/src/popup/components/types/secure-note.ts
View File

@@ -104,7 +104,7 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
<div class="pad"> <div class="pad">
<div class="detail-title" style="margin-bottom:16px;">${mode === 'add' ? 'new secure note' : 'edit secure note'}</div> <div class="detail-title" style="margin-bottom:16px;">${mode === 'add' ? 'new secure note' : 'edit secure note'}</div>
${state.error ? `<div class="error">${escapeHtml(state.error)}</div>` : ''} ${state.error ? `<div class="error">${escapeHtml(state.error)}</div>` : ''}
<div class="form-group"><label class="label" for="f-title">title *</label> <div class="form-group"><label class="label" for="f-title">title <span class="req">*</span></label>
<input id="f-title" type="text" value="${escapeHtml(title)}" placeholder="My recovery codes"></div> <input id="f-title" type="text" value="${escapeHtml(title)}" placeholder="My recovery codes"></div>
<div class="form-group"><label class="label" for="f-body">body</label> <div class="form-group"><label class="label" for="f-body">body</label>
<textarea id="f-body" rows="10" placeholder="paste secrets here">${escapeHtml(body)}</textarea></div> <textarea id="f-body" rows="10" placeholder="paste secrets here">${escapeHtml(body)}</textarea></div>

4
extension/src/popup/components/types/totp.ts
View File

@@ -205,7 +205,7 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
<div class="pad"> <div class="pad">
<div class="detail-title" style="margin-bottom:16px;">${mode === 'add' ? 'new totp' : 'edit totp'}</div> <div class="detail-title" style="margin-bottom:16px;">${mode === 'add' ? 'new totp' : 'edit totp'}</div>
${state.error ? `<div class="error">${escapeHtml(state.error)}</div>` : ''} ${state.error ? `<div class="error">${escapeHtml(state.error)}</div>` : ''}
<div class="form-group"><label class="label" for="f-title">title *</label> <div class="form-group"><label class="label" for="f-title">title <span class="req">*</span></label>
<input id="f-title" type="text" value="${escapeHtml(title)}" placeholder="GitHub"></div> <input id="f-title" type="text" value="${escapeHtml(title)}" placeholder="GitHub"></div>
<div class="form-group"><label class="label">kind</label> <div class="form-group"><label class="label">kind</label>
<div class="inline-row"> <div class="inline-row">
@@ -214,7 +214,7 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
</div> </div>
<p class="muted" style="font-size:11px;margin-top:4px;" id="kind-blurb">${formKind === 'steam' ? 'Steam Mobile Authenticator (5-char alphanumeric)' : 'Standard time-based codes (6 digits)'}</p> <p class="muted" style="font-size:11px;margin-top:4px;" id="kind-blurb">${formKind === 'steam' ? 'Steam Mobile Authenticator (5-char alphanumeric)' : 'Standard time-based codes (6 digits)'}</p>
</div> </div>
<div class="form-group"><label class="label" for="f-secret">secret (base32) *</label> <div class="form-group"><label class="label" for="f-secret">secret (base32) <span class="req">*</span></label>
<input id="f-secret" type="text" value="${escapeHtml(secretB32)}" placeholder="JBSWY3DPEHPK3PXP"></div> <input id="f-secret" type="text" value="${escapeHtml(secretB32)}" placeholder="JBSWY3DPEHPK3PXP"></div>
<div class="form-group"><label class="label" for="f-issuer">issuer</label> <div class="form-group"><label class="label" for="f-issuer">issuer</label>
<input id="f-issuer" type="text" value="${escapeHtml(c?.issuer ?? '')}" placeholder="GitHub"></div> <input id="f-issuer" type="text" value="${escapeHtml(c?.issuer ?? '')}" placeholder="GitHub"></div>

12
extension/src/popup/styles.css
View File

@@ -48,13 +48,19 @@ body {
.label { .label {
font-size: 11px; font-size: 11px;
font-weight: 600; font-weight: 500;
color: #8b949e; color: #8b949e;
text-transform: uppercase; text-transform: lowercase;
letter-spacing: 0.5px; letter-spacing: 0.02em;
margin-bottom: 4px; margin-bottom: 4px;
} }
.label .req {
color: #aa812a;
margin-left: 2px;
font-weight: 600;
}
.secondary { .secondary {
color: #8b949e; color: #8b949e;
} }