Move version indicator to the toolbar

Author: davepagurek

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

@@ -576,9 +576,6 @@ class Editor extends React.Component {
                   </span>
                   <Timer />
                 </div>
-                <div className="editor__library-version">
-                  <VersionIndicator />
-                </div>
               </div>
               <article
                 ref={(element) => {

client/modules/IDE/components/Header/Toolbar.jsx

@@ -20,6 +20,7 @@ import PlayIcon from '../../../../images/play.svg';
 import StopIcon from '../../../../images/stop.svg';
 import PreferencesIcon from '../../../../images/preferences.svg';
 import ProjectName from './ProjectName';
+import VersionIndicator from '../VersionIndicator';
 
 const Toolbar = (props) => {
   const { isPlaying, infiniteLoop, preferencesIsVisible } = useSelector(
@@ -113,6 +114,8 @@ const Toolbar = (props) => {
           return null;
         })()}
       </div>
+      <div style={{ flex: 1 }} />
+      <VersionIndicator />
       <button
         className={preferencesButtonClass}
         onClick={() => dispatch(openPreferences())}

client/modules/IDE/components/VersionIndicator.jsx

@@ -5,12 +5,13 @@ import { useDispatch } from 'react-redux';
 import { openPreferences } from '../actions/ide';
 import { setPreferencesTab } from '../actions/preferences';
 import { prop } from '../../../theme';
-import EditIcon from '../../../images/preferences.svg';
+import EditIcon from '../../../images/pencil.svg';
 
 import { useP5Version } from '../hooks/useP5Version';
 
 const VersionPickerButton = styled.button`
   color: ${prop('Button.primary.default.foreground')};
+  margin-right: 1rem;
 
   &:hover {
     color: ${prop('Button.primary.hover.background')} !important;
@@ -19,9 +20,8 @@ const VersionPickerButton = styled.button`
   & svg {
     vertical-align: middle;
     margin-bottom: 2px;
-    margin-left: 0.5rem;
-    width: 1rem;
-    height: 1rem;
+    width: 1.5rem;
+    height: 1.5rem;
   }
 
   &:hover path {
@@ -61,22 +61,21 @@ const VersionIndicator = () => {
     window.localStorage.setItem(CLICKED_LIBRARY_VERSION_KEY, true);
   }, []);
 
-  const label = t('Toolbar.LibraryVersion');
-  const currentVersion =
-    versionInfo?.version || t('Toolbar.CustomLibraryVersion');
+  const currentVersion = versionInfo?.version
+    ? `p5.js ${versionInfo.version}`
+    : t('Toolbar.CustomLibraryVersion');
   const description = t(
     showNotificationDot
       ? 'Toolbar.NewVersionPickerARIA'
       : 'Toolbar.VersionPickerARIA'
   );
-  const ariaLabel = `${label}: ${currentVersion} - ${description}`;
+  const ariaLabel = `${currentVersion} - ${description}`;
 
   return (
     <VersionPickerButton onClick={openVersionSettings} ariaLabel={ariaLabel}>
-      {label}:&nbsp;
       {currentVersion}
-      {showNotificationDot && <NotificationDot />}
       <EditIcon focusable="false" aria-hidden="true" />
+      {showNotificationDot && <NotificationDot />}
     </VersionPickerButton>
   );
 };

client/styles/components/_toolbar.scss

@@ -70,7 +70,6 @@
 			@extend %toolbar-button--selected;
 		}
 	}
-	margin-left: auto;
 	& span {
 		padding-left: #{math.div(1, $base-font-size)}rem;
 		display: flex;

translations/locales/en-US/translations.json

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