update styling for version picker to match toolbar

Author: raclim

client/modules/IDE/components/VersionIndicator.jsx

@@ -5,16 +5,21 @@ 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 { useP5Version } from '../hooks/useP5Version';
 
 const VersionPickerButton = styled.button`
-  color: ${prop('Button.primary.default.foreground')};
+  color: ${prop('toolbarTextColor')} !important;
   margin-left: 1rem;
 
+  background-color: ${prop('toolbarBackgroundColor')};
+  margin-right: 1.2rem;
+  padding: 0.5rem 0.7rem;
+  border-radius: 10rem;
+
   &:hover {
-    color: ${prop('Button.primary.hover.background')} !important;
+    background-color: ${prop('Button.primary.hover.background')} !important;
+    color: ${prop('toolbarTextHoverColor')} !important;
   }
 
   & svg {
@@ -75,7 +80,6 @@ const VersionIndicator = () => {
   return (
     <VersionPickerButton onClick={openVersionSettings} ariaLabel={ariaLabel}>
       {currentVersion}
-      <EditIcon focusable="false" aria-hidden="true" />
       {showNotificationDot && <NotificationDot />}
     </VersionPickerButton>
   );

client/styles/components/_version-indicator.scss

@@ -80,6 +80,9 @@ const baseThemes = {
     searchBackgroundColor: grays.lightest,
     tableRowStripeColor: grays.mediumLight,
     notification: colors.dodgerblue,
+    toolbarTextColor: grays.dark,
+    toolbarBackgroundColor: grays.mediumLight,
+    toolbarTextHoverColor: grays.lightest,
 
     Button: {
       primary: {
@@ -172,6 +175,9 @@ const baseThemes = {
     searchBackgroundColor: grays.darker,
     tableRowStripeColor: grays.dark,
     notification: colors.processingBlueLight,
+    toolbarTextColor: grays.lightest,
+    toolbarBackgroundColor: grays.mediumDark,
+    toolbarTextHoverColor: grays.lightest,
 
     Button: {
       primary: {
@@ -260,6 +266,9 @@ export default {
     inactiveTextColor: grays.light,
     logoColor: colors.yellow,
     notification: colors.p5ContrastYellow,
+    toolbarTextColor: grays.dark,
+    toolbarBackgroundColor: grays.light,
+    toolbarTextHoverColor: grays.dark,
 
     Button: {
       primary: {