fix dropdown title

extensions/default/src/ViewerLayout/Header.jsx

@@ -67,26 +67,7 @@ function Header({ children }) {
             {t('Header:INVESTIGATIONAL USE ONLY')}
           </span>
           <Dropdown
-            titleElement={
+            showDropdownIcon={false}
-              <>
-                <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"
-                >
-                  <Icon name="chevron-down" />
-                </IconButton>
-              </>
-            }
             list={[
               {
                 title: t('Header:About'),
@@ -99,7 +80,24 @@ function Header({ children }) {
                 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"
+            >
+              <Icon name="chevron-down" />
+            </IconButton>
+          </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">
+      <div className="flex text-white items-center">
-        <Typography>{title}</Typography>
+        {children}
-        <Icon name="chevron-down" className="text-white ml-1" />
+        {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,
+  children: PropTypes.node.isRequired,
-  title: PropTypes.string,
+  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={
+      showDropdownIcon={false}
-        <>
-          <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>
-        </>
-      }
       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>
   );
 };