Mobile and style improvements
This commit is contained in:
@@ -2,6 +2,7 @@ import {
|
||||
ActionIcon,
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Divider,
|
||||
Grid,
|
||||
GridCol,
|
||||
@@ -20,6 +21,7 @@ import { FiHelpCircle, FiPlus } from 'react-icons/fi';
|
||||
import {
|
||||
actionIconClasses,
|
||||
buttonClasses,
|
||||
cardClasses,
|
||||
modalClasses,
|
||||
textClasses,
|
||||
textInputClasses,
|
||||
@@ -78,79 +80,81 @@ const SearchProviderSettings = () => {
|
||||
<Modal.CloseButton />
|
||||
</Modal.Header>
|
||||
<Modal.Body pb={'2rem'}>
|
||||
<Stack gap={0} w={'100%'} align='center'>
|
||||
<Stack>
|
||||
<Group w={'100%'} justify='center'>
|
||||
<Card className={cardClasses.settingsItem} classNames={cardClasses}>
|
||||
<Stack gap={0} w={'100%'} align='center'>
|
||||
<Stack>
|
||||
<Group w={'100%'} justify='center'>
|
||||
<TextInput
|
||||
label={'Name'}
|
||||
className={textInputClasses.settingsItem}
|
||||
pt={16}
|
||||
classNames={textInputClasses}
|
||||
defaultValue={newProvider.name}
|
||||
onChange={(event) => {
|
||||
setNewProvider({
|
||||
...newProvider,
|
||||
name: event.target.value,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<TextInput
|
||||
label={'Prefix'}
|
||||
className={textInputClasses.settingsItem}
|
||||
pt={16}
|
||||
classNames={textInputClasses}
|
||||
defaultValue={newProvider.prefix}
|
||||
onChange={(event) => {
|
||||
setNewProvider({
|
||||
...newProvider,
|
||||
prefix: event.target.value,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
<TextInput
|
||||
label={'Name'}
|
||||
label={'Url'}
|
||||
className={textInputClasses.settingsItem}
|
||||
pt={16}
|
||||
classNames={textInputClasses}
|
||||
defaultValue={newProvider.name}
|
||||
defaultValue={newProvider.url}
|
||||
onChange={(event) => {
|
||||
setNewProvider({
|
||||
...newProvider,
|
||||
name: event.target.value,
|
||||
url: event.target.value,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<TextInput
|
||||
label={'Prefix'}
|
||||
className={textInputClasses.settingsItem}
|
||||
pt={16}
|
||||
classNames={textInputClasses}
|
||||
defaultValue={newProvider.prefix}
|
||||
onChange={(event) => {
|
||||
setNewProvider({
|
||||
...newProvider,
|
||||
prefix: event.target.value,
|
||||
});
|
||||
</Stack>
|
||||
<Divider color='black' my='lg' />
|
||||
<Group pos={'absolute'} bottom={8}>
|
||||
<Button
|
||||
color={'green'}
|
||||
styles={{ label: { color: 'black' } }}
|
||||
onClick={() => {
|
||||
if (newProvider) {
|
||||
mutateAsync({
|
||||
method: 'POST',
|
||||
endpoint: endpoint,
|
||||
body: newProvider,
|
||||
});
|
||||
closeModal();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
<TextInput
|
||||
label={'Url'}
|
||||
className={textInputClasses.settingsItem}
|
||||
pt={16}
|
||||
classNames={textInputClasses}
|
||||
defaultValue={newProvider.url}
|
||||
onChange={(event) => {
|
||||
setNewProvider({
|
||||
...newProvider,
|
||||
url: event.target.value,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Stack>
|
||||
<Divider color='black' my='sm' />
|
||||
<Group pos={'absolute'} bottom={8}>
|
||||
<Button
|
||||
color={'green'}
|
||||
styles={{ label: { color: 'black' } }}
|
||||
onClick={() => {
|
||||
if (newProvider) {
|
||||
mutateAsync({
|
||||
method: 'POST',
|
||||
endpoint: endpoint,
|
||||
body: newProvider,
|
||||
});
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
<Button
|
||||
color={'red'}
|
||||
styles={{ label: { color: 'black' } }}
|
||||
onClick={() => {
|
||||
closeModal();
|
||||
}
|
||||
}}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
<Button
|
||||
color={'red'}
|
||||
styles={{ label: { color: 'black' } }}
|
||||
onClick={() => {
|
||||
closeModal();
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Modal.Body>
|
||||
</Modal.Content>
|
||||
</Modal.Root>
|
||||
@@ -211,7 +215,7 @@ const SearchProviderSettings = () => {
|
||||
pos={isMobile ? undefined : 'absolute'}
|
||||
className={textInputClasses.settingsItem}
|
||||
classNames={textInputClasses}
|
||||
autoFocus
|
||||
autoFocus={!isMobile}
|
||||
placeholder='Search...'
|
||||
value={searchValue}
|
||||
onInput={(event: any) => {
|
||||
|
||||
Reference in New Issue
Block a user