Make toggling on restore instead of a button

Author: davepagurek

client/modules/IDE/components/Preferences/index.jsx

@@ -23,7 +23,6 @@ import { p5SoundURL, useP5Version } from '../../hooks/useP5Version';
 import VersionPicker from '../VersionPicker';
 import { updateFileContent } from '../../actions/files';
 import { CmControllerContext } from '../../pages/IDEView';
-import Button from '../../../../common/Button';
 import Stars from '../Stars';
 
 export default function Preferences() {
@@ -531,7 +530,19 @@ export default function Preferences() {
                 <div className="preference__options">
                   <input
                     type="radio"
-                    onChange={() => updateHTML(versionInfo.setP5Sound(true))}
+                    onChange={() => {
+                      if (versionInfo.lastP5SoundURL) {
+                        // If the sketch previously used a nonstandard p5.sound
+                        // URL, restore that URL
+                        updateHTML(
+                          versionInfo.setP5SoundURL(versionInfo.lastP5SoundURL)
+                        );
+                        versionInfo.setLastP5SoundURL(undefined);
+                      } else {
+                        // Otherwise, turn on the default p5.sound URL
+                        updateHTML(versionInfo.setP5Sound(true));
+                      }
+                    }}
                     aria-label={t('Preferences.AutosaveOnARIA')}
                     name="soundaddon"
                     id="soundaddon-on"
@@ -567,16 +578,9 @@ export default function Preferences() {
                     {t('Preferences.Off')}
                   </label>
                   {versionInfo.lastP5SoundURL && (
-                    <Button
-                      onClick={() => {
-                        updateHTML(
-                          versionInfo.setP5SoundURL(versionInfo.lastP5SoundURL)
-                        );
-                        versionInfo.setLastP5SoundURL(undefined);
-                      }}
-                    >
+                    <span className="preference__warning">
                       {t('Preferences.UndoSoundVersion')}
-                    </Button>
+                    </span>
                   )}
                 </div>
               </div>

client/styles/abstracts/_variables.scss

@@ -86,6 +86,7 @@ $themes: (
     table-row-stripe-color-alternate: $medium-light,
     codefold-icon-open: url("../images/triangle-arrow-down.svg?byUrl"),
     codefold-icon-closed: url("../images/triangle-arrow-right.svg?byUrl"),
+    preferences-warning-color: $p5js-pink,
 
     table-button-color: $lightest,
     table-button-background-color: $middle-gray,
@@ -182,6 +183,7 @@ $themes: (
     table-row-stripe-color-alternate: $darker,
     codefold-icon-open: url("../images/triangle-arrow-down-white.svg?byUrl"),
     codefold-icon-closed: url("../images/triangle-arrow-right-white.svg?byUrl"),
+    preferences-warning-color: $yellow,
 
     table-button-color: $lightest,
     table-button-background-color: $middle-gray,
@@ -276,6 +278,7 @@ $themes: (
     table-row-stripe-color-alternate: $darker,
     codefold-icon-open: url("../images/triangle-arrow-down-white.svg?byUrl"),
     codefold-icon-closed: url("../images/triangle-arrow-right-white.svg?byUrl"),
+    preferences-warning-color: $yellow,
 
     table-button-color: $dark,
     table-button-background-color: $middle-gray,

client/styles/components/_preferences.scss

@@ -137,6 +137,13 @@
   }
 }
 
+.preference__warning {
+  @include themify() {
+    font-weight: bold;
+    color: getThemifyVariable("preferences-warning-color");
+  }
+}
+
 .preference__radio-button {
   @extend %hidden-element;
 }

translations/locales/en-US/translations.json

@@ -220,7 +220,7 @@
     "SoundAddon": "p5.sound.js Addon",
     "PreloadAddon": "p5.js 2.0 Addon - Preload",
     "ShapesAddon": "p5.js 2.0 Addon - Shapes",
-    "UndoSoundVersion": "Put back previous p5.sound.js version"
+    "UndoSoundVersion": "Want to use p5.sound.js again? Turning it back on will restore the version you were using before."
   },
   "KeyboardShortcuts": {
     "Title": " Keyboard Shortcuts",