Modified the order of action buttons and changed the font color for...

Modified the order of action buttons and changed the font color for non-selected item in the ToggleButtonGroup.

gui/src/components/dft/DFTEntryOverview.js

@@ -363,13 +363,7 @@ export default function DFTEntryOverview({data}) {
 
   // Figure out which actions are available for this entry
   const actions = useMemo(() => {
-    const buttons = [
-      {
-        tooltip: 'Show the API access code',
-        onClick: (event) => { setShowAPIDialog(!showAPIDialog) },
-        content: 'API access'
-      }
-    ]
+    const buttons = []
     if (encyclopediaEnabled && data?.encyclopedia?.material?.material_id) {
       buttons.push(
         {
@@ -379,6 +373,13 @@ export default function DFTEntryOverview({data}) {
         }
       )
     }
+    buttons.push(
+      {
+        tooltip: 'Show the API access code',
+        onClick: (event) => { setShowAPIDialog(!showAPIDialog) },
+        content: 'API access'
+      }
+    )
     return buttons
   }, [data, showAPIDialog])
 

gui/src/components/visualization/Structure.js

@@ -87,6 +87,9 @@ export const Structure = withErrorHandler(({className, classes, system, systems,
         marginBottom: theme.spacing(1),
         height: '2rem'
       },
+      toggle: {
+        color: theme.palette.action.active
+      },
       title: {
         marginBottom: theme.spacing(1)
       },
@@ -288,12 +291,12 @@ export const Structure = withErrorHandler(({className, classes, system, systems,
     if (systems) {
       const toggles = []
       for (let key in systems) {
-        toggles.push(<ToggleButton key={key} value={key} aria-label={key}>{key}</ToggleButton>)
+        toggles.push(<ToggleButton key={key} value={key} aria-label={key} classes={{root: styles.toggle}}>{key}</ToggleButton>)
       }
       return toggles
     }
     return null
-  }, [systems])
+  }, [systems, styles])
 
   // Enforce at least one structure view option
   const handleStructureChange = (event, value) => {