fix dropdown title

platform/ui/src/components/Dropdown/Dropdown.jsx

@@ -4,19 +4,17 @@ import classnames from 'classnames';
 
 import { Icon, Typography } from '@ohif/ui';
 
-const Dropdown = ({ titleElement, title, list }) => {
+const Dropdown = ({ children, showDropdownIcon, list }) => {
   const [open, setOpen] = useState(false);
   const element = useRef(null);
 
   const renderTitleElement = () => {
-    if (titleElement) {
-      return titleElement;
-    }
-
     return (
-      <div className="flex">
-        <Typography>{title}</Typography>
-        <Icon name="chevron-down" className="text-white ml-1" />
+      <div className="flex text-white items-center">
+        {children}
+        {showDropdownIcon && (
+          <Icon name="chevron-down" className="text-white ml-1" />
+        )}
       </div>
     );
   };
@@ -96,9 +94,13 @@ const Dropdown = ({ titleElement, title, list }) => {
   );
 };
 
+Dropdown.defaultProps = {
+  showDropdownIcon: true,
+};
+
 Dropdown.propTypes = {
-  titleElement: PropTypes.node,
-  title: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  showDropdownIcon: PropTypes.bool,
   /** Items to render in the select's drop down */
   list: PropTypes.arrayOf(
     PropTypes.shape({

platform/viewer/src/components/PreferencesDropdown/PreferencesDropdown.jsx

@@ -23,27 +23,7 @@ const PreferencesDropdown = () => {
 
   return (
     <Dropdown
-      titleElement={
-        <>
-          <IconButton
-            variant="text"
-            color="inherit"
-            size="initial"
-            className="text-primary-active"
-          >
-            <Icon name="settings" />
-          </IconButton>
-          <IconButton
-            variant="text"
-            color="inherit"
-            size="initial"
-            className="text-primary-active"
-            onClick={() => {}}
-          >
-            <Icon name="chevron-down" />
-          </IconButton>
-        </>
-      }
+      showDropdownIcon={false}
       list={[
         { title: 'About', icon: 'info', onClick: showAboutModal },
         {
@@ -52,7 +32,25 @@ const PreferencesDropdown = () => {
           onClick: showPreferencesModal,
         },
       ]}
-    />
+    >
+      <IconButton
+        variant="text"
+        color="inherit"
+        size="initial"
+        className="text-primary-active"
+      >
+        <Icon name="settings" />
+      </IconButton>
+      <IconButton
+        variant="text"
+        color="inherit"
+        size="initial"
+        className="text-primary-active"
+        onClick={() => {}}
+      >
+        <Icon name="chevron-down" />
+      </IconButton>
+    </Dropdown>
   );
 };