Description should be inactive color if a collection doesn't have one

Author: andrewn

client/modules/IDE/components/EditableInput.jsx

@@ -14,7 +14,8 @@ function EditableInput({
   const [isEditing, setIsEditing] = React.useState(false);
   const [currentValue, setCurrentValue] = React.useState(value || '');
   const displayValue = currentValue || emptyPlaceholder;
-  const classes = `editable-input editable-input--${isEditing ? 'is-editing' : 'is-not-editing'}`;
+  const hasValue = currentValue !== '';
+  const classes = `editable-input editable-input--${isEditing ? 'is-editing' : 'is-not-editing'} editable-input--${hasValue ? 'has-value' : 'has-placeholder'}`;
   const inputRef = React.createRef();
 
   React.useEffect(() => {

client/styles/components/_collection.scss

@@ -67,7 +67,9 @@
 
 .collection-metadata__description .editable-input__label {
   text-align: left;
+}
 
+.collection-metadata__description .editable-input--has-value .editable-input__label  {
   @include themify() {
     color: getThemifyVariable('primary-text-color');
   }