can't upload media if not logged in

client/modules/IDE/components/NewFileModal.js

@@ -15,7 +15,7 @@ import FileUploader from './FileUploader';
 function NewFileModal(props) {
   const modalClass = classNames({
     modal: true,
-    'modal--hidden': !props.isVisible
+    'modal--reduced': !props.canUploadMedia
   });
 
   return (
@@ -28,16 +28,25 @@ function NewFileModal(props) {
           </button>
         </div>
         <NewFileForm {...props} />
-        <p className="modal__divider">OR</p>
-        <FileUploader />
+        {(() => {
+          if (props.canUploadMedia) {
+            return (
+              <div>
+                <p className="modal__divider">OR</p>
+                <FileUploader />
+              </div>
+            );
+          }
+          return '';
+        })()}
       </div>
     </section>
   );
 }
 
 NewFileModal.propTypes = {
-  isVisible: PropTypes.bool.isRequired,
-  closeModal: PropTypes.func.isRequired
+  closeModal: PropTypes.func.isRequired,
+  canUploadMedia: PropTypes.bool.isRequired
 };
 
 function mapStateToProps(state) {

client/modules/IDE/pages/IDEView.js

@@ -90,7 +90,7 @@ class IDEView extends React.Component {
           if (this.props.ide.modalIsVisible) {
             return (
               <NewFileModal
-                isVisible={this.props.ide.modalIsVisible}
+                canUploadMedia={this.props.user.authenticated}
                 closeModal={this.props.closeNewFileModal}
               />
             );
@@ -107,7 +107,9 @@ IDEView.propTypes = {
     project_id: PropTypes.string
   }),
   getProject: PropTypes.func.isRequired,
-  user: PropTypes.object.isRequired,
+  user: PropTypes.shape({
+    authenticated: PropTypes.bool.isRequired
+  }).isRequired,
   createProject: PropTypes.func.isRequired,
   saveProject: PropTypes.func.isRequired,
   ide: PropTypes.shape({

client/styles/components/_modal.scss

@@ -5,16 +5,15 @@
   z-index: 100;
 }
 
-.modal--hidden {
-  display: none;
-}
-
 .modal-content {
   border: 1px solid $light-modal-border-color;
   background-color: $light-button-background-color;
   height: #{400 / $base-font-size}rem;
   width: #{400 / $base-font-size}rem;
   padding: #{20 / $base-font-size}rem;
+  .modal--reduced & {
+    height: #{150 / $base-font-size}rem;
+  }
 }
 
 .modal__exit-button {