diff --git a/src/DevMenu/ui/AugmentationsDev.tsx b/src/DevMenu/ui/AugmentationsDev.tsx index 33d96204e..fcf238fda 100644 --- a/src/DevMenu/ui/AugmentationsDev.tsx +++ b/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 - onChange={setAugmentationDropdown} - value={augmentation} - startAdornment={ - <> - <IconButton onClick={queueAllAugs} size="large"> - <ReplyAll /> - </IconButton> - <IconButton onClick={queueAug} size="large"> - <Reply /> - </IconButton> - </> - } - endAdornment={ - <> - <IconButton onClick={clearAugs} size="large"> - <Clear /> - </IconButton> - </> - } - > - {Object.values(AugmentationName).map((aug) => ( - <MenuItem key={aug} value={aug}> - {aug} - </MenuItem> - ))} - </Select> - <Button sx={{ display: "block" }} onClick={clearQueuedAugs}> - Clear Queued Augmentations - </Button> + <Box display="flex" marginBottom="8px"> + <Tooltip title="Queue all augmentations" sx={{ marginRight: "8px" }}> + <Button onClick={queueAllAugs}> + <ReplyAllIcon /> + </Button> + </Tooltip> + <Select + onChange={setAugmentationDropdown} + value={augmentation} + startAdornment={ + <Tooltip title="Queue augmentation"> + <IconButton onClick={queueAug}> + <ReplyIcon /> + </IconButton> + </Tooltip> + } + > + {Object.values(AugmentationName).map((aug) => ( + <MenuItem key={aug} value={aug}> + {aug} + </MenuItem> + ))} + </Select> + <Tooltip title="Clear augmentations" sx={{ marginLeft: "8px" }}> + <Button onClick={clearAugs}> + <Clear /> + </Button> + </Tooltip> + </Box> + <Button onClick={clearQueuedAugs}>Clear queued augmentations</Button> </AccordionDetails> </Accordion> );