Use gear icon

Author: davepagurek

client/modules/IDE/components/VersionIndicator.jsx

@@ -5,7 +5,7 @@ import { useDispatch } from 'react-redux';
 import { openPreferences } from '../actions/ide';
 import { setPreferencesTab } from '../actions/preferences';
 import { prop } from '../../../theme';
-import EditIcon from '../../../images/pencil.svg';
+import EditIcon from '../../../images/preferences.svg';
 
 import { useP5Version } from '../hooks/useP5Version';
 
@@ -19,6 +19,9 @@ const VersionPickerButton = styled.button`
   & svg {
     vertical-align: middle;
     margin-bottom: 2px;
+    margin-left: 0.5rem;
+    width: 1rem;
+    height: 1rem;
   }
 
   &:hover path {
@@ -41,11 +44,7 @@ const VersionIndicator = () => {
       {t('Toolbar.LibraryVersion')}
        
       {versionInfo?.version || t('Toolbar.CustomLibraryVersion')}
-      <EditIcon
-        className="editable-input__icon"
-        focusable="false"
-        aria-hidden="true"
-      />
+      <EditIcon focusable="false" aria-hidden="true" />
     </VersionPickerButton>
   );
 };

client/modules/IDE/components/VersionPicker.jsx

@@ -38,7 +38,7 @@ const VersionDropdownMenu = styled(DropdownMenu)`
     padding: 0;
   }
 
-  margin-bottom: 1rem;
+  margin-bottom: 0.5rem;
 `;
 
 const VersionPicker = React.forwardRef(({ onChangeVersion }, ref) => {

translations/locales/en-US/translations.json

@@ -222,9 +222,9 @@
     "CustomVersionInfo": "The version of p5.js is currently being managed in the code of index.html. This means it can't be adjusted from this tab.",
     "CustomVersionReset": "If you'd like to use the default libraries, you can replace the script tags in index.html with the following:",
     "SoundAddon": "p5.sound.js Addon",
-    "PreloadAddon": "p5.js 1.x Compatibility Add-on — Preload",
-    "ShapesAddon": "p5.js 1.x Compatibility Add-on — Shapes",
-    "DataAddon": "p5.js 1.x Compatibility Add-on — Data Structures",
+    "PreloadAddon": "p5.js 1.x Compatibility Addon — Preload",
+    "ShapesAddon": "p5.js 1.x Compatibility Addon — Shapes",
+    "DataAddon": "p5.js 1.x Compatibility Addon — Data Structures",
     "AddonOnARIA": "on",
     "AddonOffARIA": "off",
     "UndoSoundVersion": "Want to use p5.sound.js again? Turning it back on will restore the version you were using before.",