moving activity indicator to button

app/mobile/src/session/settings/Settings.jsx

@@ -339,7 +339,6 @@ export function Settings() {
                 </TouchableOpacity>
               </View>
               <Text style={styles.modalHeader}>{ state.strings.sealedTopics }</Text>
-              <ActivityIndicator style={styles.modalBusy} animating={busy} color={Colors.primary} />
               { !state.sealEnabled && (
                 <>
                   <Text style={styles.modalDescription}>{ state.strings.sealUnset }</Text>
@@ -355,7 +354,12 @@ export function Settings() {
      
                   { state.sealPassword && (
                     <TouchableOpacity style={styles.enabledButton} activeOpacity={1} onPress={() => sealAction(actions.generateKey)}>
+                      { busy && (
+                        <ActivityIndicator style={styles.modalBusy} animating={true} color={Colors.primaryButtonText} />
+                      )}
+                      { !busy && (
                         <Text style={styles.enabledButtonText}>{ state.strings.generate }</Text>
+                      )}
                     </TouchableOpacity>
                   )}
                   { !state.sealPassword && (
@@ -382,7 +386,12 @@ export function Settings() {
                   <View style={styles.buttons}>
                     { state.sealPassword && (
                       <TouchableOpacity style={styles.enabledButton} activeOpacity={1} onPress={() => sealAction(actions.unlockKey)}>
+                        { busy && (
+                          <ActivityIndicator style={styles.modalBusy} animating={true} color={Colors.primaryButtonText} />
+                        )}
+                        { !busy && (
                           <Text style={styles.enabledButtonText}>{ state.strings.unlock }</Text>
+                        )}
                       </TouchableOpacity>
                     )}
                     { !state.sealPassword && (
@@ -400,7 +409,12 @@ export function Settings() {
                 <>
                   <Text style={styles.modalDescription}>{ state.strings.sealUnlocked }</Text>
                   <TouchableOpacity style={styles.enabledButton} activeOpacity={1} onPress={() => sealAction(actions.disableKey)}>
+                    { busy && (
+                      <ActivityIndicator style={styles.modalBusy} animating={true} color={Colors.primaryButtonText} />
+                    )}
+                    { !busy && (
                       <Text style={styles.enabledButtonText}>{ state.strings.disable }</Text>
+                    )}
                   </TouchableOpacity>
                   <TouchableOpacity activeOpacity={1} onPress={actions.showSealUpdate}>
                     <Text style={styles.modeText}>{ state.strings.changeKey }</Text>
@@ -422,7 +436,12 @@ export function Settings() {
                   />
                   { state.sealDelete === state.strings.deleteKey && (
                     <TouchableOpacity style={styles.dangerButton} activeOpacity={1} onPress={() => sealAction(actions.removeKey)}>
+                      { busy && (
+                        <ActivityIndicator style={styles.modalBusy} animating={true} color={Colors.primaryButtonText} />
+                      )}
+                      { !busy && (
                         <Text style={styles.dangerButtonText}>{ state.strings.delete }</Text>
+                      )}
                     </TouchableOpacity>
                   )}
                   { state.sealDelete !== state.strings.deleteKey && (
@@ -455,7 +474,12 @@ export function Settings() {
 
                   { state.sealPassword && (
                     <TouchableOpacity style={styles.enabledButton} activeOpacity={1} onPress={() => sealAction(actions.updateKey)}>
+                      { busy && (
+                        <ActivityIndicator style={styles.modalBusy} animating={true} color={Colors.primaryButtonText} />
+                      )}
+                      { !busy && (
                         <Text style={styles.enabledButtonText}>{ state.strings.update }</Text>
+                      )}
                     </TouchableOpacity>
                   )}
                   { !state.sealPassword && (

app/mobile/src/session/settings/Settings.styled.js

@@ -114,7 +114,6 @@ export const styles = StyleSheet.create({
   notifications: {
     transform: [{ scaleX: .6 }, { scaleY: .6 }],
   },
-
   modalOverlay: {
     display: 'flex',
     width: '100%',
@@ -124,7 +123,7 @@ export const styles = StyleSheet.create({
   },
   modalContainer: {
     backgroundColor: Colors.modalBase,
-    width: '80%',
+    width: '90%',
     maxWidth: 400,
     display: 'flex',
     alignItems: 'center',
@@ -133,6 +132,7 @@ export const styles = StyleSheet.create({
   modalHeader: {
     fontSize: 18,
     paddingTop: 16,
+    paddingBottom: 16,
     color: Colors.labelText,
     fontFamily: 'Roboto',
   },
@@ -194,12 +194,13 @@ export const styles = StyleSheet.create({
   enabledButton: {
     marginTop: 8,
     marginBottom: 16,
-    paddingTop: 8,
-    paddingBottom: 8,
-    paddingLeft: 32,
-    paddingRight: 32,
     borderRadius: 4,
     backgroundColor: Colors.primaryButton,
+    width: '33%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 32,
   },
   enabledButtonText: {
     color: Colors.primaryButtonText,
@@ -208,12 +209,13 @@ export const styles = StyleSheet.create({
   disabledButton: {
     marginTop: 8,
     marginBottom: 16,
-    paddingTop: 8,
-    paddingBottom: 8,
-    paddingLeft: 32,
-    paddingRight: 32,
     borderRadius: 4,
     backgroundColor: Colors.disabledButton,
+    width: '33%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 32,
   },
   disabledButtonText: {
     color: Colors.disabledButtonText,
@@ -222,12 +224,13 @@ export const styles = StyleSheet.create({
   dangerButton: {
     marginTop: 8,
     marginBottom: 16,
-    paddingTop: 8,
-    paddingBottom: 8,
-    paddingLeft: 32,
-    paddingRight: 32,
     borderRadius: 4,
     backgroundColor: Colors.dangerButton,
+    width: '33%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 32,
   },
   dangerButtonText: {
     color: Colors.dangerButtonText,
@@ -253,12 +256,13 @@ export const styles = StyleSheet.create({
     marginTop: 8,
     marginBottom: 16,
     marginRight: 16,
-    paddingTop: 8,
-    paddingBottom: 8,
-    paddingLeft: 32,
-    paddingRight: 32,
     borderRadius: 4,
     backgroundColor: Colors.cancelButton,
+    width: '33%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 32,
   },
   cancelButtonText: {
     color: Colors.cancelButtonText,
@@ -267,12 +271,13 @@ export const styles = StyleSheet.create({
   promptButton: {
     marginTop: 8,
     marginBottom: 16,
-    paddingTop: 8,
-    paddingBottom: 8,
-    paddingLeft: 32,
-    paddingRight: 32,
     borderRadius: 4,
     backgroundColor: Colors.primaryButton,
+    width: '33%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 32,
   },
   hintButtons: {
     display: 'flex',