diff --git a/app/mobile/src/session/settings/Settings.jsx b/app/mobile/src/session/settings/Settings.jsx
index 782f0bd1..884024c5 100644
--- a/app/mobile/src/session/settings/Settings.jsx
+++ b/app/mobile/src/session/settings/Settings.jsx
@@ -339,7 +339,6 @@ export function Settings() {
{ state.strings.sealedTopics }
-
{ !state.sealEnabled && (
<>
{ state.strings.sealUnset }
@@ -355,7 +354,12 @@ export function Settings() {
{ state.sealPassword && (
sealAction(actions.generateKey)}>
- { state.strings.generate }
+ { busy && (
+
+ )}
+ { !busy && (
+ { state.strings.generate }
+ )}
)}
{ !state.sealPassword && (
@@ -382,7 +386,12 @@ export function Settings() {
{ state.sealPassword && (
sealAction(actions.unlockKey)}>
- { state.strings.unlock }
+ { busy && (
+
+ )}
+ { !busy && (
+ { state.strings.unlock }
+ )}
)}
{ !state.sealPassword && (
@@ -400,7 +409,12 @@ export function Settings() {
<>
{ state.strings.sealUnlocked }
sealAction(actions.disableKey)}>
- { state.strings.disable }
+ { busy && (
+
+ )}
+ { !busy && (
+ { state.strings.disable }
+ )}
{ state.strings.changeKey }
@@ -422,7 +436,12 @@ export function Settings() {
/>
{ state.sealDelete === state.strings.deleteKey && (
sealAction(actions.removeKey)}>
- { state.strings.delete }
+ { busy && (
+
+ )}
+ { !busy && (
+ { state.strings.delete }
+ )}
)}
{ state.sealDelete !== state.strings.deleteKey && (
@@ -455,7 +474,12 @@ export function Settings() {
{ state.sealPassword && (
sealAction(actions.updateKey)}>
- { state.strings.update }
+ { busy && (
+
+ )}
+ { !busy && (
+ { state.strings.update }
+ )}
)}
{ !state.sealPassword && (
diff --git a/app/mobile/src/session/settings/Settings.styled.js b/app/mobile/src/session/settings/Settings.styled.js
index 4eb03b35..649b2c75 100644
--- a/app/mobile/src/session/settings/Settings.styled.js
+++ b/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',