From 8f6006c19fb368aba26277794d999b6038b5cbae Mon Sep 17 00:00:00 2001
From: Lukas Martinelli <me@lukasmartinelli.ch>
Date: Sun, 15 Jan 2017 17:10:38 +0100
Subject: [PATCH] Less opacity for default values #73

---
 src/components/fields/ZoomSpecField.jsx | 10 ++++------
 src/styles/_layer.scss                  |  5 +++++
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/fields/ZoomSpecField.jsx b/src/components/fields/ZoomSpecField.jsx
index f1a862ce..42c838e8 100644
--- a/src/components/fields/ZoomSpecField.jsx
+++ b/src/components/fields/ZoomSpecField.jsx
@@ -132,7 +132,6 @@ export default class ZoomSpecProperty  extends React.Component {
     if(this.props.fieldSpec['zoom-function']) {
       zoomBtn = <MakeZoomFunctionButton onClick={this.makeZoomFunction.bind(this)} />
     }
-
     return <InputBlock
       doc={this.props.fieldSpec.doc}
       label={labelFromFieldName(this.props.fieldName)}
@@ -143,11 +142,10 @@ export default class ZoomSpecProperty  extends React.Component {
   }
 
   render() {
-    if(isZoomField(this.props.value)) {
-      return this.renderZoomProperty();
-    } else {
-      return this.renderProperty();
-    }
+    const propClass = this.props.fieldSpec.default === this.props.value ? "maputnik-default-property" : "maputnik-modified-property"
+    return <div className={propClass}>
+      {isZoomField(this.props.value) ? this.renderZoomProperty() : this.renderProperty()}
+    </div>
   }
 }
 
diff --git a/src/styles/_layer.scss b/src/styles/_layer.scss
index be4812d7..b8c6f942 100644
--- a/src/styles/_layer.scss
+++ b/src/styles/_layer.scss
@@ -129,3 +129,8 @@
     background-color: $color-gray;
   }
 }
+
+// PROPERTY
+.maputnik-default-property {
+  opacity: 0.4;
+}