Merge branch 'develop' into fix/password-toggle-accessibility-3850

Author: raclim

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,8 +1,13 @@
-Fixes #issue-number
+### Context or Issue Number:
+<!-- Please add the issue this relates to if one is available. Otherwise please describe the current state of the codebase and what this PR attempts to fix. -->
 
-Changes:
+### Demo:
+<!-- Please add a screenshot for UI related changes -->
 
-I have verified that this pull request:
+### Changes:
+<!-- Summarise your changes -->
+
+### I have verified that this pull request:
 
 * [ ] has no linting errors (`npm run lint`)
 * [ ] has no test errors (`npm run test`)

client/modules/IDE/pages/IDEView.jsx

@@ -28,6 +28,7 @@ import IDEOverlays from '../components/IDEOverlays';
 import useIsMobile from '../hooks/useIsMobile';
 import Banner from '../components/Banner';
 import { P5VersionProvider } from '../hooks/useP5Version';
+import { stopSketch } from '../actions/ide';
 
 const BANNER_DISMISS_KEY = 'bannerLastDismissedAt';
 const BANNER_COOLDOWN_MINUTES = 30;
@@ -158,6 +159,17 @@ const IDEView = () => {
       }
     };
   }, [shouldAutosave, dispatch]);
+  const prevIsMobile = useRef(isMobile);
+
+  useEffect(() => {
+    if (prevIsMobile.current !== isMobile) {
+      prevIsMobile.current = isMobile;
+
+      if (ide.isPlaying) {
+        dispatch(stopSketch());
+      }
+    }
+  }, [isMobile, ide.isPlaying, dispatch]);
 
   useEffect(() => {
     const updateInnerWidth = (e) => {

client/styles/abstracts/_placeholders.scss

@@ -34,15 +34,15 @@
 
 %icon-toast{
 	@include themify() {
-		color: $toast-text-color
+		color: getThemifyVariable('toast-text-color');
 		& g, & path {
-			fill: $toast-text-color
+			fill: getThemifyVariable('toast-text-color');
 		}
 		&:hover {
-			color: getThemifyVariable('icon-toast-hover-color');
+			color: getThemifyVariable('toast-text-color');
 			& g, & path {
 				opacity: 1;
-				fill: getThemifyVariable('icon-toast-hover-color');
+				fill: getThemifyVariable('toast-text-color');
 			}
 		}
 	}

client/styles/abstracts/_variables.scss

@@ -55,7 +55,6 @@ $themes: (
     modal-border-color: $middle-light,
     icon-color: $middle-gray,
     icon-hover-color: $darker,
-    icon-toast-hover-color: $lightest,
     shadow-color: rgba(0, 0, 0, 0.16),
     console-background-color: $light,
     console-input-background-color: $lightest,
@@ -130,6 +129,9 @@ $themes: (
     admonition-border: #22C8ED,
     admonition-background: #E4F8FF,
     admonition-text: #075769,
+
+    toast-background-color: $medium-dark,
+    toast-text-color: $lightest,
   ),
   dark: (
     logo-color: $p5js-pink,
@@ -156,7 +158,6 @@ $themes: (
     modal-border-color: $middle-dark,
     icon-color: $middle-light,
     icon-hover-color: $lightest,
-    icon-toast-hover-color: $lightest,
     shadow-color: rgba(0, 0, 0, 0.16),
     console-background-color: $dark,
     console-input-background-color: $darker,
@@ -229,6 +230,9 @@ $themes: (
     admonition-border: #22C8ED,
     admonition-background: #105A7F,
     admonition-text: #FFFFFF,
+
+    toast-background-color: $medium-light,
+    toast-text-color: $dark,
   ),
   contrast: (
     logo-color: $yellow,
@@ -255,7 +259,6 @@ $themes: (
     modal-border-color: $middle-dark,
     icon-color: $medium-light,
     icon-hover-color: $yellow,
-    icon-toast-hover-color: $yellow,
     shadow-color: rgba(0, 0, 0, 0.16),
     console-background-color: $dark,
     console-input-background-color: $darker,
@@ -328,9 +331,9 @@ $themes: (
     admonition-border: #22C8ED,
     admonition-background: #000000,
     admonition-text: #ffffff,
-  )
-);
 
-$toast-background-color: $medium-dark;
-$toast-text-color: $lightest;
+    toast-background-color: $medium-light,
+    toast-text-color: $darker,
 
+  )
+);

client/styles/components/_toast.scss

@@ -1,8 +1,10 @@
 @use "sass:math";
 
 .toast {
-  background-color: $toast-background-color;
-  color: $toast-text-color;
+  @include themify() {
+    color: getThemifyVariable('toast-text-color');
+    background-color: getThemifyVariable('toast-background-color');
+  }
   padding: #{math.div(10, $base-font-size)}rem;
   position: fixed;
   top: 0;

contributor_docs/s3_configuration.md

@@ -21,7 +21,8 @@
     }
 ]
 ```
-3. In permissions, add the following bucket policy. Change "YOUR_BUCKET_NAME" to reflect name of the S3 bucket.
+3. Uncheck "Block all public access" under "Block public access (bucket settings)".
+4. In permissions, add the following bucket policy. Change "YOUR_BUCKET_NAME" to reflect name of the S3 bucket.
 ```
 {
 	"Version": "2008-10-17",
@@ -39,7 +40,6 @@
 	]
 }
 ```
-4. Uncheck "Block all public access" under "Block public access (bucket settings)".
 5. Under "Object Ownership", check "ACLs enabled" and set "Object Ownership" to "Object writer"
 6. Locate your AWS key and Secret Key. You can find this in the top AWS navigation under your name -> Security Credentials.
 7. Update the following lines to your .env file:
@@ -48,6 +48,7 @@ AWS_ACCESS_KEY={AWS_ACCESS_KEY}
 AWS_REGION={S3_BUCKET_REGION}
 AWS_SECRET_KEY={AWS_SECRET_KEY}
 S3_BUCKET={S3_BUCKET_NAME}
+S3_BUCKET_URL_BASE=https://{S3_BUCKET_NAME}.s3.{S3_BUCKET_REGION}.amazonaws.com/
 ```
 
 If your S3 bucket is in the US East (N Virginia) region (us-east-1), you'll