4
4
Text ,
5
5
TouchableOpacity ,
6
6
StyleSheet ,
7
- Image ,
8
7
Platform ,
9
8
} from 'react-native' ;
9
+ import { SafeAreaView } from 'react-native-safe-area-context' ;
10
10
import AsyncStorage from '@react-native-async-storage/async-storage' ;
11
11
import { CommonActions } from '@react-navigation/native' ;
12
12
@@ -33,31 +33,26 @@ const Secret = ({ navigation, route }) => {
33
33
} , [ route ] ) ;
34
34
35
35
return (
36
- < View style = { styles . container } >
37
- < View style = { styles . roundRect } >
38
- < Text style = { styles . secretLabel } > Your Secret</ Text >
39
- < Text style = { styles . secretText } > { secret } </ Text >
40
- < View style = { styles . checkmarkRow } >
41
- < Image
42
- source = { require ( '../../assets/checkmark.png' ) }
43
- style = { styles . checkmark }
44
- />
45
- < Text style = { styles . backedUpText } > Registered with Juicebox</ Text >
46
- </ View >
47
- </ View >
36
+ < SafeAreaView style = { styles . container } >
48
37
< TouchableOpacity style = { styles . signOutButton } onPress = { handleSignOut } >
49
38
< Text style = { styles . signOutButtonText } > Sign Out</ Text >
50
39
</ TouchableOpacity >
51
- </ View >
40
+ < View style = { styles . roundRectContainer } >
41
+ < View style = { styles . roundRect } >
42
+ < Text style = { styles . secretLabel } > Secret Key</ Text >
43
+ < Text style = { styles . secretText } > { secret } </ Text >
44
+ </ View >
45
+ </ View >
46
+ </ SafeAreaView >
52
47
) ;
53
48
} ;
54
49
55
50
const styles = StyleSheet . create ( {
56
51
container : {
57
52
flex : 1 ,
58
- alignItems : 'center ' ,
59
- justifyContent : 'center ' ,
60
- backgroundColor : '#ffffff ' ,
53
+ alignItems : 'flex-end ' ,
54
+ justifyContent : 'flex-start ' ,
55
+ backgroundColor : '#1c1c1c ' ,
61
56
} ,
62
57
checkmarkRow : {
63
58
flexDirection : 'row' ,
@@ -69,37 +64,46 @@ const styles = StyleSheet.create({
69
64
height : 15 ,
70
65
} ,
71
66
backedUpText : {
72
- color : '#43A047 ' ,
67
+ color : '#006400 ' ,
73
68
marginLeft : 8 ,
74
69
fontSize : 14 ,
75
70
fontWeight : 'bold' ,
76
71
} ,
77
- roundRect : {
78
- backgroundColor : '#f7f7f7 ' ,
79
- borderRadius : 20 ,
72
+ roundRectContainer : {
73
+ width : '100% ' ,
74
+ flex : 1 ,
80
75
alignItems : 'center' ,
81
- maxWidth : 360 ,
76
+ justifyContent : 'center' ,
77
+ } ,
78
+ roundRect : {
79
+ backgroundColor : '#181818' ,
80
+ borderColor : '#474747' ,
81
+ borderWidth : 1 ,
82
+ borderRadius : 18 ,
83
+ alignItems : 'flex-start' ,
84
+ minWidth : 360 ,
85
+ paddingHorizontal : 20 ,
82
86
} ,
83
87
secretText : {
84
88
fontSize : 15 ,
85
89
fontWeight : '300' ,
86
90
fontFamily : Platform . OS === 'ios' ? 'Courier New' : 'monospace' ,
87
- color : '#032f62 ' ,
91
+ color : '#ABABAB ' ,
88
92
paddingVertical : 10 ,
89
- paddingHorizontal : 20 ,
93
+ marginBottom : 8 ,
90
94
} ,
91
95
secretLabel : {
92
96
fontWeight : 'bold' ,
93
97
fontSize : 14 ,
94
- color : '#6a737d ' ,
98
+ color : '#ffffff ' ,
95
99
marginTop : 15 ,
96
100
} ,
97
101
signOutButton : {
98
102
paddingVertical : 10 ,
99
103
paddingHorizontal : 20 ,
100
104
} ,
101
105
signOutButtonText : {
102
- color : '#531ac8 ' ,
106
+ color : '#fffdf8 ' ,
103
107
fontSize : 14 ,
104
108
fontWeight : 'bold' ,
105
109
} ,
0 commit comments