update style

App.js

@@ -141,12 +141,18 @@ class App extends React.PureComponent {
             name="2"
             component={Quiz}
             options={({navigation}) => ({
-              //title: 'C Major',
+              title: 'Scale',
+              headerTitleStyle: {
+                fontFamily: 'Gilroy-Bold',
+                fontSize: 20,
+                lineHeight: 25,
+                marginHorizontal: Dimensions.get('window').width * 0.15,
+                color: '#3B3A39',
+              },
               headerStyle: {
                 backgroundColor: '#E07EF9',
               },
               headerTintColor: '#fff',
-              title: '',
               headerTransparent: true,
               headerBackImage: () => (
                 <Icon
@@ -166,12 +172,18 @@ class App extends React.PureComponent {
             name="3"
             component={Listen}
             options={({navigation}) => ({
-              //title: 'C Major',
+              title: 'Listen Skill',
               headerStyle: {
                 backgroundColor: '#E07EF9',
               },
+              headerTitleStyle: {
+                fontFamily: 'Gilroy-Bold',
+                fontSize: 30,
+                lineHeight: 25,
+                marginHorizontal: Dimensions.get('window').width * 0.15,
+                color: '#3B3A39',
+              },
               headerTintColor: '#fff',
-              title: '',
               headerTransparent: true,
               headerBackImage: () => (
                 <Icon
@@ -201,7 +213,6 @@ class App extends React.PureComponent {
                 fontFamily: 'Gilroy-Bold',
                 fontSize: 20,
                 lineHeight: 25,
-                marginHorizontal: Dimensions.get('window').width * 0.15,
               },
               headerBackImage: () => (
                 <Image

screens/data.js

@@ -2,115 +2,115 @@
 const notes = [
   {
     name: 'C Major',
-    image: require('../media/img/Cmajor.png'),
+    image: require('../media/img/img_cmajor.png'),
   },
   {
     name: 'D Major',
-    image: require('../media/img/Dmajor.png'),
+    image: require('../media/img/img_dmajor.png'),
   },
   {
     name: 'E Major',
-    image: require('../media/img/Emajor.png'),
+    image: require('../media/img/img_emajor.png'),
   },
   {
     name: 'F Sharp Major',
-    image: require('../media/img/Fsmajor.png'),
+    image: require('../media/img/img_fsharpmajor.png'),
   },
   {
     name: 'F Major',
-    image: require('../media/img/Fmajor.png'),
+    image: require('../media/img/img_fmajor.png'),
   },
   {
     name: 'E Flat Major',
-    image: require('../media/img/Eflatmajor.png'),
+    image: require('../media/img/img_eflatmajor.png'),
   },
   {
     name: 'D Flat Major',
-    image: require('../media/img/Dflatmajor.png'),
+    image: require('../media/img/img_dflatmajor.png'),
   },
   {
     name: 'G Major',
-    image: require('../media/img/Gmajor.png'),
+    image: require('../media/img/img_gmajor.png'),
   },
   {
     name: 'A Major',
-    image: require('../media/img/Amajor.png'),
+    image: require('../media/img/img_amajor.png'),
   },
   {
     name: 'B Major',
-    image: require('../media/img/Bmajor.png'),
+    image: require('../media/img/img_bmajor.png'),
   },
   {
     name: 'C Sharp Major',
-    image: require('../media/img/Csmajor.png'),
+    image: require('../media/img/img_csharpmajor.png'),
   },
   {
     name: 'B Flat Major',
-    image: require('../media/img/Bflatmajor.png'),
+    image: require('../media/img/img_bflatmajor.png'),
   },
   {
     name: 'A Flat Major',
-    image: require('../media/img/Aflatmajor.png'),
+    image: require('../media/img/img_aflatmajor.png'),
   },
   {
     name: 'G Flat Major',
-    image: require('../media/img/Gflatmajor.png'),
+    image: require('../media/img/img_gflatmajor.png'),
   },
   {
     name: 'Bass Clef C Major',
-    image: require('../media/img/bass_cmajor.png'),
+    image: require('../media/img/img_bass_cmajor.png'),
   },
   {
     name: 'Bass Clef D Major',
-    image: require('../media/img/bass_dmajor.png'),
+    image: require('../media/img/img_bass_dmajor.png'),
   },
   {
     name: 'Bass Clef E Major',
-    image: require('../media/img/bass_emajor.png'),
+    image: require('../media/img/img_bass_emajor.png'),
   },
   {
     name: 'Bass Clef F Sharp Major',
-    image: require('../media/img/bass_fsmajor.png'),
+    image: require('../media/img/img_bass_fsmajor.png'),
   },
   {
     name: 'Bass Clef F Major',
-    image: require('../media/img/bass_fmajor.png'),
+    image: require('../media/img/img_bass_fmajor.png'),
   },
   {
     name: 'Bass Clef E Flat Major',
-    image: require('../media/img/bass_eflat.png'),
+    image: require('../media/img/img_bass_eflat.png'),
   },
   {
     name: 'Bass Clef D Flat Major',
-    image: require('../media/img/bass_dflat.png'),
+    image: require('../media/img/img_bass_dflat.png'),
   },
   {
     name: 'Bass Clef G Major',
-    image: require('../media/img/bass_gmajor.png'),
+    image: require('../media/img/img_bass_gmajor.png'),
   },
   {
     name: 'Bass Clef A Major',
-    image: require('../media/img/bass_amajor.png'),
+    image: require('../media/img/img_bass_amajor.png'),
   },
   {
     name: 'Bass Clef B Major',
-    image: require('../media/img/bass_bmajor.png'),
+    image: require('../media/img/img_bass_bmajor.png'),
   },
   {
     name: 'Bass Clef C Sharp Major',
-    image: require('../media/img/bass_csmajor.png'),
+    image: require('../media/img/img_bass_csmajor.png'),
   },
   {
     name: 'Bass Clef B Flat Major',
-    image: require('../media/img/bass_bflat.png'),
+    image: require('../media/img/img_bass_bflat.png'),
   },
   {
     name: 'Bass Clef A Flat Major',
-    image: require('../media/img/bass_aflat.png'),
+    image: require('../media/img/img_bass_aflat.png'),
   },
   {
     name: 'Bass Clef G Flat Major',
-    image: require('../media/img/bass_gflat.png'),
+    image: require('../media/img/img_bass_gflat.png'),
   },
 ];
 

screens/listening.js

@@ -67,6 +67,16 @@ const NOTESBLACK = [{name: 'A#0', left: 0.053},
 const keywordsList = [];
 const corSound = require('../media/sound/correct.mp3');
 const wroSound = require('../media/sound/wrong.mp3');
+const correctIcon = require('../media/img/img_smile.png');
+const wrongIcon = require('../media/img/img_sad.png');
+const doneIcon = require('../media/img/img_achieve.png');
+const quitIcon = require('../media/img/img_qiut.png');
+const wroIcon = require('../media/img/icon_wrong.png');
+const corIcon = require('../media/img/icon_check.png');
+const timerIcon = require('../media/img/icon_timer.png');
+const rightIcon = require('../media/img/btn_right.png');
+const leftIcon = require('../media/img/btn_left.png');
+const playIcon = require('../media/img/btn_play.png');
 const keySound = Listennotes;
 
 var soundN = '';

style/styleQuiz.js

@@ -180,9 +180,6 @@ export default StyleSheet.create({
   logo: {
     height: config.deviceWidth * 0.22,
     width: config.deviceHeight * 0.5,
-    borderColor: 'black',
-    borderWidth: 3,
-    borderRadius: 10,
     position: 'absolute',
     marginTop: config.deviceWidth * 0.11,
     backgroundColor:'white',
@@ -271,7 +268,7 @@ export default StyleSheet.create({
   selectedKeywordStyle: {
      width: config.deviceWidth * 0.075,
     alignItems: 'center',
-    backgroundColor: '#EEA1E1',
+    backgroundColor: '#FCE1FF',
     borderRightWidth: 1,
     borderColor: 'black',
     borderBottomWidth: 1,
@@ -283,10 +280,14 @@ export default StyleSheet.create({
     height: '55%',
     width: '5%',
     position: 'absolute',
+     borderWidth: 0.5,
+    borderColor: '#707070',
   },
   SbuttonB1: {
     alignItems: 'center',
-    backgroundColor: '#92ddea',
+    backgroundColor: '#FCE1FF',
+    borderWidth: 0.5,
+    borderColor: '#707070',
     height: '55%',
     width: '5%',
     position: 'absolute',