ob/tsos
1
0
Fork 0
mirror of https://github.com/hex248/tsos.git synced 2026-02-08 02:33:03 +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={
isActive
? {
backgroundColor: note === "E" ? "#000000" : "#ffffff",
color: note === "E" ? "#ffffff" : "#000000",
backgroundColor: ["D", "E"].includes(note) ? "#000000" : "#ffffff",
color: ["D", "E"].includes(note) ? "#ffffff" : "#000000",
}
: { backgroundColor: color }
}
@@ -64,6 +64,7 @@ export default function ColorKeyboard({
{BLACK_KEYS.map((key) => {
const color = colorByNote[key.note];
const isActive = color.toLowerCase() === value.toLowerCase();
const width = 10;
return (
<Toggle
@@ -76,8 +77,8 @@ export default function ColorKeyboard({
isActive ? "" : "",
)}
style={{
width: "8%",
left: `${(key.position + 1) * (100 / WHITE_KEYS.length) - 4}%`,
width: `${width}%`,
left: `${(key.position + 1) * (100 / WHITE_KEYS.length) - width / 2}%`,
backgroundColor: color,
}}
aria-label={`Select ${key.note}`}