Style dropdown button

Author: davepagurek

client/modules/IDE/components/VersionPicker.jsx

@@ -2,12 +2,44 @@ import React, { useCallback, useContext } from 'react';
 import { useDispatch } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
+import styled from 'styled-components';
 
+import { prop } from '../../../theme';
 import { useP5Version, p5Versions } from '../hooks/useP5Version';
 import MenuItem from '../../../components/Dropdown/MenuItem';
 import DropdownMenu from '../../../components/Dropdown/DropdownMenu';
 import { updateFileContent } from '../actions/files';
 import { CmControllerContext } from '../pages/IDEView';
+import { DropdownArrowIcon } from '../.././../common/icons';
+
+const VersionPickerButton = styled.div`
+  display: flex;
+  border: 1px solid ${prop('Modal.border')};
+  background: ${prop('backgroundColor')};
+`;
+
+const VersionPickerText = styled.div`
+  padding: 0.5rem 1rem;
+  min-width: 8rem;
+  text-align: left;
+`;
+
+const VersionPickerArrow = styled.div`
+  background: ${prop('Button.primary.default.background')};
+  align-self: stretch;
+  width: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const VersionDropdownMenu = styled(DropdownMenu)`
+  & button {
+    padding: 0;
+  }
+
+  margin-bottom: 1rem;
+`;
 
 const VersionPicker = React.forwardRef(({ onChangeVersion }, ref) => {
   const { indexID, versionInfo } = useP5Version();
@@ -29,16 +61,27 @@ const VersionPicker = React.forwardRef(({ onChangeVersion }, ref) => {
 
   if (!versionInfo) {
     return (
-      <span className="versionPicker">{t('Toolbar.CustomLibraryVersion')}</span>
+      <VersionPickerButton>
+        <VersionPickerText>
+          {t('Toolbar.CustomLibraryVersion')}
+        </VersionPickerText>
+        <VersionPickerArrow>
+          <DropdownArrowIcon />
+        </VersionPickerArrow>
+      </VersionPickerButton>
     );
   }
 
   return (
-    <DropdownMenu
+    <VersionDropdownMenu
+      className="versionPicker"
       anchor={
-        <span className="versionPicker" ref={ref}>
-          {versionInfo.version}
-        </span>
+        <VersionPickerButton ref={ref}>
+          <VersionPickerText>{versionInfo.version}</VersionPickerText>
+          <VersionPickerArrow>
+            <DropdownArrowIcon />
+          </VersionPickerArrow>
+        </VersionPickerButton>
       }
       align="left"
       maxHeight="50vh"
@@ -48,7 +91,7 @@ const VersionPicker = React.forwardRef(({ onChangeVersion }, ref) => {
           {version}
         </MenuItem>
       ))}
-    </DropdownMenu>
+    </VersionDropdownMenu>
   );
 });