From 811c88fc8362861bcaa5cb236a90430baca1c07f Mon Sep 17 00:00:00 2001 From: Andrew Nicolaou Date: Wed, 15 Jan 2020 11:45:37 +0100 Subject: [PATCH] Description should be inactive color if a collection doesn't have one --- client/modules/IDE/components/EditableInput.jsx | 3 ++- client/styles/components/_collection.scss | 2 ++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/client/modules/IDE/components/EditableInput.jsx b/client/modules/IDE/components/EditableInput.jsx index 6315839e..eef5e0b8 100644 --- a/client/modules/IDE/components/EditableInput.jsx +++ b/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(() => { diff --git a/client/styles/components/_collection.scss b/client/styles/components/_collection.scss index f374f46c..3a98f78d 100644 --- a/client/styles/components/_collection.scss +++ b/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'); }