Add pencil icon next to p5 version

Author: davepagurek

client/images/pencil.svg

@@ -4,15 +4,26 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import { openPreferences } from '../actions/ide';
 import { setPreferencesTab } from '../actions/preferences';
-import { remSize, prop } from '../../../theme';
+import { prop } from '../../../theme';
+import EditIcon from '../../../images/pencil.svg';
 
 import { useP5Version } from '../hooks/useP5Version';
 
 const VersionPickerButton = styled.button`
   color: ${prop('Button.primary.default.foreground')};
+
   &:hover {
     color: ${prop('Button.primary.hover.background')} !important;
   }
+
+  & svg {
+    vertical-align: middle;
+    margin-bottom: 2px;
+  }
+
+  &:hover path {
+    fill: currentColor !important;
+  }
 `;
 
 const VersionIndicator = () => {
@@ -30,6 +41,11 @@ const VersionIndicator = () => {
       {t('Toolbar.LibraryVersion')}
        
       {versionInfo?.version || t('Toolbar.CustomLibraryVersion')}
+      <EditIcon
+        className="editable-input__icon"
+        focusable="false"
+        aria-hidden="true"
+      />
     </VersionPickerButton>
   );
 };

client/modules/IDE/components/VersionIndicator.jsx

@@ -157,7 +157,7 @@
     "EditSketchARIA": "Edit sketch name",
     "NewSketchNameARIA": "New sketch name",
     "By": " by ",
-    "LibraryVersion": "p5.js Version:",
+    "LibraryVersion": "p5.js version:",
     "CustomLibraryVersion": "Custom"
   },
   "Console": {