Merge branch 'develop' into nityam/fix-aria-live-login-error-#3874

Author: Nixxx19

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;