Updating UI

screens/listening.js

@@ -550,7 +550,6 @@ class Listen extends React.Component {
             <Image style={{width:'70%', height:'90%', paddingHorizontal: width * 0.04, paddingVertical: height * 0.03}} source={rightIcon}/>
             </TouchableOpacity>
           </View>
-          <View style={{backgroundColor:'#9F9F9F', position: 'absolute'}}/>
             <View style={styles.screenA}>
               {NOTESWHITE.slice(0, 13).map((item,id) => (
                 <TouchableHighlight style={ keywordsList.find((element) => element === item.name) ? styles.selectedKeywordStyle : styles.buttonStyle}
@@ -567,6 +566,7 @@ class Listen extends React.Component {
                 </TouchableHighlight>
               ))}
             </View>
+            <View style={{backgroundColor:'rgba(0,0,0,0.7)', position: 'absolute', height:width * 0.8, width:height}}/>
         </View>
 
         <View style={styles.screen}>
@@ -597,6 +597,7 @@ class Listen extends React.Component {
               ))}
             </View>
           </View>
+          <View style={{backgroundColor:'rgba(0,0,0,0.7)', position: 'absolute', height:width * 0.8, width:height}}/>
         </View>
 
         <View style={styles.screen}>
@@ -627,6 +628,7 @@ class Listen extends React.Component {
               ))}
             </View>
           </View>
+          <View style={{backgroundColor:'rgba(0,0,0,0.7)', position: 'absolute', height:width * 0.8, width:height}}/>
         </View>
 
         <View style={styles.screen}>
@@ -654,6 +656,7 @@ class Listen extends React.Component {
               ))}
             </View>
           </View>
+          <View style={{backgroundColor:'rgba(0,0,0,0.7)', position: 'absolute', height:width * 0.8, width:height}}/>
           </View>
       </ScrollView>
       );

screens/metronome.js

@@ -1181,7 +1181,7 @@ getRotationAnimation = () => {
            <View style={{flexDirection: 'row', marginTop: config.deviceHeight * 0.015}}>
               <TouchableOpacity style={{borderColor:'#BDBDBD',borderWidth:1,backgroundColor:'#FFC107', width:'17%', height:'100%', marginLeft : config.deviceWidth * 0.025, borderRadius:8}} onPress={() => this.setState({showSet: true})}>
               <Image style={{height:60, width:60}} source={settingsIcon}/></TouchableOpacity>
-              <Image style={{height:40, width:40, marginHorizontal: width * 0.25, marginTop:'6%'}} source={rotateLeftIcon}/>
+              <Image style={{height:40, width:40, marginHorizontal: width * 0.25, marginTop:'4%'}} source={rotateLeftIcon}/>
               <TouchableOpacity style={{borderColor:'#BDBDBD',borderWidth:1,backgroundColor:'#FFC107', width:'17%', height:'100%',borderRadius:8}}  onPress={() => this.setState({showList: true})}>
                   <Image style={{height:60, width:60}} source={listIcon}/>
               </TouchableOpacity>

style/styleMetronome.js

@@ -29,18 +29,6 @@ export default StyleSheet.create({
     padding:10,
   },
 
-
-
-
-
-
-
-
-
-
-
-
-
   modal1:{
     backgroundColor: '#545252',
     marginTop:296,