Atlas48/grungnet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Standardise settings select margins

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Select.js
View File

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

12
src/components/map/MapSettings.js
View File

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

32
src/components/token/TokenSettings.js
View File

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