Merge branch 'develop' into feature/urdu-translation

Author: ayeshag7

README.md

@@ -38,7 +38,7 @@ Issues and Pull Requests categorized under the PATCH or MINOR Release Milestones
 
 We will aim to deploy on a 1-2 month basis. Here are some dates we’re working towards: 
 
-2.11.0 MINOR Release: By December 22, 2023
+2.11.0 MINOR Release: By January 10, 2023
 
 [You can read more about Semantic Versioning and the differences between a MINOR and PATCH release](https://semver.org/). 
 

client/modules/IDE/components/AddToCollectionList.jsx

@@ -39,7 +39,7 @@ class CollectionList extends React.Component {
       props.getProject(props.projectId);
     }
 
-    this.props.getCollections(this.props.username);
+    this.props.getCollections(this.props.user.username);
 
     this.state = {
       hasLoadedData: false

client/modules/IDE/components/PreviewFrame.jsx

@@ -11,7 +11,7 @@ const Frame = styled.iframe`
   border-width: 0;
 `;
 
-function PreviewFrame({ fullView }) {
+function PreviewFrame({ fullView, isOverlayVisible }) {
   const iframe = useRef();
   const previewUrl = getConfig('PREVIEW_URL');
   useEffect(() => {
@@ -28,28 +28,36 @@ function PreviewFrame({ fullView }) {
     hid; microphone; magnetometer; midi; payment; usb; serial; vr; xr-spatial-tracking`;
 
   return (
-    <Frame
-      title="sketch preview"
-      src={frameUrl}
-      sandbox={sandboxAttributes}
-      allow={allow}
-      scrolling="auto"
-      allowtransparency
-      allowpaymentrequest
-      allowFullScreen
-      frameBorder="0"
-      ref={iframe}
-      fullView={fullView}
-    />
+    <>
+      <div
+        className="preview-frame-overlay"
+        style={{ display: isOverlayVisible ? 'block' : 'none' }}
+      />
+      <Frame
+        title="sketch preview"
+        src={frameUrl}
+        sandbox={sandboxAttributes}
+        allow={allow}
+        scrolling="auto"
+        allowtransparency
+        allowpaymentrequest
+        allowFullScreen
+        frameBorder="0"
+        ref={iframe}
+        fullView={fullView}
+      />
+    </>
   );
 }
 
 PreviewFrame.propTypes = {
-  fullView: PropTypes.bool
+  fullView: PropTypes.bool,
+  isOverlayVisible: PropTypes.bool
 };
 
 PreviewFrame.defaultProps = {
-  fullView: false
+  fullView: false,
+  isOverlayVisible: false
 };
 
 export default PreviewFrame;

client/modules/IDE/pages/IDEView.jsx

@@ -173,7 +173,9 @@ const IDEView = () => {
                     primary="second"
                     size={ide.consoleIsExpanded ? consoleSize : 29}
                     minSize={29}
-                    onChange={(size) => setConsoleSize(size)}
+                    onChange={(size) => {
+                      setConsoleSize(size);
+                    }}
                     allowResize={ide.consoleIsExpanded}
                     className="editor-preview-subpanel"
                   >
@@ -191,16 +193,10 @@ const IDEView = () => {
                       </h2>
                     </header>
                     <div className="preview-frame__content">
-                      <div
-                        className="preview-frame-overlay"
-                        style={{ display: isOverlayVisible ? 'block' : 'none' }}
+                      <PreviewFrame
+                        cmController={cmRef.current}
+                        isOverlayVisible={isOverlayVisible}
                       />
-                      <div>
-                        {((preferences.textOutput || preferences.gridOutput) &&
-                          ide.isPlaying) ||
-                          ide.isAccessibleOutputPlaying}
-                      </div>
-                      <PreviewFrame cmController={cmRef.current} />
                     </div>
                   </section>
                 </SplitPane>
@@ -215,11 +211,18 @@ const IDEView = () => {
                   split="horizontal"
                   primary="second"
                   minSize={200}
+                  onChange={() => {
+                    setIsOverlayVisible(true);
+                  }}
+                  onDragFinished={() => {
+                    setIsOverlayVisible(false);
+                  }}
                 >
                   <PreviewFrame
                     fullView
                     hide={!ide.isPlaying}
                     cmController={cmRef.current}
+                    isOverlayVisible={isOverlayVisible}
                   />
                   <Console />
                 </SplitPane>

client/styles/components/_toolbar.scss

@@ -144,6 +144,6 @@
 .checkbox__autorefresh{
 	cursor: pointer;
 	@include themify(){
-		color:getThemifyVariable('logo-color');
+		accent-color:getThemifyVariable('logo-color');
 	}
 }

contributor_docs/public_api.md

@@ -29,6 +29,18 @@ You must provide the version number when accessing the API.
 
 The API accepts and returns the following model objects, as JSON.
 
+## Enabling Access Token UI in Settings Page
+
+To enable the Access Token UI in the Settings page, follow these steps:
+
+1. Navigate to the `.env` file in your project.
+2. Locate the line specifying UI_ACCESS_TOKEN_ENABLED.
+3. Set the value to `true`, as shown below:
+
+```bash
+UI_ACCESS_TOKEN_ENABLED=true
+```
+
 ## Sketch
 
 | Name  | Type              | Description                                                                          |
@@ -217,3 +229,5 @@ No body
 |---------------|-------------------------|
 | 200 OK        | Sketch has been deleted |
 | 404 Not Found | Sketch does not exist   |
+
+