|
|
@@ -14,7 +14,7 @@ interface KeyboardProps {
|
|
|
export function Keyboard({ letterColors, onKeyPress }: KeyboardProps) {
|
|
|
const m = getMessages();
|
|
|
return (
|
|
|
- <div style={{ display: 'flex', flexDirection: 'column', gap: '6px', alignItems: 'center', marginTop: '12px', width: '95vw', maxWidth: '380px', margin: '12px auto 0' }}>
|
|
|
+ <div style={{ display: 'flex', flexDirection: 'column', gap: '5px', alignItems: 'center', marginTop: '12px', width: '95vw', maxWidth: '340px', margin: '12px auto 0' }}>
|
|
|
{m.keyboardRows.map((row, rowIdx) => (
|
|
|
<div key={rowIdx} style={{ display: 'flex', gap: '4px', width: '100%', justifyContent: 'center' }}>
|
|
|
{row.map((key) => {
|
|
|
@@ -25,7 +25,7 @@ export function Keyboard({ letterColors, onKeyPress }: KeyboardProps) {
|
|
|
const bg = color ? COLOR_MAP[color] : '#d3d6da';
|
|
|
const fg = color ? '#fff' : '#000';
|
|
|
const label = isBackspace ? m.backspaceLabel : key.toUpperCase();
|
|
|
- const flexBasis = isSpecial ? '15%' : '9%';
|
|
|
+ const flexBasis = isSpecial ? '15%' : '8%';
|
|
|
|
|
|
return (
|
|
|
<div
|
|
|
@@ -33,13 +33,13 @@ export function Keyboard({ letterColors, onKeyPress }: KeyboardProps) {
|
|
|
onClick={() => onKeyPress(isBackspace ? m.keyBackspace : key)}
|
|
|
style={{
|
|
|
flex: `0 0 ${flexBasis}`,
|
|
|
- height: '48px',
|
|
|
+ height: '42px',
|
|
|
backgroundColor: bg,
|
|
|
color: fg,
|
|
|
display: 'flex',
|
|
|
alignItems: 'center',
|
|
|
justifyContent: 'center',
|
|
|
- fontSize: isSpecial ? '0.75rem' : '0.85rem',
|
|
|
+ fontSize: isSpecial ? '0.7rem' : '0.78rem',
|
|
|
fontWeight: 'bold',
|
|
|
borderRadius: '4px',
|
|
|
cursor: 'pointer',
|