Add better hover state for version picker

Author: davepagurek

client/modules/IDE/components/VersionIndicator.jsx

@@ -1,11 +1,20 @@
 import React, { useCallback } from 'react';
+import styled from 'styled-components';
 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 { useP5Version } from '../hooks/useP5Version';
 
+const VersionPickerButton = styled.button`
+  color: ${prop('Button.primary.default.foreground')};
+  &:hover {
+    color: ${prop('Button.primary.hover.background')} !important;
+  }
+`;
+
 const VersionIndicator = () => {
   const { versionInfo } = useP5Version();
   const { t } = useTranslation();
@@ -17,11 +26,11 @@ const VersionIndicator = () => {
   }, []);
 
   return (
-    <button onClick={openVersionSettings}>
+    <VersionPickerButton onClick={openVersionSettings}>
       {t('Toolbar.LibraryVersion')}
       &nbsp;
       {versionInfo?.version || t('Toolbar.CustomLibraryVersion')}
-    </button>
+    </VersionPickerButton>
   );
 };