fix dropdown title

extensions/default/src/ViewerLayout/Header.jsx

@@ -67,8 +67,20 @@ function Header({ children }) {
             {t('Header:INVESTIGATIONAL USE ONLY')}
           </span>
           <Dropdown
-            titleElement={
-              <>
+            showDropdownIcon={false}
+            list={[
+              {
+                title: t('Header:About'),
+                icon: 'info',
+                onClick: showAboutModal,
+              },
+              {
+                title: t('Header:Preferences'),
+                icon: 'settings',
+                onClick: showPreferencesModal,
+              },
+            ]}
+          >
             <IconButton
               variant="text"
               color="inherit"
@@ -85,21 +97,7 @@ function Header({ children }) {
             >
               <Icon name="chevron-down" />
             </IconButton>
-              </>
-            }
-            list={[
-              {
-                title: t('Header:About'),
-                icon: 'info',
-                onClick: showAboutModal,
-              },
-              {
-                title: t('Header:Preferences'),
-                icon: 'settings',
-                onClick: showPreferencesModal,
-              },
-            ]}
-          />
+          </Dropdown>
         </div>
       </div>
     </NavBar>

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>
+      <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,8 +23,16 @@ const PreferencesDropdown = () => {
 
   return (
     <Dropdown
-      titleElement={
-        <>
+      showDropdownIcon={false}
+      list={[
+        { title: 'About', icon: 'info', onClick: showAboutModal },
+        {
+          title: 'Preferences',
+          icon: 'settings',
+          onClick: showPreferencesModal,
+        },
+      ]}
+    >
       <IconButton
         variant="text"
         color="inherit"
@@ -42,17 +50,7 @@ const PreferencesDropdown = () => {
       >
         <Icon name="chevron-down" />
       </IconButton>
-        </>
-      }
-      list={[
-        { title: 'About', icon: 'info', onClick: showAboutModal },
-        {
-          title: 'Preferences',
-          icon: 'settings',
-          onClick: showPreferencesModal,
-        },
-      ]}
-    />
+    </Dropdown>
   );
 };