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>
{rangeError && (<Text size="xs" c="var(--text-brand-accent)" mb="xs">{rangeError}</Text>)}
<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 }}>
<NumberInput
size="sm"
@ -134,24 +134,24 @@ const AdvancedSelectionPanel = ({
error={Boolean(rangeError)}
/>
</div>
<Button
size="sm"
className={classes.applyButton}
onClick={() => {
if (
rangeStart === '' || rangeEnd === '' ||
typeof rangeStart !== 'number' || typeof rangeEnd !== 'number'
) return;
const expr = rangeExpression(rangeStart, rangeEnd, maxPages);
if (expr) applyExpression(expr);
setRangeStart('');
setRangeEnd('');
}}
disabled={Boolean(rangeError) || rangeStart === '' || rangeEnd === ''}
>
Apply
</Button>
</Group>
<Button
size="sm"
className={classes.applyButton}
onClick={() => {
if (
rangeStart === '' || rangeEnd === '' ||
typeof rangeStart !== 'number' || typeof rangeEnd !== 'number'
) return;
const expr = rangeExpression(rangeStart, rangeEnd, maxPages);
if (expr) applyExpression(expr);
setRangeStart('');
setRangeEnd('');
}}
disabled={Boolean(rangeError) || rangeStart === '' || rangeEnd === ''}
>
Apply
</Button>
</div>
</div>

View File

@ -202,29 +202,17 @@
.advancedCard {
background-color: var(--bulk-card-bg);
border: 0.0625rem solid var(--bulk-card-border);
border: none;
border-radius: 0.75rem;
padding: 0.75rem;
padding: 0.25rem;
margin-bottom: 0.5rem;
width: 100%;
box-sizing: border-box;
transition: all 0.2s ease;
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 {
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 {