Differentiate between uneditable and un-highlighted properties in the modifications menu

src/app/components/Modification.jsx

@@ -72,6 +72,11 @@ export default class Modification extends TranslatedComponent {
       return null;
     }
 
+    let inputClassNames = {
+      'cb': true,
+      'greyed-out': !this.props.highlight
+    };
+
     return (
       <div onBlur={this._updateFinished.bind(this)} key={name}
         className={cn('cb', 'modification-container')}
@@ -84,12 +89,12 @@ export default class Modification extends TranslatedComponent {
               <td className={'input-container'}>
                 <span>
                   {this.props.editable ?
-                    <NumberEditor className={'cb'} value={this.state.value}
+                    <NumberEditor className={cn(inputClassNames)} value={this.state.value}
                       decimals={2} style={{ textAlign: 'right' }} step={0.01}
                       stepModifier={1} onKeyDown={ this.props.onKeyDown }
                       onValueChange={this._updateValue.bind(this)} /> :
                     <input type="text" value={formats.f2(this.state.value)}
-                      disabled className={'number-editor'}
+                      disabled className={cn('number-editor', 'greyed-out')}
                       style={{ textAlign: 'right', cursor: 'inherit' }}/>
                   }
                   <span className={'unit-container'}>

src/app/components/ModificationsMenu.jsx

@@ -214,11 +214,11 @@ export default class ModificationsMenu extends TranslatedComponent {
     for (const modName of Modifications.modules[m.grp].modifications) {
       if (!Modifications.modifications[modName].hidden) {
         const key = modName + (m.getModValue(modName) / 100 || 0);
-        const editable = modName !== 'fallofffromrange' &&
-          m.blueprint.grades[m.blueprint.grade].features[modName];
+        const editable = modName !== 'fallofffromrange';
+        const highlight = m.blueprint.grades[m.blueprint.grade].features[modName];
         this.lastNeId = modName;
-        (editable ? modifiableModifications : modifications).push(
-          <Modification key={ key } ship={ ship } m={ m }
+        (editable && highlight ? modifiableModifications : modifications).push(
+          <Modification key={ key } ship={ ship } m={ m } highlight={highlight}
             value={m.getPretty(modName) || 0} modItems={this.modItems}
             onChange={onChange} onKeyDown={this._keyDown} name={modName}
             editable={editable} handleModChange = {this._handleModChange} />

src/less/slot.less

@@ -74,7 +74,7 @@
     border-color:#fff;
   }
 
-  input:disabled {
+  input.greyed-out {
     border-color: #888;
     color: #888;
   }