revert class removal for cleaner diff and merge #185

app/components/elements/ReplyEditor.jsx

@@ -283,24 +283,29 @@ class ReplyEditor extends React.Component {
             </div>
         }
 
+        // TODO: remove all references to these vframe classes. Removed from css and no longer needed.
+        const vframe_class = isStory ? 'vframe' : '';
+        const vframe_section_class = isStory ? 'vframe__section' : '';
+        const vframe_section_shrink_class = isStory ? 'vframe__section--shrink' : '';
+
         return (
             <div className="ReplyEditor row">
                 <div className="column small-12">
-                    <form
+                    <form className={vframe_class}
                         onSubmit={handleSubmit(data => {
                             const loadingCallback = () => this.setState({loading: true, postError: undefined})
                             reply({ ...data, ...replyParams, loadingCallback })
                         })}
                         onChange={() => {this.setState({ postError: null })}}
                     >
-                        <div>
+                        <div className={vframe_section_shrink_class}>
                             {isStory && <span>
                                 <input type="text" {...cleanReduxInput(title)} onChange={onTitleChange} disabled={loading} placeholder="Title" autoComplete="off" ref="titleRef" tabIndex={1} />
                                 {titleError}
                             </span>}
                         </div>
 
-                        <div className="ReplyEditor__body">
+                        <div className={'ReplyEditor__body ' + (rte ? `rte ${vframe_section_class}` : vframe_section_shrink_class)}>
                             {!body.value && isStory &&
                                 <div className="float-right secondary" style={{marginRight: '1rem'}}>
                                     {rte && <a href="#" onClick={this.toggleRte}>Markdown</a>}
@@ -315,20 +320,20 @@ class ReplyEditor extends React.Component {
                                 <textarea {...cleanReduxInput(body)} disabled={loading} rows={isStory ? 10 : 3} placeholder={isStory ? 'Write your story...' : 'Reply'} autoComplete="off" ref="postRef" tabIndex={2} />
                             }
                         </div>
-                        <div>
+                        <div className={vframe_section_shrink_class}>
                             <div className="error">{body.touched && body.error && body.error !== 'Required' && body.error}</div>
                         </div>
 
-                        <div style={{marginTop: '0.5rem'}}>
+                        <div className={vframe_section_shrink_class} style={{marginTop: '0.5rem'}}>
                             {hasCategory && <span>
                                 <CategorySelector {...category} disabled={loading} isEdit={isEdit} tabIndex={3} />
                                 <div className="error">{category.touched && category.error && category.error}&nbsp;</div>
                             </span>}
                         </div>
-                        <div>
+                        <div className={vframe_section_shrink_class}>
                             {postError && <div className="error">{postError}</div>}
                         </div>
-                        <div>
+                        <div className={vframe_section_shrink_class}>
                             {!loading && <button type="submit" className="button" disabled={submitting || invalid} tabIndex={4}>{isEdit ? 'Update Post' : postLabel}</button>}
                             {loading && <span><br /><LoadingIndicator type="circle" /></span>}
                             &nbsp; {!loading && this.props.onCancel &&
@@ -352,7 +357,7 @@ class ReplyEditor extends React.Component {
                                 </label>
                             </div>}
                         </div>
-                        {!loading && !rte && body.value && <div className="Preview">
+                        {!loading && !rte && body.value && <div className={'Preview ' + vframe_section_shrink_class}>
                             {<div className="float-right"><a target="_blank" href="https://guides.github.com/features/mastering-markdown/">Styling with Markdown is supported.</a></div>}
                             <h6>Preview</h6>
                             <MarkdownViewer formId={formId} text={body.value} canEdit jsonMetadata={jsonMetadata} large={isStory} noImage={noImage} />