Rearranged token edit settings

This commit is contained in:
Mitchell McCaffrey 2020-10-10 11:34:03 +11:00
parent fb6e7e036b
commit 0f6f9f8c42

View File

@ -15,8 +15,31 @@ function TokenSettings({ token, onSettingsChange }) {
const tokenEmpty = !token || isEmpty(token);
return (
<Flex sx={{ flexDirection: "column" }}>
<Box mt={2} sx={{ flexGrow: 1 }}>
<Label htmlFor="name">Name</Label>
<Input
name="name"
value={(token && token.name) || ""}
onChange={(e) => onSettingsChange("name", e.target.value)}
disabled={tokenEmpty || token.type === "default"}
my={1}
/>
</Box>
<Box mt={2}>
<Label mb={1}>Category</Label>
<Select
options={categorySettings}
value={
!tokenEmpty &&
categorySettings.find((s) => s.value === token.category)
}
isDisabled={tokenEmpty || token.type === "default"}
onChange={(option) => onSettingsChange("category", option.value)}
isSearchable={false}
/>
</Box>
<Flex>
<Box mt={2} sx={{ flexGrow: 1 }}>
<Box my={2} sx={{ flexGrow: 1 }}>
<Label htmlFor="tokenSize">Default Size</Label>
<Input
type="number"
@ -31,29 +54,6 @@ function TokenSettings({ token, onSettingsChange }) {
/>
</Box>
</Flex>
<Box mt={2}>
<Label mb={1}>Category</Label>
<Select
options={categorySettings}
value={
!tokenEmpty &&
categorySettings.find((s) => s.value === token.category)
}
isDisabled={tokenEmpty || token.type === "default"}
onChange={(option) => onSettingsChange("category", option.value)}
isSearchable={false}
/>
</Box>
<Box my={2} sx={{ flexGrow: 1 }}>
<Label htmlFor="name">Name</Label>
<Input
name="name"
value={(token && token.name) || ""}
onChange={(e) => onSettingsChange("name", e.target.value)}
disabled={tokenEmpty || token.type === "default"}
my={1}
/>
</Box>
</Flex>
);
}