fix some styles

src/scss/Variables.scss

@@ -1,3 +1,5 @@
+@import '~nes.css/scss/base/color-palette';
+
 $game-boy-1: #e3eec0;
 $game-boy-2: #aeba89;
 $game-boy-3: #5e6745;
@@ -28,7 +30,7 @@ $custom-hover: #e8e8e8;
 $custom-medium: #939393;
 $custom-dark: #3d3d3d;
 
-$nes-dark: #212529;
+$nes-dark: $color-black;
 
 // $main-background-color: $custom-light;
 // $main-font-primary-color: $custom-dark;

src/scss/index.scss

@@ -1,5 +1,6 @@
 @import './Variables.scss';
 @import './sprites.scss';
+@import '~nes.css/scss/utilities/icon-mixin';
 
 html,
 body {
@@ -36,34 +37,57 @@ body {
   color: $main-font-primary-color;
 }
 
-button.nes-btn:disabled,
-button.nes-btn:disabled:hover {
-  background-color: $main-font-secondary-color;
-  color: $main-hover-color;
-  box-shadow: none;
-}
-
 a.active:not([href]):not([tabindex]) {
   color: $main-active-font-color;
 }
 
 a.list-item {
   position: relative;
+  margin-right: 20px;
+
+  // borrowed from @import '~nes.css/scss/elements/radios';
+
+  $radio: (
+    (1,1,0,0,0,0),
+    (1,1,1,1,0,0),
+    (1,1,1,1,1,0),
+    (1,1,1,1,1,1),
+    (1,1,1,1,1,0),
+    (1,1,1,1,0,0),
+    (1,1,0,0,0,0),
+  );
+  $radio-checked-focus: (
+    (2,2,0,0,0,0),
+    (2,2,2,2,0,0),
+    (2,2,2,2,2,0),
+    (2,2,2,2,2,2),
+    (2,2,2,2,2,0),
+    (2,2,2,2,0,0),
+    (2,2,0,0,0,0),
+  );
+  $colors: ($main-font-primary-color, $main-active-font-color);
 
   &.active,
   &:hover {
     &::before {
-      content: "\A";
-      border-style: solid;
-      border-width: 7px 0 7px 11px;
-      border-color: transparent transparent transparent $main-font-primary-color;
       position: absolute;
-      left: 8px;
+      top: 3px;
+      left: 4px;
+      content: "";
+
+      @include pixelize($radio, $colors, 2px);
+    }
+  }
+
+  &:focus,
+  &:hover {
+    &::before {
+      animation: blink 1s infinite steps(1);
     }
   }
 
   &.active::before {
-    border-color: transparent transparent transparent $main-active-font-color;
+    @include pixelize($radio-checked-focus, $colors, 2px);
   }
 }
 
@@ -96,8 +120,19 @@ a.list-item {
 .nes-input,
 .nes-textarea {
   background-color: $main-background-color;
-  outline-color: $main-font-secondary-color;
+
-  box-shadow: 0 4px $main-border-color, 0 -4px $main-border-color, 4px 0 $main-border-color, -4px 0 $main-border-color;
+  // borrowed from @import '~nes.css/scss/elements/inputs';
+
+  @mixin border-style($border, $outline) {
+    outline-color: $outline;
+    box-shadow:
+      0 4px $border,
+      0 -4px $border,
+      4px 0 $border,
+      -4px 0 $border;
+  }
+
+  @include border-style($main-border-color, $main-font-secondary-color);
 
   &::placeholder {
     color: $main-font-secondary-color;

src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx

@@ -168,11 +168,16 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
         const leaugeRankCss = classNames(
             styles.leaguePokemonRank,
             containerCss,
-            { 'with-title': false }
+            {
+                'with-title': false
+            }
         );
         const maxButtonCss = classNames(
             'nes-btn',
-            'is-primary'
+            {
+                'is-primary': individualValues.hp !== null && individualValues.atk !== null && individualValues.def !== null,
+                'is-disabled': individualValues.hp === null || individualValues.atk === null || individualValues.def === null,
+            }
         );
 
         const pokemonIconCss = classNames(
@@ -182,23 +187,32 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
             }
         );
 
-        const progressStaminaCss = classNames('nes-progress', {
+        const progressStaminaCss = classNames(
-            'is-success': leaguePokemon.statsRank.staminaRank > 66,
+            'nes-progress',
-            'is-warning': leaguePokemon.statsRank.staminaRank >= 34 && leaguePokemon.statsRank.staminaRank <= 66,
+            {
-            'is-error': leaguePokemon.statsRank.staminaRank < 34,
+                'is-success': leaguePokemon.statsRank.staminaRank > 66,
-        });
+                'is-warning': leaguePokemon.statsRank.staminaRank >= 34 && leaguePokemon.statsRank.staminaRank <= 66,
+                'is-error': leaguePokemon.statsRank.staminaRank < 34,
+            }
+        );
 
-        const progressAttackCss = classNames('nes-progress', {
+        const progressAttackCss = classNames(
-            'is-success': leaguePokemon.statsRank.attackRank > 66,
+            'nes-progress',
-            'is-warning': leaguePokemon.statsRank.attackRank >= 34 && leaguePokemon.statsRank.attackRank <= 66,
+            {
-            'is-error': leaguePokemon.statsRank.attackRank < 34,
+                'is-success': leaguePokemon.statsRank.attackRank > 66,
-        });
+                'is-warning': leaguePokemon.statsRank.attackRank >= 34 && leaguePokemon.statsRank.attackRank <= 66,
+                'is-error': leaguePokemon.statsRank.attackRank < 34,
+            }
+        );
 
-        const progressDefenseCss = classNames('nes-progress', {
+        const progressDefenseCss = classNames(
-            'is-success': leaguePokemon.statsRank.defenseRank > 66,
+            'nes-progress',
-            'is-warning': leaguePokemon.statsRank.defenseRank >= 34 && leaguePokemon.statsRank.defenseRank <= 66,
+            {
-            'is-error': leaguePokemon.statsRank.defenseRank < 34,
+                'is-success': leaguePokemon.statsRank.defenseRank > 66,
-        });
+                'is-warning': leaguePokemon.statsRank.defenseRank >= 34 && leaguePokemon.statsRank.defenseRank <= 66,
+                'is-error': leaguePokemon.statsRank.defenseRank < 34,
+            }
+        );
 
         const baseStamina : number = leaguePokemon.stats.baseStamina;
         const baseAttack : number = leaguePokemon.stats.baseAttack;
@@ -332,7 +346,6 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
                             <button
                                 type="button"
                                 className={ maxButtonCss }
-                                disabled={ individualValues.hp === null || individualValues.atk === null || individualValues.def === null }
                                 onClick={ this.handleClickMaximizeLevel }
                             >
                                 MAX LEAGUE Lv