DEVMENU: Small change in augmentation tool (#1557)

src/DevMenu/ui/AugmentationsDev.tsx

@@ -1,17 +1,21 @@
 import { Player } from "@player";
 import React, { useState } from "react";
-import { Clear, ExpandMore, Reply, ReplyAll } from "@mui/icons-material";
+import { Clear, ExpandMore } from "@mui/icons-material";
 import {
   Accordion,
   AccordionDetails,
   AccordionSummary,
+  Box,
   Button,
   IconButton,
   MenuItem,
   Select,
   SelectChangeEvent,
+  Tooltip,
   Typography,
 } from "@mui/material";
+import ReplyAllIcon from "@mui/icons-material/ReplyAll";
+import ReplyIcon from "@mui/icons-material/Reply";
 import { AugmentationName } from "@enums";
 
 export function AugmentationsDev(): React.ReactElement {
@@ -51,36 +55,36 @@ export function AugmentationsDev(): React.ReactElement {
         <Typography>Augmentations</Typography>
       </AccordionSummary>
       <AccordionDetails>
-        <Select
+        <Box display="flex" marginBottom="8px">
-          onChange={setAugmentationDropdown}
+          <Tooltip title="Queue all augmentations" sx={{ marginRight: "8px" }}>
-          value={augmentation}
+            <Button onClick={queueAllAugs}>
-          startAdornment={
+              <ReplyAllIcon />
-            <>
+            </Button>
-              <IconButton onClick={queueAllAugs} size="large">
+          </Tooltip>
-                <ReplyAll />
+          <Select
-              </IconButton>
+            onChange={setAugmentationDropdown}
-              <IconButton onClick={queueAug} size="large">
+            value={augmentation}
-                <Reply />
+            startAdornment={
-              </IconButton>
+              <Tooltip title="Queue augmentation">
-            </>
+                <IconButton onClick={queueAug}>
-          }
+                  <ReplyIcon />
-          endAdornment={
+                </IconButton>
-            <>
+              </Tooltip>
-              <IconButton onClick={clearAugs} size="large">
+            }
-                <Clear />
+          >
-              </IconButton>
+            {Object.values(AugmentationName).map((aug) => (
-            </>
+              <MenuItem key={aug} value={aug}>
-          }
+                {aug}
-        >
+              </MenuItem>
-          {Object.values(AugmentationName).map((aug) => (
+            ))}
-            <MenuItem key={aug} value={aug}>
+          </Select>
-              {aug}
+          <Tooltip title="Clear augmentations" sx={{ marginLeft: "8px" }}>
-            </MenuItem>
+            <Button onClick={clearAugs}>
-          ))}
+              <Clear />
-        </Select>
+            </Button>
-        <Button sx={{ display: "block" }} onClick={clearQueuedAugs}>
+          </Tooltip>
-          Clear Queued Augmentations
+        </Box>
-        </Button>
+        <Button onClick={clearQueuedAugs}>Clear queued augmentations</Button>
       </AccordionDetails>
     </Accordion>
   );