From 518877565b155d1a55307489b0ff497c4af69e51 Mon Sep 17 00:00:00 2001
From: TheoryOfNekomata <allan.crisostomo@outlook.com>
Date: Sun, 9 Aug 2020 14:18:28 +0800
Subject: [PATCH] Make accidentals more prominent

Adjust metrics of styled accidentals.
---
 .../StyledAccidentalKey.tsx                   | 38 ++++++++-----------
 .../StyledNaturalKey/StyledNaturalKey.tsx     |  2 +-
 tsconfig.json                                 |  1 +
 3 files changed, 17 insertions(+), 24 deletions(-)

diff --git a/src/components/StyledAccidentalKey/StyledAccidentalKey.tsx b/src/components/StyledAccidentalKey/StyledAccidentalKey.tsx
index 62fda53..6347818 100644
--- a/src/components/StyledAccidentalKey/StyledAccidentalKey.tsx
+++ b/src/components/StyledAccidentalKey/StyledAccidentalKey.tsx
@@ -107,9 +107,8 @@ const StyledAccidentalKey: React.FC<Props> = ({ keyChannels }) => {
       <div
         style={{
           width: 'calc(2px * var(--size-scale-factor, 1))',
-          height: 'calc(11px * var(--size-scale-factor, 1))',
-          padding:
-            'calc(1px * var(--size-scale-factor, 1)) calc(1px * var(--size-scale-factor, 1)) calc(1px * var(--size-scale-factor, 1)) 0',
+          height: 'calc(10 / 52 * 100%)',
+          padding: '0 calc(1px * var(--size-scale-factor, 1)) 0 0',
           boxSizing: 'border-box',
           position: 'absolute',
           top: 0,
@@ -131,16 +130,13 @@ const StyledAccidentalKey: React.FC<Props> = ({ keyChannels }) => {
       <div
         style={{
           width: 'calc(2px * var(--size-scale-factor, 1))',
-          height: '100%',
-          padding:
-            'calc(10px * var(--size-scale-factor, 1)) calc(1px * var(--size-scale-factor, 1)) calc(6px * var(--size-scale-factor, 1)) 0',
+          height: hasKeyChannels ? 'calc(38 / 52 * 100%)' : 'calc(34 / 52 * 100%)',
           boxSizing: 'border-box',
           position: 'absolute',
-          top: 0,
+          bottom: hasKeyChannels ? 'calc(4 / 52 * 100%)' : 'calc(8 / 52 * 100%)',
           right: 0,
-          paddingBottom: hasKeyChannels
-            ? 'calc(3px * var(--size-scale-factor, 1))'
-            : 'calc(5px * var(--size-scale-factor, 1))',
+          paddingRight: 'calc(1px * var(--size-scale-factor, 1))',
+          paddingLeft: 0,
           opacity: hasKeyChannels ? 0.5 : '1',
         }}
       >
@@ -157,6 +153,7 @@ const StyledAccidentalKey: React.FC<Props> = ({ keyChannels }) => {
       <div
         style={{
           width: '100%',
+          height: hasKeyChannels ? 'calc(2 / 52 * 100%)' : 'calc(6 / 52 * 100%)',
           padding:
             '0 calc(1px * var(--size-scale-factor, 1)) calc(1px * var(--size-scale-factor, 1)) calc(1px * var(--size-scale-factor, 1))',
           boxSizing: 'border-box',
@@ -180,12 +177,11 @@ const StyledAccidentalKey: React.FC<Props> = ({ keyChannels }) => {
       <div
         style={{
           width: '100%',
-          height: '100%',
-          padding:
-            'calc(3px * var(--size-scale-factor, 1)) calc(3px * var(--size-scale-factor, 1)) calc(7px * var(--size-scale-factor, 1)) calc(3px * var(--size-scale-factor, 1))',
+          height: hasKeyChannels ? 'calc(42 / 52 * 100%)' : 'calc(38 / 52 * 100%)',
+          padding: '0 calc(3px * var(--size-scale-factor, 1)) 0 calc(3px * var(--size-scale-factor, 1))',
           boxSizing: 'border-box',
           position: 'absolute',
-          top: 0,
+          top: 'calc(3px * var(--size-scale-factor, 1))',
           left: 0,
         }}
       >
@@ -204,18 +200,14 @@ const StyledAccidentalKey: React.FC<Props> = ({ keyChannels }) => {
       <div
         style={{
           width: '100%',
-          padding:
-            '0 calc(1px * var(--size-scale-factor, 1)) calc(5px * var(--size-scale-factor, 1)) calc(2px * var(--size-scale-factor, 1))',
+          paddingTop: 0,
+          paddingRight: 'calc(1px * var(--size-scale-factor, 1))',
+          paddingLeft: 'calc(2px * var(--size-scale-factor, 1))',
           boxSizing: 'border-box',
           position: 'absolute',
-          bottom: 0,
+          bottom: hasKeyChannels ? 'calc(4 / 52 * 100%)' : 'calc(8 / 52 * 100%)',
           left: 0,
-          height: hasKeyChannels
-            ? 'calc(4px * var(--size-scale-factor, 1))'
-            : 'calc(6px * var(--size-scale-factor, 1))',
-          paddingBottom: hasKeyChannels
-            ? 'calc(3px * var(--size-scale-factor, 1))'
-            : 'calc(5px * var(--size-scale-factor, 1))',
+          height: 'calc(1px * var(--size-scale-factor, 1))',
           opacity: hasKeyChannels ? 0.5 : '1',
         }}
       >
diff --git a/src/components/StyledNaturalKey/StyledNaturalKey.tsx b/src/components/StyledNaturalKey/StyledNaturalKey.tsx
index 703775f..50f0862 100644
--- a/src/components/StyledNaturalKey/StyledNaturalKey.tsx
+++ b/src/components/StyledNaturalKey/StyledNaturalKey.tsx
@@ -64,7 +64,7 @@ const StyledNaturalKey: React.FC<Props> = ({ keyChannels }) => {
           left: '0',
           maskImage: 'linear-gradient(to bottom, transparent, white)',
           WebkitMaskImage: 'linear-gradient(to bottom, transparent, white)',
-          backgroundColor: hasKeyChannels ? 'black' : LIGHT_COLOR,
+          backgroundColor: LIGHT_COLOR,
           opacity: hasKeyChannels ? 0.12 : 0.25,
         }}
       />
diff --git a/tsconfig.json b/tsconfig.json
index 2cdd745..564494b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,6 +11,7 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noImplicitReturns": true,
+    "noImplicitAny": true,
     "noFallthroughCasesInSwitch": true,
     "allowSyntheticDefaultImports": true,
     "moduleResolution": "node",