Fix styling issue of Structure Settings Dropdown

TNO · Jan 15, 2024 · cb9575e · cb9575e
1 parent 43a748b
commit cb9575e
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 17 deletions.
diff --git a/media/style.css b/media/style.css
@@ -14,6 +14,19 @@
     box-shadow: 0 2px 8px var(--vscode-widget-shadow);
 }
 
+.structure-settings-dropdown {
+    background-color:  var(--vscode-menu-background);
+}
+
+.structure-settings-dropdown-item {
+    color: var(--vscode-menu-foreground);
+    background-color: var(--vscode-menu-background);
+}
+
+.structure-dialog-icon {
+    color: var(--vscode-menu-foreground);
+}
+
 ::selection {
     color: var(--vscode-menu-background);
     background-color: var(--vscode-menu-foreground);

diff --git a/src/viewer/structures/StructureDialog.tsx b/src/viewer/structures/StructureDialog.tsx
@@ -545,6 +545,7 @@ export default class StructureDialog extends React.Component<Props, State> {
 								display: "flex",
 								flexDirection: "row",
 								alignItems: "center",
+								justifyContent: "space-between"
 							}}
 						>
 							<CustomWidthTooltip
@@ -593,15 +594,17 @@ export default class StructureDialog extends React.Component<Props, State> {
 							>
 								<i className="codicon codicon-question" />
 							</CustomWidthTooltip>
-                            <StructureSettingsDropdown onStructureDefinitionSave={this.saveStructureDefinition} onStructureDefinitionLoad={this.loadStructureDefinition}/>
+                            <StructureSettingsDropdown
+								 onStructureDefinitionSave={this.saveStructureDefinition} 
+								 onStructureDefinitionLoad={this.loadStructureDefinition}/>
                             <IconButton
                                     id="close-button"
                                     aria-label="close"
                                     size="small"
+									style={{ flex: 1 }}
                                     onClick={() => this.props.onClose()}>
-                                <CloseIcon fontSize="small"/>
+                                <CloseIcon className="structure-dialog-icon" fontSize="small"/>
                             </IconButton>
-
 						</div>
 					</div>
 					<StructureTable

diff --git a/src/viewer/structures/StructureSettingsDropdown.tsx b/src/viewer/structures/StructureSettingsDropdown.tsx
@@ -7,6 +7,19 @@ import ListItemIcon from '@mui/material/ListItemIcon';
 import SaveIcon from '@mui/icons-material/Save';
 import FileOpenIcon from '@mui/icons-material/FileOpen';
 import SettingsIcon from '@mui/icons-material/Settings';
+import { createTheme } from '@mui/material/styles';
+import { MenuList } from '@mui/material';
+
+// const theme = createTheme({
+//   palette: {
+//     primary: {
+//       main: `${var(--vscode-editorGroupHeader-tabsBackground)}`,
+//     },
+//     secondary: {
+//       main: '#f44336',
+//     },
+//   },
+// });
 
 interface StructureSettingsDropdownProps {
   onStructureDefinitionSave: () => void;
@@ -39,7 +52,7 @@ export const StructureSettingsDropdown: React.FunctionComponent<StructureSetting
         aria-expanded={open ? 'true' : undefined}
         onClick={handleClick}
       >
-        <SettingsIcon fontSize="small"/>
+        <SettingsIcon className='structure-dialog-icon' fontSize="small"/>
       </IconButton>
       <Menu
         id="basic-menu"
@@ -48,21 +61,23 @@ export const StructureSettingsDropdown: React.FunctionComponent<StructureSetting
         onClose={() => handleClose('')}
         MenuListProps={{
           'aria-labelledby': 'basic-button',
+          sx: { py: 0 }
         }}
       >
-        {/* <MenuItem onClick={handleClose}>Profile</MenuItem> */}
-        <MenuItem onClick={() => handleClose('save')}>
-          <ListItemIcon>
-            <SaveIcon fontSize="small" />
-          </ListItemIcon>
-          <ListItemText>Save Structure Definition</ListItemText>
-        </MenuItem>
-        <MenuItem onClick={() => handleClose('load')}>
-          <ListItemIcon>
-            <FileOpenIcon fontSize="small" />
-          </ListItemIcon>
-          <ListItemText color='white'>Load Structure Definition</ListItemText>
-        </MenuItem>
+        <MenuList className='structure-settings-dropdown'>
+          <MenuItem onClick={() => handleClose('save')}>
+            <ListItemIcon>
+              <SaveIcon className='structure-settings-dropdown-item' fontSize="small" />
+            </ListItemIcon>
+            <ListItemText className='structure-settings-dropdown-item'>Save Structure Definition</ListItemText>
+          </MenuItem>
+          <MenuItem onClick={() => handleClose('load')}>
+            <ListItemIcon>
+              <FileOpenIcon className='structure-settings-dropdown-item' fontSize="small" />
+            </ListItemIcon>
+            <ListItemText className='structure-settings-dropdown-item'>Load Structure Definition</ListItemText>
+          </MenuItem>
+        </MenuList>
       </Menu>
     </div>
   );