ob/tsos
1
0
Fork 0
mirror of https://github.com/hex248/tsos.git synced 2026-02-07 18:23:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

wider black keys and better contrast on D key

Browse Source
This commit is contained in:
Oliver Bryan
2026-01-25 11:45:18 +00:00
parent d055ffa941
commit e2ee7a57e6
1 changed files with 5 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/controls/ColorKeyboard.tsx
View File

@@ -49,8 +49,8 @@ export default function ColorKeyboard({
style={ style={
isActive isActive
? { ? {
backgroundColor: note === "E" ? "#000000" : "#ffffff", backgroundColor: ["D", "E"].includes(note) ? "#000000" : "#ffffff",
color: note === "E" ? "#ffffff" : "#000000", color: ["D", "E"].includes(note) ? "#ffffff" : "#000000",
} }
: { backgroundColor: color } : { backgroundColor: color }
} }
@@ -64,6 +64,7 @@ export default function ColorKeyboard({
{BLACK_KEYS.map((key) => { {BLACK_KEYS.map((key) => {
const color = colorByNote[key.note]; const color = colorByNote[key.note];
const isActive = color.toLowerCase() === value.toLowerCase(); const isActive = color.toLowerCase() === value.toLowerCase();
const width = 10;
return ( return (
<Toggle <Toggle
@@ -76,8 +77,8 @@ export default function ColorKeyboard({
isActive ? "" : "", isActive ? "" : "",
)} )}
style={{ style={{
width: "8%", width: `${width}%`,
left: `${(key.position + 1) * (100 / WHITE_KEYS.length) - 4}%`, left: `${(key.position + 1) * (100 / WHITE_KEYS.length) - width / 2}%`,
backgroundColor: color, backgroundColor: color,
}} }}
aria-label={`Select ${key.note}`} aria-label={`Select ${key.note}`}