improve editor error styling

decaporg · Dec 7, 2017 · f1e12cb · f1e12cb
1 parent f7365ae
commit f1e12cb
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git a/src/components/Editor/EditorControlPane/EditorControl.js b/src/components/Editor/EditorControlPane/EditorControl.js
@@ -54,6 +54,7 @@ export default class EditorControl extends React.Component {
           classNameWrapper={c({
             'nc-controlPane-widget': true,
             'nc-controlPane-widgetActive': this.state.styleActive,
+            'nc-controlPane-widgetError': !!errors,
           })}
           classNameWidget="nc-controlPane-widget"
           classNameWidgetActive="nc-controlPane-widgetNestable"

diff --git a/src/components/Editor/EditorControlPane/EditorControlPane.css b/src/components/Editor/EditorControlPane/EditorControlPane.css
@@ -85,13 +85,18 @@ select.nc-controlPane-widget {
 }
 
 .nc-controlPane-labelWithError {
-  color: #FF706F;
+  background-color: var(--colorErrorText);
+  color: #fff;
+}
+
+.nc-controlPane-widgetError {
+  border-color: var(--colorErrorText);
 }
 
 .nc-controlPane-errors {
   list-style-type: none;
   font-size: 12px;
-  color: #FF706F;
+  color: var(--colorErrorText);
   margin-bottom: 5px;
   text-align: right;
   text-transform: uppercase;

diff --git a/src/components/Editor/EditorControlPane/Widget.js b/src/components/Editor/EditorControlPane/Widget.js
@@ -43,7 +43,7 @@ export default class Widget extends Component {
       return this.wrappedControlShouldComponentUpdate(nextProps);
     }
     return this.props.value !== nextProps.value
-      || this.props.className !== nextProps.className
+      || this.props.classNameWrapper !== nextProps.classNameWrapper
       || this.props.hasActiveStyle !== nextProps.hasActiveStyle;
   }
 
@@ -174,7 +174,6 @@ export default class Widget extends Component {
       onAddAsset,
       onRemoveInsertedMedia,
       getAsset,
-      className,
       classNameWrapper,
       classNameWidget,
       classNameWidgetActive,
@@ -198,7 +197,6 @@ export default class Widget extends Component {
       getAsset,
       forID: field.get('name'),
       ref: this.processInnerControlRef,
-      className,
       classNameWrapper,
       classNameWidget,
       classNameWidgetActive,