Merge pull request #5607 from fsih/textBoxGray

Make the border of editable fields dashed gray for studios. Otherwise, make them match the fields on project pages

src/views/studio/studio-description.jsx

@@ -12,6 +12,7 @@ import {
     Errors, mutateStudioDescription, selectIsMutatingDescription, selectDescriptionMutationError
 } from '../../redux/studio-mutations';
 
+import '../../components/forms/inplace-input.scss';
 import ValidationMessage from '../../components/forms/validation-message.jsx';
 import decorateText from '../../lib/decorate-text.jsx';
 import StudioMuteEditMessage from './studio-mute-edit-message.jsx';
@@ -53,7 +54,7 @@ const StudioDescription = ({
                 <React.Fragment>
                     <textarea
                         rows="20"
-                        className={fieldClassName}
+                        className={classNames('inplace-textarea', fieldClassName)}
                         disabled={isMutating || isFetching || isMutedEditor}
                         defaultValue={description}
                         onBlur={e => {
@@ -68,7 +69,7 @@ const StudioDescription = ({
                     {showMuteMessage && <StudioMuteEditMessage />}
                 </React.Fragment>
             ) : (
-                <div className={fieldClassName}>
+                <div className={classNames('uneditable', fieldClassName)}>
                     {decorateText(description, {
                         usernames: true,
                         hashtags: false,

src/views/studio/studio-title.jsx

@@ -6,6 +6,7 @@ import classNames from 'classnames';
 import {FormattedMessage} from 'react-intl';
 import onClickOutside from 'react-onclickoutside';
 
+import '../../components/forms/inplace-input.scss';
 import {selectStudioTitle, selectIsFetchingInfo} from '../../redux/studio';
 import {selectCanEditInfo, selectShowEditMuteError} from '../../redux/studio-permissions';
 import {Errors, mutateStudioTitle, selectIsMutatingTitle, selectTitleMutationError} from '../../redux/studio-mutations';
@@ -48,7 +49,7 @@ const StudioTitle = ({
             {canEditInfo || isMutedEditor ? (
                 <React.Fragment>
                     <textarea
-                        className={fieldClassName}
+                        className={classNames('inplace-textarea', fieldClassName)}
                         disabled={isMutating || !canEditInfo || isFetching}
                         defaultValue={title}
                         onKeyDown={e => e.key === 'Enter' && e.target.blur()}

src/views/studio/studio.scss

@@ -126,10 +126,6 @@ $radius: 8px;
     }
 
     .studio-description {
-        background: $ui-blue-10percent;
-        padding: 15px 20px;
-        border-color: transparent;
-        border-radius: $radius;
         word-wrap: break-word;
         white-space: pre-wrap;
         width: 300px;
@@ -142,17 +138,26 @@ $radius: 8px;
                 height: 18rem;
             }
         }
-    }
 
-    /* Overrides for when title and description are editable textareas */
+        &.uneditable {
+            background: $ui-blue-10percent;
+            padding: 15px 20px;
+            border-color: transparent;
+            border-radius: $radius;
+        }
+
+    }
+    
+    /* Overrides for when title and description are editable textareas. These override inplace-input */
     textarea.studio-title, textarea.studio-description {
-        background: transparent;
         padding: 5px 8px;
-        border: 2px dashed $ui-blue-25percent;
-        border-radius: $radius;
-        resize: none;
         width: 300px;
-        box-sizing: border-box;
+        line-height: 1.2em;
+        &:not(:focus) {
+            background: transparent;
+            border: 2px dashed $ui-dark-gray;
+            border-radius: $radius;
+        }
     }
 
     .studio-image {