Merge remote-tracking branch 'upstream/develop' into refactor/AddToCollectionList

# Conflicts:
#	client/modules/IDE/components/AddToCollectionList.jsx

Author: lindapaiste

client/modules/IDE/components/AddToCollectionList.jsx

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
+import styled from 'styled-components';
 import Loader from '../../App/components/loader';
 import {
   addToCollection,
@@ -11,6 +12,20 @@ import {
 } from '../actions/collections';
 import getSortedCollections from '../selectors/collections';
 import QuickAddList from './QuickAddList';
+import { remSize } from '../../../theme';
+
+export const CollectionAddSketchWrapper = styled.div`
+  width: ${remSize(600)};
+  max-width: 100%;
+  overflow: auto;
+`;
+
+export const QuickAddWrapper = styled.div`
+  width: ${remSize(600)};
+  max-width: 100%;
+  padding: ${remSize(24)};
+  height: 100%;
+`;
 
 const AddToCollectionList = ({ projectId }) => {
   const { t } = useTranslation();
@@ -60,14 +75,14 @@ const AddToCollectionList = ({ projectId }) => {
   };
 
   return (
-    <div className="collection-add-sketch">
-      <div className="quick-add-wrapper">
+    <CollectionAddSketchWrapper>
+      <QuickAddWrapper>
         <Helmet>
           <title>{t('AddToCollectionList.Title')}</title>
         </Helmet>
         {getContent()}
-      </div>
-    </div>
+      </QuickAddWrapper>
+    </CollectionAddSketchWrapper>
   );
 };
 

client/modules/IDE/components/AddToCollectionSketchList.jsx

@@ -12,6 +12,10 @@ import * as SortingActions from '../actions/sorting';
 import getSortedSketches from '../selectors/projects';
 import Loader from '../../App/components/loader';
 import QuickAddList from './QuickAddList';
+import {
+  CollectionAddSketchWrapper,
+  QuickAddWrapper
+} from './AddToCollectionList';
 
 class SketchList extends React.Component {
   constructor(props) {
@@ -81,14 +85,14 @@ class SketchList extends React.Component {
     }
 
     return (
-      <div className="collection-add-sketch">
-        <div className="quick-add-wrapper">
+      <CollectionAddSketchWrapper>
+        <QuickAddWrapper>
           <Helmet>
             <title>{this.getSketchesTitle()}</title>
           </Helmet>
           {content}
-        </div>
-      </div>
+        </QuickAddWrapper>
+      </CollectionAddSketchWrapper>
     );
   }
 }

client/modules/IDE/components/Editor.jsx

@@ -44,6 +44,7 @@ import '../../../utils/htmlmixed';
 import '../../../utils/p5-javascript';
 import Timer from '../components/Timer';
 import EditorAccessibility from '../components/EditorAccessibility';
+import { selectActiveFile } from '../selectors/files';
 import AssetPreview from './AssetPreview';
 import { metaKey } from '../../../utils/metaKey';
 import './show-hint';
@@ -605,10 +606,7 @@ Editor.propTypes = {
 function mapStateToProps(state) {
   return {
     files: state.files,
-    file:
-      state.files.find((file) => file.isSelectedFile) ||
-      state.files.find((file) => file.name === 'sketch.js') ||
-      state.files.find((file) => file.name !== 'root'),
+    file: selectActiveFile(state),
     htmlFile: getHTMLFile(state.files),
     ide: state.ide,
     preferences: state.preferences,

client/modules/IDE/components/Header/Nav.jsx

@@ -14,6 +14,7 @@ import { setLanguage } from '../../actions/preferences';
 import NavBar from '../../../../components/Nav/NavBar';
 import CaretLeftIcon from '../../../../images/left-arrow.svg';
 import LogoIcon from '../../../../images/p5js-logo-small.svg';
+import { selectRootFile } from '../../selectors/files';
 import { selectSketchPath } from '../../selectors/project';
 import { metaKey, metaKeyName } from '../../../../utils/metaKey';
 import { useSketchActions } from '../../hooks';
@@ -102,17 +103,14 @@ const DashboardMenu = () => {
   );
 };
 
-const ProjectMenu = (props) => {
+const ProjectMenu = () => {
   const isUserOwner = useSelector(getIsUserOwner);
   const project = useSelector((state) => state.project);
   const user = useSelector((state) => state.user);
 
   const isUnsaved = !project?.id;
 
-  // TODO: use selectRootFile selector
-  const rootFile = useSelector(
-    (state) => state.files.filter((file) => file.name === 'root')[0]
-  );
+  const rootFile = useSelector(selectRootFile);
 
   const cmRef = useContext(CmControllerContext);