change preferences button icon to a hollow cog (see #919)

Signed-off-by: Martin Veillette <martin.veillette@gmail.com>
phetsims · Apr 11, 2023 · 2eda3a4 · 2eda3a4
1 parent ef0f521
commit 2eda3a4
Show file tree

Hide file tree

Showing 7 changed files with 1,530 additions and 7 deletions.
diff --git a/assets/preferencesIcon.ai b/assets/preferencesIcon.ai
diff --git a/images/license.json b/images/license.json
@@ -14,5 +14,21 @@
     "projectURL": "https://phet.colorado.edu",
     "license": "contact phethelp@colorado.edu",
     "notes": "created by Amy Rouinfar based on original icon from Font Awesome"
+  },
+  "preferencesIconOnWhite.png": {
+    "text": [
+      "Copyright 2023 University of Colorado Boulder"
+    ],
+    "projectURL": "https://phet.colorado.edu",
+    "license": "contact phethelp@colorado.edu",
+    "notes": "created by Amanda McGarry based on original icon from Font Awesome"
+  },
+  "preferencesIcon.png": {
+    "text": [
+      "Copyright 2023 University of Colorado Boulder"
+    ],
+    "projectURL": "https://phet.colorado.edu",
+    "license": "contact phethelp@colorado.edu",
+    "notes": "created by Amanda McGarry based on original icon from Font Awesome"
   }
-}
+}
diff --git a/images/preferencesIcon.png b/images/preferencesIcon.png
diff --git a/images/preferencesIconOnWhite.png b/images/preferencesIconOnWhite.png
diff --git a/images/preferencesIconOnWhite_png.ts b/images/preferencesIconOnWhite_png.ts
@@ -0,0 +1,8 @@
+/* eslint-disable */
+import asyncLoader from '../../phet-core/js/asyncLoader.js';
+
+const image = new Image();
+const unlock = asyncLoader.createLock( image );
+image.onload = unlock;
+image.src = 'data:image/png;base64,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';
+export default image;
diff --git a/images/preferencesIcon_png.ts b/images/preferencesIcon_png.ts
@@ -0,0 +1,8 @@
+/* eslint-disable */
+import asyncLoader from '../../phet-core/js/asyncLoader.js';
+
+const image = new Image();
+const unlock = asyncLoader.createLock( image );
+image.onload = unlock;
+image.src = 'data:image/png;base64,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';
+export default image;
diff --git a/js/preferences/NavigationBarPreferencesButton.ts b/js/preferences/NavigationBarPreferencesButton.ts
@@ -7,8 +7,9 @@
  */
 
 import optionize, { EmptySelfOptions } from '../../../phet-core/js/optionize.js';
-import { Color, Path } from '../../../scenery/js/imports.js';
-import userCogSolidShape from '../../../sherpa/js/fontawesome-5/userCogSolidShape.js';
+import { Color, Image } from '../../../scenery/js/imports.js';
+import preferencesIconOnWhite_png from '../../images/preferencesIconOnWhite_png.js'; // on a white navbar
+import preferencesIcon_png from '../../images/preferencesIcon_png.js'; // on a black navbar
 import Dialog from '../../../sun/js/Dialog.js';
 import PhetioCapsule from '../../../tandem/js/PhetioCapsule.js';
 import joist from '../joist.js';
@@ -49,8 +50,9 @@ class NavigationBarPreferencesButton extends JoistButton {
       }
     }, providedOptions );
 
-    const icon = new Path( userCogSolidShape, {
-      maxWidth: 25 * 0.85
+    const icon = new Image( preferencesIcon_png, {
+      scale: 0.145, // empirically determined to match the height of the P in PhET button, see https://github.com/phetsims/joist/issues/919
+      pickable: false
     } );
 
     super( icon, backgroundColorProperty, options );
@@ -67,7 +69,7 @@ class NavigationBarPreferencesButton extends JoistButton {
 
     // change the icon so that it is visible when the background changes from dark to light
     backgroundColorProperty.link( backgroundColor => {
-      icon.fill = backgroundColor.equals( Color.BLACK ) ? 'white' : 'black';
+      icon.image = backgroundColor.equals( Color.BLACK ) ? preferencesIcon_png : preferencesIconOnWhite_png;
     } );
 
     // pdom - Signal to screen readers that the button will open a dialog. For some reason, this also seems to
@@ -79,4 +81,4 @@ class NavigationBarPreferencesButton extends JoistButton {
 }
 
 joist.register( 'NavigationBarPreferencesButton', NavigationBarPreferencesButton );
-export default NavigationBarPreferencesButton;
+export default NavigationBarPreferencesButton;