From 8491171b82b5d7a7979c6274c23038b832c91fdf Mon Sep 17 00:00:00 2001
From: balzack <roland.osborne@gmail.com>
Date: Mon, 28 Aug 2023 23:40:32 -0700
Subject: [PATCH] updating seal modal

---
 app/mobile/src/session/settings/Settings.jsx  | 32 ++++++++++++++-----
 .../src/session/settings/useSettings.hook.js  |  2 +-
 2 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/app/mobile/src/session/settings/Settings.jsx b/app/mobile/src/session/settings/Settings.jsx
index aaad2cf2..72ed8e39 100644
--- a/app/mobile/src/session/settings/Settings.jsx
+++ b/app/mobile/src/session/settings/Settings.jsx
@@ -201,7 +201,7 @@ export function Settings() {
             <View style={styles.modalContainer}>
               <View style={styles.modalClose}>
                 <TouchableOpacity activeOpacity={1} onPress={actions.hideEditSeal}>
-                  <MatIcons name="close" size={20} color={Colors.text} />
+                  <MatIcons name="close" size={20} color={Colors.descriptionText} />
                 </TouchableOpacity>
               </View>
               <Text style={styles.modalHeader}>{ state.strings.sealedTopics }</Text>
@@ -212,17 +212,31 @@ export function Settings() {
                     <TextInput style={styles.inputText} value={state.sealPassword} onChangeText={actions.setSealPassword}
                         autoCapitalize={'none'} secureTextEntry={state.hidePassword} placeholder={state.strings.password}
                         placeholderTextColor={Colors.inputPlaceholder} />
-                    <TouchableOpacity style={styles.inputVisibility} activeOpacity={1} onPress={actions.showPassword}>
-                      <MatIcons name="eye-outline" size={16} color={Colors.inputPlaceholder} />
-                    </TouchableOpacity>
+                    { state.hidePassword && (
+                      <TouchableOpacity style={styles.inputVisibility} activeOpacity={1} onPress={actions.showPassword}>
+                        <MatIcons name="eye-outline" size={16} color={Colors.inputPlaceholder} />
+                      </TouchableOpacity>
+                    )}
+                    { !state.hidePassword && (
+                      <TouchableOpacity style={styles.inputVisibility} activeOpacity={1} onPress={actions.hidePassword}>
+                        <MatIcons name="eye-off-outline" size={16} color={Colors.inputPlaceholder} />
+                      </TouchableOpacity>
+                    )}
                   </View>
                   <View style={styles.modalInput}>
                     <TextInput style={styles.inputText} value={state.sealConfirm} onChangeText={actions.setSealConfirm}
                         autoCapitalize={'none'} secureTextEntry={state.hideConfirm} placeholder={state.strings.confirmPassword}
                         placeholderTextColor={Colors.inputPlaceholder} />
-                    <TouchableOpacity style={styles.inputVisibility} activeOpacity={1} onPress={actions.showConfirm}>
-                      <MatIcons name="eye-outline" size={16} color={Colors.inputPlaceholder} />
-                    </TouchableOpacity>
+                    { state.hideConfirm && (
+                      <TouchableOpacity style={styles.inputVisibility} activeOpacity={1} onPress={actions.showConfirm}>
+                        <MatIcons name="eye-outline" size={16} color={Colors.inputPlaceholder} />
+                      </TouchableOpacity>
+                    )}
+                    { !state.hideConfirm && (
+                      <TouchableOpacity style={styles.inputVisibility} activeOpacity={1} onPress={actions.showConfirm}>
+                        <MatIcons name="eye-off-outline" size={16} color={Colors.inputPlaceholder} />
+                      </TouchableOpacity>
+                    )}
                   </View>
                   { state.sealPassword === state.sealConfirm && state.sealPassword && (
                     <TouchableOpacity style={styles.enabledButton} activeOpacity={1} onPress={actions.generateKey}>
@@ -240,7 +254,9 @@ export function Settings() {
                 <Text style={styles.modalDescription}>{ state.strings.sealLocked }</Text>
               )}
               { state.sealEnabled && state.sealUnlocked && (
-                <Text style={styles.modalDescritpion}>{ state.strings.sealUnlocked }</Text>
+                <>
+                  <Text style={styles.modalDescription}>{ state.strings.sealUnlocked }</Text>
+                </>
               )}
             </View>
           </KeyboardAvoidingView>
diff --git a/app/mobile/src/session/settings/useSettings.hook.js b/app/mobile/src/session/settings/useSettings.hook.js
index 4f178b25..7efc6934 100644
--- a/app/mobile/src/session/settings/useSettings.hook.js
+++ b/app/mobile/src/session/settings/useSettings.hook.js
@@ -37,7 +37,7 @@ export function useSettings() {
     const sealKey = account.state.sealKey;
     const sealEnabled = seal?.publicKey != null;
     const sealUnlocked = seal?.publicKey === sealKey?.public && sealKey?.private && sealKey?.public;
-    updateState({ sealable, seal, sealKey, sealEnabled: false, sealUnlocked });
+    updateState({ sealable, seal, sealKey, sealEnabled, sealUnlocked });
   }, [account.state]);
 
   const unlock = async () => {