thejayman77/upbeatBytes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Daily Word controls: matched SVG icons + row-aligned Backspace/Enter

Browse Source 
The ⌫ and ↵ glyphs never matched (different font metrics → different size +
baseline). Replaced both with matching 25px line-icon SVGs, perfectly centered.
Also made each control key one row tall — Backspace aligned to the top row,
Enter pushed to the bottom row — so they line up with the letters and look
proportional instead of two oversized half-height blocks.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
jay
2026-06-11 08:42:08 -04:00
parent dbf8ab6085
commit 924f885400
1 changed files with 11 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/WordGame.svelte
+11 -6
View File
@@ -203,8 +203,12 @@
{/each}
</div>
<div class="controls">
<button class="key ctl back" onclick={() => key('back')} aria-label="Backspace">⌫</button>
<button class="key ctl enter" onclick={() => key('enter')} aria-label="Enter">↵</button>
<button class="key ctl back" onclick={() => key('back')} aria-label="Backspace">
<svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"><path d="M20 5H8.4L2.5 12l5.9 7H20a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1z"/><path d="M11 9.5l5 5M16 9.5l-5 5"/></svg>
</button>
<button class="key ctl enter" onclick={() => key('enter')} aria-label="Enter">
<svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6v3.5a3 3 0 0 1-3 3H5"/><path d="M9 8.5l-4 4 4 4"/></svg>
</button>
</div>
</div>
</div>
@@ -251,7 +255,7 @@
}
.letters { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.krow { display: flex; gap: 4px; justify-content: center; } /* shorter rows auto-centre */
.controls { display: grid; grid-template-rows: 1fr 1fr; gap: 6px; width: 42px; flex-shrink: 0; }
.controls { display: flex; flex-direction: column; width: 44px; flex-shrink: 0; }
.key {
border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--ink);
font-family: var(--label); font-weight: 700; font-size: 1.05rem; cursor: pointer; text-transform: uppercase;
@@ -260,8 +264,9 @@
}
.key:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(0, 0, 0, 0); background: var(--bg); }
.krow .key { width: var(--kw); height: 50px; }
.controls .key { width: 100%; height: 100%; font-size: 1.3rem; }
.controls .enter { background: var(--accent); border-color: var(--accent); color: #fff; font-size: 1.75rem;
.controls .key { width: 100%; height: 50px; display: flex; align-items: center; justify-content: center; }
.controls .key svg { width: 25px; height: 25px; display: block; }
.controls .enter { margin-top: auto; background: var(--accent); border-color: var(--accent); color: #fff;
box-shadow: 0 2px 0 var(--accent-deep), 0 3px 6px rgba(0, 131, 173, 0.18); }
.key.correct { background: #4a9d6e; border-color: #4a9d6e; color: #fff; box-shadow: 0 2px 0 #3a7d56; }
.key.present { background: #d8b24a; border-color: #d8b24a; color: #fff; box-shadow: 0 2px 0 #b8943a; }
@@ -288,7 +293,7 @@
.kbzone { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0;
padding-bottom: calc(env(safe-area-inset-bottom) + 4px); }
.keyboard { --kw: min(44px, calc((100vw - 120px) / 10)); width: 100%; max-width: none; margin: 0; }
.krow .key { height: 47px; }
.krow .key, .controls .key { height: 47px; }
}
.result { text-align: center; }
.rmark { font-family: var(--serif); font-style: italic; color: var(--accent-deep); font-size: 1.2rem; margin: 0 0 10px; }