remove box outlines and put the range inputs in line with the apply button

This commit is contained in:
EthanHealy01 2025-09-09 13:42:17 +01:00
parent 29a020d9a4
commit 6a4791eed3
2 changed files with 20 additions and 32 deletions

View File

@ -97,7 +97,7 @@ const AdvancedSelectionPanel = ({
<Text size="sm" fw={600} c="var(--text-secondary)" mb="xs">Range</Text> <Text size="sm" fw={600} c="var(--text-secondary)" mb="xs">Range</Text>
{rangeError && (<Text size="xs" c="var(--text-brand-accent)" mb="xs">{rangeError}</Text>)} {rangeError && (<Text size="xs" c="var(--text-brand-accent)" mb="xs">{rangeError}</Text>)}
<div className={classes.inputGroup}> <div className={classes.inputGroup}>
<Group gap="sm" align="flex-end" wrap="nowrap" mb="xs"> <Group gap="sm" align="flex-end" wrap="nowrap">
<div style={{ flex: 1 }}> <div style={{ flex: 1 }}>
<NumberInput <NumberInput
size="sm" size="sm"
@ -134,7 +134,6 @@ const AdvancedSelectionPanel = ({
error={Boolean(rangeError)} error={Boolean(rangeError)}
/> />
</div> </div>
</Group>
<Button <Button
size="sm" size="sm"
className={classes.applyButton} className={classes.applyButton}
@ -152,6 +151,7 @@ const AdvancedSelectionPanel = ({
> >
Apply Apply
</Button> </Button>
</Group>
</div> </div>
</div> </div>

View File

@ -202,29 +202,17 @@
.advancedCard { .advancedCard {
background-color: var(--bulk-card-bg); background-color: var(--bulk-card-bg);
border: 0.0625rem solid var(--bulk-card-border); border: none;
border-radius: 0.75rem; border-radius: 0.75rem;
padding: 0.75rem; padding: 0.25rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
transition: all 0.2s ease;
color: var(--text-primary); color: var(--text-primary);
} }
.advancedCard:hover {
border-color: var(--bulk-card-hover-border);
box-shadow: var(--shadow-sm);
}
:global([data-mantine-color-scheme='dark']) .advancedCard { :global([data-mantine-color-scheme='dark']) .advancedCard {
background-color: var(--bulk-card-bg); background-color: var(--bulk-card-bg);
border-color: var(--bulk-card-border);
}
:global([data-mantine-color-scheme='dark']) .advancedCard:hover {
border-color: var(--bulk-card-hover-border);
box-shadow: var(--shadow-sm);
} }
.inputGroup { .inputGroup {