From 2c08d2477e6f2cdaa3323bcf65a2c2211b82e5da Mon Sep 17 00:00:00 2001
From: James Acklin <james@ackl.lin>
Date: Fri, 8 Apr 2022 10:49:10 -0400
Subject: [PATCH] groups: fix join/leave notification toggle

fixes urbit/landscape#1012
---
 .../views/components/StatelessAsyncToggle.tsx  | 18 ++++++++++++------
 .../components/GroupSettings/Personal.tsx      |  4 ++--
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/pkg/interface/src/views/components/StatelessAsyncToggle.tsx b/pkg/interface/src/views/components/StatelessAsyncToggle.tsx
index 50fed53fce..c8cd0dc500 100644
--- a/pkg/interface/src/views/components/StatelessAsyncToggle.tsx
+++ b/pkg/interface/src/views/components/StatelessAsyncToggle.tsx
@@ -1,7 +1,7 @@
 import {
-  LoadingSpinner, StatelessToggleSwitchField as Toggle,
-
-  Text
+  Box,
+  Icon,
+  LoadingSpinner, StatelessToggleSwitchField as Toggle
 } from '@tlon/indigo-react';
 import React, { ReactElement } from 'react';
 import { useStatelessAsyncClickable } from '~/logic/lib/useStatelessAsyncClickable';
@@ -22,11 +22,17 @@ export function StatelessAsyncToggle({
   } = useStatelessAsyncClickable(onClick, name);
 
   return state === 'error' ? (
-    <Text>Error</Text>
+    <Box width={5} textAlign='center' title='Something went wrong...'>
+      <Icon icon='ExclaimationMarkBold' />
+    </Box>
   ) : state === 'loading' ? (
-    <LoadingSpinner foreground={'white'} background="gray" />
+    <Box width={5} textAlign='center'>
+      <LoadingSpinner foreground={'white'} background="gray" />
+    </Box>
   ) : state === 'success' ? (
-    <Text mx={2}>Done</Text>
+    <Box width={5} textAlign='center' title='Success'>
+      <Icon icon='CheckmarkBold' />
+    </Box>
   ) : (
     <Toggle onClick={handleClick} {...rest} />
   );
diff --git a/pkg/interface/src/views/landscape/components/GroupSettings/Personal.tsx b/pkg/interface/src/views/landscape/components/GroupSettings/Personal.tsx
index 1c8921f4df..78af34dcac 100644
--- a/pkg/interface/src/views/landscape/components/GroupSettings/Personal.tsx
+++ b/pkg/interface/src/views/landscape/components/GroupSettings/Personal.tsx
@@ -34,8 +34,8 @@ export function GroupPersonalSettings(props: {
       >
         <StatelessAsyncToggle selected={watching} onClick={onClick} />
         <Col>
-          <Label>Notify me on group activity</Label>
-          <Label mt={2} gray>Send me notifications when this group changes</Label>
+          <Label>Notify me on participant activity</Label>
+          <Label mt={2} gray>When a user joins or leaves this group, send me a notification</Label>
         </Col>
       </BaseLabel>
     </Col>