groups: fix join/leave notification toggle

fixes urbit/landscape#1012
This commit is contained in:
James Acklin 2022-04-08 10:49:10 -04:00
parent a15efab60c
commit 2c08d2477e
2 changed files with 14 additions and 8 deletions

View File

@ -1,7 +1,7 @@
import { import {
LoadingSpinner, StatelessToggleSwitchField as Toggle, Box,
Icon,
Text LoadingSpinner, StatelessToggleSwitchField as Toggle
} from '@tlon/indigo-react'; } from '@tlon/indigo-react';
import React, { ReactElement } from 'react'; import React, { ReactElement } from 'react';
import { useStatelessAsyncClickable } from '~/logic/lib/useStatelessAsyncClickable'; import { useStatelessAsyncClickable } from '~/logic/lib/useStatelessAsyncClickable';
@ -22,11 +22,17 @@ export function StatelessAsyncToggle({
} = useStatelessAsyncClickable(onClick, name); } = useStatelessAsyncClickable(onClick, name);
return state === 'error' ? ( return state === 'error' ? (
<Text>Error</Text> <Box width={5} textAlign='center' title='Something went wrong...'>
<Icon icon='ExclaimationMarkBold' />
</Box>
) : state === 'loading' ? ( ) : state === 'loading' ? (
<Box width={5} textAlign='center'>
<LoadingSpinner foreground={'white'} background="gray" /> <LoadingSpinner foreground={'white'} background="gray" />
</Box>
) : state === 'success' ? ( ) : state === 'success' ? (
<Text mx={2}>Done</Text> <Box width={5} textAlign='center' title='Success'>
<Icon icon='CheckmarkBold' />
</Box>
) : ( ) : (
<Toggle onClick={handleClick} {...rest} /> <Toggle onClick={handleClick} {...rest} />
); );

View File

@ -34,8 +34,8 @@ export function GroupPersonalSettings(props: {
> >
<StatelessAsyncToggle selected={watching} onClick={onClick} /> <StatelessAsyncToggle selected={watching} onClick={onClick} />
<Col> <Col>
<Label>Notify me on group activity</Label> <Label>Notify me on participant activity</Label>
<Label mt={2} gray>Send me notifications when this group changes</Label> <Label mt={2} gray>When a user joins or leaves this group, send me a notification</Label>
</Col> </Col>
</BaseLabel> </BaseLabel>
</Col> </Col>