Standardise settings select margins

This commit is contained in:
Mitchell McCaffrey 2021-06-09 09:47:39 +10:00
parent ee34c599da
commit 1d2696228b
3 changed files with 25 additions and 23 deletions

View File

@ -53,6 +53,10 @@ function Select({ creatable, ...props }) {
color: theme.colors.text,
opacity: state.isDisabled ? 0.5 : 1,
}),
container: (provided) => ({
...provided,
margin: "4px 0",
}),
}}
theme={(t) => ({
...t,

View File

@ -185,8 +185,8 @@ function MapSettings({
sx={{ flexDirection: "column" }}
>
<Flex sx={{ alignItems: "flex-end" }}>
<Box mb={1} sx={{ width: "50%" }}>
<Label mb={1}>Grid Type</Label>
<Box sx={{ width: "50%" }}>
<Label>Grid Type</Label>
<Select
isDisabled={mapEmpty}
options={gridTypeSettings}
@ -198,7 +198,7 @@ function MapSettings({
isSearchable={false}
/>
</Box>
<Flex sx={{ width: "50%", flexDirection: "column" }} ml={2}>
<Flex sx={{ flexGrow: 1, flexDirection: "column" }} ml={2}>
<Label>
<Checkbox
checked={!mapEmpty && map.showGrid}
@ -223,7 +223,7 @@ function MapSettings({
</Flex>
<Flex sx={{ alignItems: "flex-end" }}>
<Box my={2} sx={{ width: "50%" }}>
<Label mb={1}>Grid Measurement</Label>
<Label>Grid Measurement</Label>
<Select
isDisabled={mapEmpty}
options={
@ -241,7 +241,7 @@ function MapSettings({
isSearchable={false}
/>
</Box>
<Box mb={1} mx={2} sx={{ flexGrow: 1 }}>
<Box m={2} mr={0} sx={{ flexGrow: 1 }}>
<Label htmlFor="gridMeasurementScale">Grid Scale</Label>
<Input
name="gridMeasurementScale"
@ -258,7 +258,7 @@ function MapSettings({
{!mapEmpty && map.type !== "default" && (
<Flex my={2} sx={{ alignItems: "center" }}>
<Box mb={1} sx={{ width: "50%" }}>
<Label mb={1}>Quality</Label>
<Label>Quality</Label>
<Select
options={qualitySettings}
value={

View File

@ -26,7 +26,7 @@ function TokenSettings({ token, onSettingsChange }) {
/>
</Box>
<Box mt={2}>
<Label mb={1}>Default Category</Label>
<Label>Default Category</Label>
<Select
options={categorySettings}
value={
@ -40,22 +40,20 @@ function TokenSettings({ token, onSettingsChange }) {
isSearchable={false}
/>
</Box>
<Flex>
<Box mt={2} sx={{ flexGrow: 1 }}>
<Label htmlFor="tokenSize">Default Size</Label>
<Input
type="number"
name="tokenSize"
value={`${(token && token.defaultSize) || 0}`}
onChange={(e) =>
onSettingsChange("defaultSize", parseFloat(e.target.value))
}
disabled={tokenEmpty}
min={1}
my={1}
/>
</Box>
</Flex>
<Box mt={2} sx={{ flexGrow: 1 }}>
<Label htmlFor="tokenSize">Default Size</Label>
<Input
type="number"
name="tokenSize"
value={`${(token && token.defaultSize) || 0}`}
onChange={(e) =>
onSettingsChange("defaultSize", parseFloat(e.target.value))
}
disabled={tokenEmpty}
min={1}
my={1}
/>
</Box>
<Box my={2} sx={{ flexGrow: 1 }}>
<Label htmlFor="label">Default Label</Label>
<Input