Skip to content

P
pianoApp
Commit a0a9af4c authored by norhalimah's avatar norhalimah
Browse files
Options

update style

parent 11a4245d
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 60 additions and 38 deletions
App.js
View file @ a0a9af4c
...@@ -141,12 +141,18 @@ class App extends React.PureComponent { ...@@ -141,12 +141,18 @@ class App extends React.PureComponent {
name="2" name="2"
component={Quiz} component={Quiz}
options={({navigation}) => ({ 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: { headerStyle: {
backgroundColor: '#E07EF9', backgroundColor: '#E07EF9',
}, },
headerTintColor: '#fff', headerTintColor: '#fff',
title: '',
headerTransparent: true, headerTransparent: true,
headerBackImage: () => ( headerBackImage: () => (
<Icon <Icon
...@@ -166,12 +172,18 @@ class App extends React.PureComponent { ...@@ -166,12 +172,18 @@ class App extends React.PureComponent {
name="3" name="3"
component={Listen} component={Listen}
options={({navigation}) => ({ options={({navigation}) => ({
//title: 'C Major', title: 'Listen Skill',
headerStyle: { headerStyle: {
backgroundColor: '#E07EF9', backgroundColor: '#E07EF9',
}, },
headerTitleStyle: {
fontFamily: 'Gilroy-Bold',
fontSize: 30,
lineHeight: 25,
marginHorizontal: Dimensions.get('window').width * 0.15,
color: '#3B3A39',
},
headerTintColor: '#fff', headerTintColor: '#fff',
title: '',
headerTransparent: true, headerTransparent: true,
headerBackImage: () => ( headerBackImage: () => (
<Icon <Icon
...@@ -201,7 +213,6 @@ class App extends React.PureComponent { ...@@ -201,7 +213,6 @@ class App extends React.PureComponent {
fontFamily: 'Gilroy-Bold', fontFamily: 'Gilroy-Bold',
fontSize: 20, fontSize: 20,
lineHeight: 25, lineHeight: 25,
marginHorizontal: Dimensions.get('window').width * 0.15,
}, },
headerBackImage: () => ( headerBackImage: () => (
<Image <Image
......
screens/data.js
View file @ a0a9af4c
...@@ -2,115 +2,115 @@ ...@@ -2,115 +2,115 @@
const notes = [ const notes = [
{ {
name: 'C Major', name: 'C Major',
image: require('../media/img/Cmajor.png'), image: require('../media/img/img_cmajor.png'),
}, },
{ {
name: 'D Major', name: 'D Major',
image: require('../media/img/Dmajor.png'), image: require('../media/img/img_dmajor.png'),
}, },
{ {
name: 'E Major', name: 'E Major',
image: require('../media/img/Emajor.png'), image: require('../media/img/img_emajor.png'),
}, },
{ {
name: 'F Sharp Major', name: 'F Sharp Major',
image: require('../media/img/Fsmajor.png'), image: require('../media/img/img_fsharpmajor.png'),
}, },
{ {
name: 'F Major', name: 'F Major',
image: require('../media/img/Fmajor.png'), image: require('../media/img/img_fmajor.png'),
}, },
{ {
name: 'E Flat Major', name: 'E Flat Major',
image: require('../media/img/Eflatmajor.png'), image: require('../media/img/img_eflatmajor.png'),
}, },
{ {
name: 'D Flat Major', name: 'D Flat Major',
image: require('../media/img/Dflatmajor.png'), image: require('../media/img/img_dflatmajor.png'),
}, },
{ {
name: 'G Major', name: 'G Major',
image: require('../media/img/Gmajor.png'), image: require('../media/img/img_gmajor.png'),
}, },
{ {
name: 'A Major', name: 'A Major',
image: require('../media/img/Amajor.png'), image: require('../media/img/img_amajor.png'),
}, },
{ {
name: 'B Major', name: 'B Major',
image: require('../media/img/Bmajor.png'), image: require('../media/img/img_bmajor.png'),
}, },
{ {
name: 'C Sharp Major', name: 'C Sharp Major',
image: require('../media/img/Csmajor.png'), image: require('../media/img/img_csharpmajor.png'),
}, },
{ {
name: 'B Flat Major', name: 'B Flat Major',
image: require('../media/img/Bflatmajor.png'), image: require('../media/img/img_bflatmajor.png'),
}, },
{ {
name: 'A Flat Major', name: 'A Flat Major',
image: require('../media/img/Aflatmajor.png'), image: require('../media/img/img_aflatmajor.png'),
}, },
{ {
name: 'G Flat Major', name: 'G Flat Major',
image: require('../media/img/Gflatmajor.png'), image: require('../media/img/img_gflatmajor.png'),
}, },
{ {
name: 'Bass Clef C Major', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', 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', name: 'Bass Clef G Flat Major',
image: require('../media/img/bass_gflat.png'), image: require('../media/img/img_bass_gflat.png'),
}, },
]; ];
......
screens/listening.js
View file @ a0a9af4c
...@@ -67,6 +67,16 @@ const NOTESBLACK = [{name: 'A#0', left: 0.053}, ...@@ -67,6 +67,16 @@ const NOTESBLACK = [{name: 'A#0', left: 0.053},
const keywordsList = []; const keywordsList = [];
const corSound = require('../media/sound/correct.mp3'); const corSound = require('../media/sound/correct.mp3');
const wroSound = require('../media/sound/wrong.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; const keySound = Listennotes;
var soundN = ''; var soundN = '';
......
screens/quiz.js
View file @ a0a9af4c
This diff is collapsed.
style/styleQuiz.js
View file @ a0a9af4c
...@@ -180,9 +180,6 @@ export default StyleSheet.create({ ...@@ -180,9 +180,6 @@ export default StyleSheet.create({
logo: { logo: {
height: config.deviceWidth * 0.22, height: config.deviceWidth * 0.22,
width: config.deviceHeight * 0.5, width: config.deviceHeight * 0.5,
borderColor: 'black',
borderWidth: 3,
borderRadius: 10,
position: 'absolute', position: 'absolute',
marginTop: config.deviceWidth * 0.11, marginTop: config.deviceWidth * 0.11,
backgroundColor:'white', backgroundColor:'white',
...@@ -271,7 +268,7 @@ export default StyleSheet.create({ ...@@ -271,7 +268,7 @@ export default StyleSheet.create({
selectedKeywordStyle: { selectedKeywordStyle: {
width: config.deviceWidth * 0.075, width: config.deviceWidth * 0.075,
alignItems: 'center', alignItems: 'center',
backgroundColor: '#EEA1E1', backgroundColor: '#FCE1FF',
borderRightWidth: 1, borderRightWidth: 1,
borderColor: 'black', borderColor: 'black',
borderBottomWidth: 1, borderBottomWidth: 1,
...@@ -283,10 +280,14 @@ export default StyleSheet.create({ ...@@ -283,10 +280,14 @@ export default StyleSheet.create({
height: '55%', height: '55%',
width: '5%', width: '5%',
position: 'absolute', position: 'absolute',
borderWidth: 0.5,
borderColor: '#707070',
}, },
SbuttonB1: { SbuttonB1: {
alignItems: 'center', alignItems: 'center',
backgroundColor: '#92ddea', backgroundColor: '#FCE1FF',
borderWidth: 0.5,
borderColor: '#707070',
height: '55%', height: '55%',
width: '5%', width: '5%',
position: 'absolute', position: 'absolute',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment