Skip to content

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

styling..

parent 581d1a12
Show whitespace changes
Inline Side-by-side
Showing with 539 additions and 503 deletions
android/app/src/main/java/com/pianoapp/MainActivity.java
View file @ 3e25fd61
...@@ -13,7 +13,7 @@ public class MainActivity extends ReactActivity { ...@@ -13,7 +13,7 @@ public class MainActivity extends ReactActivity {
*/ */
@Override @Override
protected String getMainComponentName() { protected String getMainComponentName() {
return "PianoApp"; return "PianoSmart";
} }
@Override @Override
......
android/app/src/main/res/values/strings.xml
View file @ 3e25fd61
<resources> <resources>
<string name="app_name">PianoApp</string> <string name="app_name">PianoSmart</string>
</resources> </resources>
android/settings.gradle
View file @ 3e25fd61
rootProject.name = 'PianoApp' rootProject.name = 'PianoSmart'
include ':@react-native-community_art' include ':@react-native-community_art'
project(':@react-native-community_art').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/art/android') project(':@react-native-community_art').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/art/android')
include ':@react-native-community_art' include ':@react-native-community_art'
......
app.json
View file @ 3e25fd61
{ {
"name": "PianoApp", "name": "PianoSmart",
"displayName": "PianoApp" "displayName": "PianoSmart"
} }
\ No newline at end of file
ios/PianoAppTests/PianoAppTests.m → ios/PianoSmartTests/PianoSmartTests.m
View file @ 3e25fd61
...@@ -7,11 +7,11 @@ ...@@ -7,11 +7,11 @@
#define TIMEOUT_SECONDS 600 #define TIMEOUT_SECONDS 600
#define TEXT_TO_LOOK_FOR @"Welcome to React" #define TEXT_TO_LOOK_FOR @"Welcome to React"
@interface PianoAppTests : XCTestCase @interface PianoSmartTests : XCTestCase
@end @end
@implementation PianoAppTests @implementation PianoSmartTests
- (BOOL)findSubviewInView:(UIView *)view matching:(BOOL(^)(UIView *view))test - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL(^)(UIView *view))test
{ {
......
ios/Podfile
View file @ 3e25fd61
...@@ -3,7 +3,7 @@ require_relative '../node_modules/@react-native-community/cli-platform-ios/nativ ...@@ -3,7 +3,7 @@ require_relative '../node_modules/@react-native-community/cli-platform-ios/nativ
platform :ios, '10.0' platform :ios, '10.0'
target 'PianoApp' do target 'PianoSmart' do
config = use_native_modules! config = use_native_modules!
use_react_native!(:path => config["reactNativePath"]) use_react_native!(:path => config["reactNativePath"])
...@@ -22,7 +22,7 @@ target 'PianoApp' do ...@@ -22,7 +22,7 @@ target 'PianoApp' do
pod 'ReactNativeART', :path => '../node_modules/@react-native-community/art' pod 'ReactNativeART', :path => '../node_modules/@react-native-community/art'
target 'PianoAppTests' do target 'PianoSmartTests' do
inherit! :complete inherit! :complete
# Pods for testing # Pods for testing
end end
...@@ -37,10 +37,10 @@ target 'PianoApp' do ...@@ -37,10 +37,10 @@ target 'PianoApp' do
end end
end end
target 'PianoApp-tvOS' do target 'PianoSmart-tvOS' do
# Pods for PianoApp-tvOS # Pods for PianoSmart-tvOS
target 'PianoApp-tvOSTests' do target 'PianoSmart-tvOSTests' do
inherit! :search_paths inherit! :search_paths
# Pods for testing # Pods for testing
end end
......
package.json
View file @ 3e25fd61
{ {
"name": "PianoApp", "name": "PianoSmart",
"version": "0.0.1", "version": "0.0.1",
"private": true, "private": true,
"scripts": { "scripts": {
......
screens/listening.js
View file @ 3e25fd61
...@@ -4,12 +4,10 @@ ...@@ -4,12 +4,10 @@
/* eslint-disable prettier/prettier */ /* eslint-disable prettier/prettier */
import React from 'react'; import React from 'react';
import { import {
ImageBackground,
Text, Text,
View, View,
StatusBar, StatusBar,
TouchableHighlight, TouchableHighlight,
Button,
Modal, Modal,
TouchableOpacity, TouchableOpacity,
Dimensions, Dimensions,
...@@ -691,7 +689,7 @@ showDone(){ ...@@ -691,7 +689,7 @@ showDone(){
marginTop:10, marginTop:10,
marginBottom:10, marginBottom:10,
}} }}
onPress={() => this.backAction()}> onPress={() => this.playButton()}>
<Text style={{color: '#FFFFFF', <Text style={{color: '#FFFFFF',
fontFamily: 'Gilroy-Bold', fontSize:16, textAlign: 'left', lineHeight:20, paddingHorizontal:Dimensions.get('window').width * 0.13}}>PLAY</Text> fontFamily: 'Gilroy-Bold', fontSize:16, textAlign: 'left', lineHeight:20, paddingHorizontal:Dimensions.get('window').width * 0.13}}>PLAY</Text>
</TouchableOpacity> </TouchableOpacity>
......
screens/quiz.js
View file @ 3e25fd61
...@@ -33,7 +33,7 @@ const con = { ...@@ -33,7 +33,7 @@ const con = {
deviceWidth: Dimensions.get('window').width, deviceWidth: Dimensions.get('window').width,
deviceHeight: Dimensions.get('window').height, deviceHeight: Dimensions.get('window').height,
}; };
const date = moment().utcOffset('+08:00').format('D MMM'); const date = moment().utcOffset('+08:00').format('DD/MM/YYYY');
const time = moment().utcOffset('+08:00').format('h:mm a'); const time = moment().utcOffset('+08:00').format('h:mm a');
const day = moment().utcOffset('+08:00').format('ddd'); const day = moment().utcOffset('+08:00').format('ddd');
const path1 = RNFS.DocumentDirectoryPath + '/counter.txt'; const path1 = RNFS.DocumentDirectoryPath + '/counter.txt';
...@@ -101,7 +101,7 @@ class Quiz extends React.Component { ...@@ -101,7 +101,7 @@ class Quiz extends React.Component {
showQuit : false, showQuit : false,
maxCount : 5, maxCount : 5,
records: [], records: [],
click: false, click: true,
keyCount: 8, keyCount: 8,
}; };
} }
...@@ -138,10 +138,10 @@ class Quiz extends React.Component { ...@@ -138,10 +138,10 @@ class Quiz extends React.Component {
} }
this.setState({keywordsList: list}); this.setState({keywordsList: list});
if (this.state.keywordsList.length === 0 ){ if (this.state.keywordsList.length === 0 ){
this.setState({click: false}); this.setState({click: true});
} }
if (this.state.keywordsList.length > 0 ) { if (this.state.keywordsList.length > 0 ) {
this.setState({click: true}); this.setState({click: false});
} }
}; };
...@@ -192,7 +192,7 @@ class Quiz extends React.Component { ...@@ -192,7 +192,7 @@ class Quiz extends React.Component {
console.log('error'); console.log('error');
console.log(this.state.name); console.log(this.state.name);
} }
this.setState({keyCount: 8}); this.setState({keyCount: 8, click: true});
}; };
ansCMajor = ()=> { ansCMajor = ()=> {
...@@ -726,15 +726,12 @@ class Quiz extends React.Component { ...@@ -726,15 +726,12 @@ class Quiz extends React.Component {
const value = await AsyncStorage.getItem('@notes_key'); const value = await AsyncStorage.getItem('@notes_key');
console.log(JSON.parse(value)); console.log(JSON.parse(value));
if (value !== null) { if (value !== null) {
// We have data!!
this.setState({ this.setState({
logbook: JSON.parse(value), logbook: JSON.parse(value),
}); });
// console.log(this.state.logbook);
RNFS.readFile(path1, 'ascii') RNFS.readFile(path1, 'ascii')
.then((ccc) => { .then((ccc) => {
console.log('has notes has counter'); console.log('has notes has counter');
// console.log(ccc);
imageN = Math.floor(Math.random() * this.state.logbook.length); imageN = Math.floor(Math.random() * this.state.logbook.length);
this.setState({ this.setState({
name : this.state.logbook[imageN], name : this.state.logbook[imageN],
...@@ -753,7 +750,6 @@ class Quiz extends React.Component { ...@@ -753,7 +750,6 @@ class Quiz extends React.Component {
}); });
console.log(this.state.name); console.log(this.state.name);
indexN = Notes.findIndex(item=> item.name === this.state.name); indexN = Notes.findIndex(item=> item.name === this.state.name);
// console.log(indexN);
}); });
} }
else { else {
...@@ -767,8 +763,6 @@ class Quiz extends React.Component { ...@@ -767,8 +763,6 @@ class Quiz extends React.Component {
maxCount : res, maxCount : res,
}); });
console.log(this.state.name); console.log(this.state.name);
//console.log(res);
}) })
.catch(() => { .catch(() => {
// console.log(err.message, err.code); // console.log(err.message, err.code);
...@@ -780,13 +774,12 @@ class Quiz extends React.Component { ...@@ -780,13 +774,12 @@ class Quiz extends React.Component {
maxCount : 5, maxCount : 5,
}); });
console.log(this.state.name); console.log(this.state.name);
}); });
} }
} catch (error) { } catch (error) {
// Error retrieving data // Error retrieving data
} }
}; };
handlerArgCall = async(correct, wrong, timer) => { handlerArgCall = async(correct, wrong, timer) => {
var listR = []; var listR = [];
...@@ -805,7 +798,6 @@ class Quiz extends React.Component { ...@@ -805,7 +798,6 @@ class Quiz extends React.Component {
value = JSON.parse(value); value = JSON.parse(value);
value.push(obj); value.push(obj);
// console.log(value); // console.log(value);
// console.log('We have data!!');
AsyncStorage.setItem('@storage_key', JSON.stringify(value), (err)=> { AsyncStorage.setItem('@storage_key', JSON.stringify(value), (err)=> {
if (err){ if (err){
console.log('an error'); console.log('an error');
...@@ -823,14 +815,13 @@ class Quiz extends React.Component { ...@@ -823,14 +815,13 @@ class Quiz extends React.Component {
console.log('an error'); console.log('an error');
throw err; throw err;
} }
// console.log('success'); //console.log(JSON.stringify(this.state.listN));
}).catch((err)=> { }).catch((err)=> {
console.log('error is: ' + err); console.log('error is: ' + err);
}); });
} }
} catch (error) { } catch (error) {
// Error retrieving data // Error retrieving data
} }
}; };
//reset //reset
...@@ -841,15 +832,16 @@ class Quiz extends React.Component { ...@@ -841,15 +832,16 @@ class Quiz extends React.Component {
correct: this.state.correct, correct: this.state.correct,
wrong: this.state.wrong, wrong: this.state.wrong,
keyCount:8, keyCount:8,
click:true,
}); });
}; };
clickSubmitButton (){ clickSubmitButton (){
if (this.state.click === false){ if (this.state.click === true){
return ( return (
<View style={{flexDirection: 'row', width:Dimensions.get('window').width, marginBottom:Dimensions.get('window').height * 0.05}}> <View style={styles.viewSubmitButton}>
<TouchableOpacity style={{backgroundColor:'#E7E7E7', borderRadius:8, width:Dimensions.get('window').width * 0.22, marginHorizontal:Dimensions.get('window').width * 0.75, marginTop:'3%'}} onPress={this.onSubmit} > <TouchableOpacity style={styles.buttonSubmitButtonT} onPress={this.onSubmit} >
<Text style={{fontFamily:'Gilroy-Bold', fontSize:16, textAlign:'center', lineHeight:20, color:'#848484', paddingVertical:Dimensions.get('window').height * 0.035}}> <Text style={styles.textSubmitButtonT}>
Submit Submit
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
...@@ -858,9 +850,9 @@ class Quiz extends React.Component { ...@@ -858,9 +850,9 @@ class Quiz extends React.Component {
} }
else { else {
return ( return (
<View style={{flexDirection: 'row', width:Dimensions.get('window').width, marginBottom:Dimensions.get('window').height * 0.05}}> <View style={styles.viewSubmitButton}>
<TouchableOpacity style={{backgroundColor:'#EF476F', borderRadius:8, width:Dimensions.get('window').width * 0.22, marginHorizontal:Dimensions.get('window').width * 0.75, marginTop:'3%'}} onPress={this.onSubmit} > <TouchableOpacity style={styles.buttonSubmitButtonF} onPress={this.onSubmit} >
<Text style={{fontFamily:'Gilroy-Bold', fontSize:16, textAlign:'center', lineHeight:20, color:'#FFFBF0', paddingVertical:Dimensions.get('window').height * 0.035}}> <Text style={styles.textSubmitButtonF}>
Submit Submit
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
...@@ -870,12 +862,12 @@ class Quiz extends React.Component { ...@@ -870,12 +862,12 @@ class Quiz extends React.Component {
} }
clickResetButton (){ clickResetButton (){
if (this.state.click === false){ if (this.state.click === true){
return ( return (
<TouchableOpacity style={{backgroundColor:'#E7E7E7', borderColor:'#E7E7E7', borderWidth:1, borderRadius:8, width:Dimensions.get('window').width * 0.22, marginHorizontal:Dimensions.get('window').width * 0.72, marginTop:Dimensions.get('window').height * 0.03}} onPress={this.onSubmit} > <TouchableOpacity style={styles.buttonResetButtonT} onPress={this.removeArray} >
<View style={{flexDirection: 'row'}}> <View style={{flexDirection: 'row'}}>
<Image style={{height:'45%', width:'12%',marginTop:'8%', marginHorizontal:'8%'}} source={undo1}/> <Image style={styles.imageResetIcon} source={undo1}/>
<Text style={{fontFamily:'Gilroy-Bold', fontSize:14, textAlign:'left', lineHeight:18, color:'#848484', paddingVertical:Dimensions.get('window').height * 0.04}}> <Text style={styles.textResetButtonT}>
Undo All Key Undo All Key
</Text> </Text>
</View> </View>
...@@ -884,68 +876,32 @@ class Quiz extends React.Component { ...@@ -884,68 +876,32 @@ class Quiz extends React.Component {
} }
else { else {
return ( return (
<TouchableOpacity style={{backgroundColor:'#FFFBF0', borderColor:'#FC8121', borderWidth:1, borderRadius:8, width:Dimensions.get('window').width * 0.22, marginHorizontal:Dimensions.get('window').width * 0.72, marginTop:Dimensions.get('window').height * 0.03}} onPress={this.onSubmit} > <TouchableOpacity style={styles.buttonResetButtonF} onPress={this.removeArray} >
<View style={{flexDirection: 'row'}}> <View style={{flexDirection: 'row'}}>
<Image style={{height:'45%', width:'12%',marginTop:'8%', marginHorizontal:'8%'}} source={undo2}/> <Image style={styles.imageResetIcon} source={undo2}/>
<Text style={{fontFamily:'Gilroy-Bold', fontSize:14, textAlign:'left', lineHeight:18, color:'#FC8121', paddingVertical:Dimensions.get('window').height * 0.04}}> <Text style={styles.textResetButtonF}>
Undo All Key Undo All Key
</Text> </Text>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
); );
} }
} }
showQuit (){ showQuit (){
if (this.state.showQuit === true){ if (this.state.showQuit === true){
return ( return (
<Modal transparent={true} visible={this.state.showQuit} animationType="slide"> <Modal transparent={true} visible={this.state.showQuit} animationType="slide">
<View style={{ backgroundColor:'rgba(0,0,0,0.7)',flex: 1}}> <View style={{ backgroundColor:'rgba(0,0,0,0.7)',flex: 1}}>
<View style={{ marginHorizontal: Dimensions.get('window').width * 0.28, <View style={styles.viewShowQuit}>
width : Dimensions.get('window').width * 0.45, <Image style={styles.quitIcon} source={quitIcon}/>
height : Dimensions.get('window').height * 0.6, <Text style={styles.textQuitScale}>Quit Scale?</Text>
marginTop : Dimensions.get('window').width * 0.13, <View style={styles.viewButtonQuit}>
alignItems: 'center', <TouchableOpacity style={styles.buttonNoQuit} onPress={() => this.setState({showQuit: false})}>
backgroundColor:'#FFFBF0', <Text style={styles.textNoQuit}>NO</Text>
borderRadius: 16}}>
<Image style={{height:'40%', width:'30%', position:'absolute', left:110, top: -45 }} source={quitIcon}/>
<Text style={{ fontSize: 24,
fontFamily: 'Gilroy-Bold',
textAlign: 'center',
lineHeight:30,
color:'#3B3A39',
paddingTop:Dimensions.get('window').height * 0.17}}>Quit Scale?</Text>
<View
style={{ alignItems: 'center',
flexDirection: 'row',
marginTop:20, justifyContent: 'center'}}>
<TouchableOpacity style={{ backgroundColor: '#FFFFFF',
padding: 15,
borderRadius: 8,
marginTop:10,
marginBottom:10,
borderColor:'#81C9C9',
borderWidth: 1,
marginRight:8}}
onPress={() => this.setState({showQuit: false})}>
<Text style={{ color: '#81C9C9',
fontFamily: 'Gilroy-Bold', fontSize:16, textAlign: 'left', lineHeight:20, paddingHorizontal:Dimensions.get('window').width * 0.04}}>NO</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity style={{ backgroundColor: 'white', <TouchableOpacity style={styles.buttonYesQuit} onPress={() => this.backAction()}>
paddingLeft: 18, <Text style={styles.textYesQuit}>YES</Text>
paddingRight: 18,
paddingTop: 15,
paddingBottom: 15,
borderRadius: 8,
marginTop:10,
marginBottom:10,
borderWidth: 1,
borderColor:'#81C9C9',
marginLeft:8}}
onPress={() => this.backAction()}>
<Text style={{color: '#81C9C9',
fontFamily: 'Gilroy-Bold', fontSize:16, textAlign: 'left', lineHeight:20, paddingHorizontal:Dimensions.get('window').width * 0.03}}>YES</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
...@@ -958,42 +914,17 @@ class Quiz extends React.Component { ...@@ -958,42 +914,17 @@ class Quiz extends React.Component {
} }
} }
showCorrect(){ showCorrect(){
if (this.state.showC === true){ if (this.state.showC === true){
return ( return (
<Modal transparent={true} visible={this.state.showC} animationType="slide"> <Modal transparent={true} visible={this.state.showC} animationType="slide">
<View style={{ backgroundColor:'rgba(0,0,0,0.7)',flex: 1}}> <View style={{ backgroundColor:'rgba(0,0,0,0.7)',flex: 1}}>
<View style={{ marginHorizontal: Dimensions.get('window').width * 0.28, <View style={styles.viewShowCorrect}>
width : Dimensions.get('window').width * 0.45, <Image style={styles.correctIcon} source={correctIcon}/>
height : Dimensions.get('window').height * 0.6, <Text style={styles.textScaleResult}>Scale Result</Text>
marginTop : Dimensions.get('window').width * 0.13, <Text style={styles.textCorrect}>Correct</Text>
alignItems: 'center', <TouchableOpacity style={styles.buttonOK} onPress={() => this.setState({showC: false})}>
backgroundColor:'#FFFBF0', <Text style={styles.textOK}>OK</Text>
borderRadius: 16}}>
<Image style={{height:'40%', width:'30%', position:'absolute', left:110, top: -45 }} source={correctIcon}/>
<Text style={{ fontSize: 20,
fontFamily: 'Gilroy-Bold',
textAlign: 'center',
lineHeight:25,
color:'#3B3A39',
paddingTop:Dimensions.get('window').height * 0.17}}>Scale Result</Text>
<Text style={{ fontSize: 24,
fontFamily: 'Gilroy-Bold',
textAlign: 'center',
lineHeight:30,
color:'#14A76C',
paddingTop:Dimensions.get('window').height * 0.02}}>Correct</Text>
<TouchableOpacity style={{ backgroundColor: '#81C9C9',
width : Dimensions.get('window').width * 0.3,
paddingTop: 15,
paddingBottom: 15,
borderRadius: 8,
marginTop:10,
marginBottom:10,
marginLeft:8}}
onPress={() => this.setState({showC: false})}>
<Text style={{color: '#FFFFFF',
fontFamily: 'Gilroy-Bold', fontSize:16, textAlign: 'left', lineHeight:20, paddingHorizontal:Dimensions.get('window').width * 0.12}}>OK</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
...@@ -1003,47 +934,19 @@ showCorrect(){ ...@@ -1003,47 +934,19 @@ showCorrect(){
else { else {
return null; return null;
} }
} }
showWrong(){ showWrong(){
if (this.state.showW === true){ if (this.state.showW === true){
return ( return (
<Modal transparent={true} visible={this.state.showW} animationType="slide"> <Modal transparent={true} visible={this.state.showW} animationType="slide">
<View style={{ backgroundColor:'rgba(0,0,0,0.7)',flex: 1}}> <View style={{ backgroundColor:'rgba(0,0,0,0.7)',flex: 1}}>
<View style={{ marginHorizontal: Dimensions.get('window').width * 0.28, <View style={styles.viewShowWrong}>
width : Dimensions.get('window').width * 0.45, <Image style={styles.wrongIcon} source={wrongIcon}/>
height : Dimensions.get('window').height * 0.6, <Text style={styles.textScaleResultW}>Scale Result</Text>
marginTop : Dimensions.get('window').width * 0.13, <Text style={styles.textWrong}>Wrong</Text>
alignItems: 'center', <TouchableOpacity style={styles.buttonOKW} onPress={() => this.setState({showW: false})}>
backgroundColor:'#FFFBF0', <Text style={styles.textOKW}>OK</Text>
borderRadius: 16}}>
<Image style={{height:'40%', width:'30%', position:'absolute', left:110, top: -45 }} source={wrongIcon}/>
<Text style={{ fontSize: 20,
fontFamily: 'Gilroy-Bold',
textAlign: 'center',
lineHeight:25,
color:'#3B3A39',
paddingTop:Dimensions.get('window').height * 0.17}}>Scale Result</Text>
<Text style={{ fontSize: 24,
fontFamily: 'Gilroy-Bold',
textAlign: 'center',
lineHeight:30,
color:'#D11427',
paddingTop:Dimensions.get('window').height * 0.02}}>Wrong</Text>
<TouchableOpacity style={{ backgroundColor: '#81C9C9',
width : Dimensions.get('window').width * 0.3,
paddingTop: 15,
paddingBottom: 15,
borderRadius: 8,
marginTop:10,
marginBottom:10,
marginLeft:8}}
onPress={() => this.setState({showW: false})}>
<Text style={{color: '#FFFFFF',
fontFamily: 'Gilroy-Bold', fontSize:16, textAlign: 'left', lineHeight:20, paddingHorizontal:Dimensions.get('window').width * 0.12}}>OK</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
...@@ -1053,57 +956,27 @@ showWrong(){ ...@@ -1053,57 +956,27 @@ showWrong(){
else { else {
return null; return null;
} }
} }
showDone(){ showDone(){
if (this.state.showDone === true){ if (this.state.showDone === true){
return ( return (
<Modal transparent={true} visible={this.state.showDone} animationType="slide"> <Modal transparent={true} visible={this.state.showDone} animationType="slide">
<View style={{ backgroundColor:'rgba(0,0,0,0.7)',flex: 1}}> <View style={{ backgroundColor:'rgba(0,0,0,0.7)',flex: 1}}>
<View style={{ marginHorizontal: Dimensions.get('window').width * 0.28, <View style={styles.viewShowDone}>
width : Dimensions.get('window').width * 0.42, <Image style={styles.doneIcon} source={doneIcon}/>
height : Dimensions.get('window').height * 0.73, <Text style={styles.textWellDone}>Well Done !</Text>
marginTop : Dimensions.get('window').width * 0.07, <View style={styles.viewScaleResult}>
alignItems: 'center', <Text style={styles.textScaleResultD}>Scale Result : </Text>
backgroundColor:'#FFFBF0', <View style={styles.viewCorrectWrong}>
borderRadius: 16}}> <Image style={styles.corIcon} source={corIcon}/>
<Image style={{height:'40%', width:'30%', position:'absolute', left:110, top: -45 }} source={doneIcon}/> <Text style={styles.textCorrectD}>{this.state.correct}</Text>
<Image style={styles.wroIcon} source={wroIcon}/>
<Text style={{ fontSize: 20, <Text style={styles.textWrongD}>{this.state.wrong}</Text>
fontFamily: 'Gilroy-Bold',
textAlign: 'center',
lineHeight:25,
color:'#3B3A39',
paddingTop:Dimensions.get('window').height * 0.17}}>Well Done !</Text>
<View style={{borderRadius:16, borderColor:'#E7E7E7', borderWidth:1, backgroundColor:'#FFFBF0', marginTop:'2%', marginLeft:'2%', width:Dimensions.get('window').width * 0.33, marginBottom:'1.5%'}}>
<Text style={{ fontSize: 20,
fontFamily: 'Gilroy-Bold',
textAlign: 'center',
lineHeight:25,
color:'#3D9090',
paddingHorizontal:Dimensions.get('window').width * 0.06,
paddingTop:Dimensions.get('window').height * 0.02}}>Scale Result : </Text>
<View style={{flexDirection: 'row', paddingHorizontal:Dimensions.get('window').width * 0.07, paddingVertical:Dimensions.get('window').height * 0.02}}>
<Image style={{height:'65%', width:'14%',marginTop:'3%'}} source={corIcon}/>
<Text style={{color:'#14A76C', fontSize:24, fontFamily:'Gilroy-Bold', textAlign:'left', lineHeight:30, paddingHorizontal:'10%'}}>{this.state.correct}</Text>
<Image style={{height:'65%', width:'14%',marginTop:'3%'}} source={wroIcon}/>
<Text style={{color:'#F94C4C', fontSize:24, fontFamily:'Gilroy-Bold', textAlign:'left', lineHeight:30, paddingHorizontal:'10%'}}>{this.state.wrong}</Text>
</View> </View>
</View> </View>
<TouchableOpacity style={styles.buttonDone} onPress={() => this.backAction()}>
<TouchableOpacity style={{ backgroundColor: '#81C9C9', <Text style={styles.textDone}>Done</Text>
width : Dimensions.get('window').width * 0.33,
paddingTop: 15,
paddingBottom: 15,
borderRadius: 8,
marginTop:10,
marginBottom:10,
marginLeft:5}}
onPress={() => this.backAction()}>
<Text style={{color: '#FFFFFF',
fontFamily: 'Gilroy-Bold', fontSize:16, textAlign: 'left', lineHeight:20, paddingHorizontal:Dimensions.get('window').width * 0.14}}>OK</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
...@@ -1113,7 +986,7 @@ showDone(){ ...@@ -1113,7 +986,7 @@ showDone(){
else { else {
return null; return null;
} }
} }
render() { render() {
return ( return (
...@@ -1125,106 +998,68 @@ showDone(){ ...@@ -1125,106 +998,68 @@ showDone(){
{this.showDone()} {this.showDone()}
{this.clickSubmitButton()} {this.clickSubmitButton()}
<View style={{backgroundColor:'#FFFBF0',flexDirection: 'row', width:Dimensions.get('window').width, height:Dimensions.get('window').height * 0.4, borderTopLeftRadius:8, borderTopRightRadius:8}}> <View style={styles.view1}>
<View style={{width:Dimensions.get('window').width * 0.25, marginHorizontal:Dimensions.get('window').width * 0.03, marginTop:'6%', marginBottom:'2%'}}> <View style={styles.viewQues}>
<View style={{flexDirection:'row'}}> <View style={{flexDirection:'row'}}>
<Text style={{fontFamily:'Gilroy-Bold', fontSize:16, textAlign:'left', lineHeight:20, color:'#EF476F', paddingBottom:'8%'}}> <Text style={styles.textQues}>
Question {this.state.correct + this.state.wrong} Question {this.state.correct + this.state.wrong}
</Text> </Text>
<Text style={{fontFamily:'Gilroy-Bold', fontSize:16, textAlign:'left', lineHeight:20, color:'#3B3A39', paddingBottom:'8%', paddingLeft:'2%'}}> <Text style={styles.textQuesCount}>
/ {this.state.maxCount} / {this.state.maxCount}
</Text> </Text>
</View> </View>
<View style={{flexDirection:'row'}}> <View style={{flexDirection:'row'}}>
<Image style={{height:'65%', width:'12%',marginTop:'3%'}} source={corIcon}/> <Image style={styles.corIconQues} source={corIcon}/>
<Text style={{fontFamily:'Gilroy-Bold', fontSize:24, textAlign:'left', lineHeight:30, color:'#14A76C', paddingHorizontal:'8%'}}> <Text style={styles.textCorrectQ}>
{this.state.correct} {this.state.correct}
</Text> </Text>
</View> </View>
</View> </View>
<View style={{alignItems:'center',width:Dimensions.get('window').width * 0.32, marginHorizontal:Dimensions.get('window').width * 0.03, marginTop:'2%'}}>
<Image style={{height:Dimensions.get('window').height * 0.27, width:Dimensions.get('window').width * 0.18}} source={Notes[indexN].image}/> <View style={styles.viewImageNotes}>
<Image style={styles.imageNote} source={Notes[indexN].image}/>
<View style={{flexDirection: 'row'}}> <View style={{flexDirection: 'row'}}>
<Text style={{fontFamily:'Gilroy-Bold', fontSize:14, textAlign:'left', lineHeight:18, color:'#3B3A39'}}> <Text style={styles.textKeyLeft}>
Remaining key(s) to select: Remaining key(s) to select:
</Text> </Text>
<Text style={{fontFamily:'Gilroy-Bold', fontSize:14, textAlign:'left', lineHeight:18, color:'#3D9090', paddingLeft:'3%'}}> <Text style={styles.textKeyCount}>
{this.state.keyCount} {this.state.keyCount}
</Text> </Text>
</View> </View>
</View> </View>
<View style={{alignItems:'center',width:Dimensions.get('window').width * 0.25, marginHorizontal:Dimensions.get('window').width * 0.045, marginTop:'2.5%'}}> <View style={styles.viewTimerUndo}>
<Stopwatch <Stopwatch
secs secs
start={this.state.start} start={this.state.start}
getTime={(tt) => { getTime={(tt) => {
//console.log(tt);
stime = tt; stime = tt;
}} }}
// Options for the styling // Options for the styling
options={{//timer options={{//timer
container: { container: styles.containerStopWatch,
backgroundColor: '#FFECDA', text: styles.textStopWatch}}/>
padding: 10, <Image style={styles.timerIcon} source={timerIcon}/>
borderRadius: 8,
borderColor:'#FFECDA',
borderWidth:2,
width:Dimensions.get('window').width * 0.22,
alignItems: 'center',
},
text: {
fontSize: 16,
color: '#3B3A39',
textAlign: 'left',
paddingTop: 5,
lineHeight:20,
alignItems: 'center',
fontFamily: 'Gilroy-Bold',
}}}/>
<Image style={{height:'18%', width:'13%', position: 'absolute', left:25, top:15}} source={timerIcon}/>
{this.clickResetButton()} {this.clickResetButton()}
</View> </View>
</View> </View>
<View style={{flexDirection: 'row', height: Dimensions.get('window').height * 0.4}}> <View style={{flexDirection: 'row', height: Dimensions.get('window').height * 0.4}}>
{NOTESWHITE.map((item, id) => ( {NOTESWHITE.map((item, id) => (
<TouchableHighlight <TouchableHighlight style={keywordsList.find((element) => element === item.name) ? styles.whiteNotesButtonPress : styles.whiteNotesButton }
style={
keywordsList.find((element) => element === item.name)
? { width: Dimensions.get('window').width / NOTESWHITE.length,
alignItems: 'center',
backgroundColor: '#FCE1FF',
borderWidth: 0.5,
borderColor: '#707070',
borderBottomWidth: 1}
: { width: Dimensions.get('window').width / NOTESWHITE.length,
borderWidth: 0.5,
borderColor: '#707070',
alignItems: 'center',
backgroundColor: 'white',
borderBottomWidth: 1}
}
onPress={() => this.toggleKeyword(item)} onPress={() => this.toggleKeyword(item)}
key={id}> key={id}>
<Text style={styles.textStyle}> </Text> <Text> </Text>
</TouchableHighlight> </TouchableHighlight>
))} ))}
{NOTESBLACK.map((item, id) => ( {NOTESBLACK.map((item, id) => (
<TouchableHighlight <TouchableHighlight style={keywordsList.find((element) => element === item.name) ? [styles.blackNotesButtonPress, {marginLeft: config.deviceWidth * item.left}] : [styles.blackNotesButton, {marginLeft: config.deviceWidth * item.left}]}
style={
keywordsList.find((element) => element === item.name)
? [styles.SbuttonB1, {marginLeft: config.deviceWidth * item.left}]
: [styles.buttonB1, {marginLeft: config.deviceWidth * item.left}]
}
onPress={() => this.toggleKeyword(item)} onPress={() => this.toggleKeyword(item)}
key={id}> key={id}>
<Text style={styles.textStyle}> </Text> <Text> </Text>
</TouchableHighlight> </TouchableHighlight>
))} ))}
</View> </View>
</View> </View>
); );
} }
} }
......
style/styleQuiz.js
View file @ 3e25fd61
/* eslint-disable prettier/prettier */ /* eslint-disable prettier/prettier */
import {StyleSheet, Dimensions} from 'react-native'; import {StyleSheet, Dimensions} from 'react-native';
import config from './config'; const height = Dimensions.get('window').height;
const width = Dimensions.get('window').width;
export default StyleSheet.create({ export default StyleSheet.create({
imagebackground: {
width: '100%', // clickSubmitButton ()
height: '100%', viewSubmitButton:{
}, flexDirection: 'row',
//Modal Quit width:width,
modalbackground: { marginBottom:height * 0.05,
backgroundColor: '#000000aa', },
flex: 1, // clickSubmitButton () if true
}, buttonSubmitButtonT:{
viewmodalQ: { backgroundColor:'#E7E7E7',
marginLeft: Dimensions.get('window').height * 0.3, borderRadius:8,
width : Dimensions.get('window').height * 0.4, width:width * 0.22,
height : Dimensions.get('window').width * 0.35, marginHorizontal:width * 0.75,
marginTop : Dimensions.get('window').width * 0.25, marginTop:'3%',
},
textSubmitButtonT:{
fontFamily:'Gilroy-Bold',
fontSize:16,
textAlign:'center',
lineHeight:20,
color:'#848484',
paddingVertical:height * 0.035,
},
// clickSubmitButton () if false
buttonSubmitButtonF:{
backgroundColor:'#EF476F',
borderRadius:8,
width:width * 0.22,
marginHorizontal:width * 0.75,
marginTop:'3%',
},
textSubmitButtonF:{
fontFamily:'Gilroy-Bold',
fontSize:16,
textAlign:'center',
lineHeight:20,
color:'#FFFBF0',
paddingVertical:height * 0.035,
},
//clickResetButton ()
imageResetIcon:{
height:'45%',
width:'12%',
marginTop:'8%',
marginHorizontal:'8%',
},
buttonResetButtonT:{
backgroundColor:'#E7E7E7',
borderColor:'#E7E7E7',
borderWidth:1,
borderRadius:8,
width:width * 0.22,
marginHorizontal:width * 0.72,
marginTop:height * 0.03,
},
textResetButtonT:{
fontFamily:'Gilroy-Bold',
fontSize:14,
textAlign:'left',
lineHeight:18,
color:'#848484',
paddingVertical:height * 0.04,
},
buttonResetButtonF:{
backgroundColor:'#FFFBF0',
borderColor:'#FC8121',
borderWidth:1,
borderRadius:8,
width:width * 0.22,
marginHorizontal:width * 0.72,
marginTop:height * 0.03,
},
textResetButtonF:{
fontFamily:'Gilroy-Bold',
fontSize:14,
textAlign:'left',
lineHeight:18,
color:'#FC8121',
paddingVertical:height * 0.04,
},
//showQuit()
viewShowQuit:{
marginHorizontal:width * 0.28,
width:width * 0.45,
height:height * 0.6,
marginTop:width * 0.13,
alignItems: 'center', alignItems: 'center',
backgroundColor:'white', backgroundColor:'#FFFBF0',
borderRadius: 10, borderRadius: 16,
borderColor: 'black', },
borderWidth: 5, quitIcon:{
}, height:'40%',
textquit: { width:'30%',
fontSize: 25, position:'absolute',
fontFamily: 'sans-serif', left:110,
top: -45,
},
textQuitScale:{
fontSize: 24,
fontFamily: 'Gilroy-Bold',
textAlign: 'center', textAlign: 'center',
marginTop: 5, lineHeight:30,
color:'black', color:'#3B3A39',
}, paddingTop:height * 0.17,
viewmodalQQ : { },
viewButtonQuit:{
alignItems: 'center', alignItems: 'center',
flexDirection: 'row', flexDirection: 'row',
marginTop:15, marginTop:20,
}, justifyContent: 'center',
buttonyes: { },
backgroundColor: 'white', buttonNoQuit:{
backgroundColor: '#FFFFFF',
padding: 15, padding: 15,
borderRadius: 10, borderRadius: 8,
marginTop:10, marginTop:10,
marginBottom:10, marginBottom:10,
borderTopColor:'black', borderColor:'#81C9C9',
borderRightColor:'black', borderWidth: 1,
borderWidth: 3, marginRight:8,
marginRight:5, },
}, textNoQuit:{
buttonno: { color: '#81C9C9',
fontFamily: 'Gilroy-Bold',
fontSize:16,
textAlign: 'left',
lineHeight:20,
paddingHorizontal:width * 0.04,
},
buttonYesQuit:{
backgroundColor: 'white', backgroundColor: 'white',
paddingLeft: 18, paddingLeft: 18,
paddingRight: 18, paddingRight: 18,
paddingTop: 15, paddingTop: 15,
paddingBottom: 15, paddingBottom: 15,
borderRadius: 10, borderRadius: 8,
marginTop:10, marginTop:10,
marginBottom:10, marginBottom:10,
borderWidth: 3, borderWidth: 1,
borderTopColor:'black', borderColor:'#81C9C9',
marginLeft:5, marginLeft:8,
}, },
textqq: { textYesQuit:{
color: 'black', color: '#81C9C9',
fontFamily: 'sans-serif', fontFamily: 'Gilroy-Bold',
}, fontSize:16,
// Modal Correct and Wrong textAlign: 'left',
viewmodalCW: { lineHeight:20,
marginLeft: Dimensions.get('window').height * 0.25, paddingHorizontal:width * 0.03,
width : Dimensions.get('window').height * 0.4, },
//showCorrect()
viewShowCorrect:{
marginHorizontal: Dimensions.get('window').width * 0.28,
width :width * 0.45,
height :height * 0.6,
marginTop :width * 0.13,
alignItems: 'center', alignItems: 'center',
}, backgroundColor:'#FFFBF0',
imagecw: { borderRadius: 16,
width: '130%', },
height: '95%', correctIcon:{
}, height:'40%',
textcw: { width:'30%',
fontSize: 25, position:'absolute',
fontFamily: 'sans-serif', left:110,
top: -45,
},
textScaleResult:{
fontSize: 20,
fontFamily: 'Gilroy-Bold',
textAlign: 'center', textAlign: 'center',
marginTop:Dimensions.get('window').width * 0.43, lineHeight:25,
marginLeft:120, color:'#3B3A39',
color:'white', paddingTop:height * 0.17,
}, },
viewbutton: { textCorrect:{
alignItems: 'center', fontSize: 24,
marginLeft:120, fontFamily: 'Gilroy-Bold',
}, textAlign: 'center',
buttonc: { lineHeight:30,
backgroundColor: 'white', color:'#14A76C',
borderColor: 'black', paddingTop:height * 0.02,
padding: 15, },
borderRadius: 5, buttonOK:{
backgroundColor: '#81C9C9',
width :width * 0.3,
paddingTop: 15,
paddingBottom: 15,
borderRadius: 8,
marginTop:10, marginTop:10,
marginBottom:10, marginBottom:10,
}, marginLeft:8,
buttonok: { },
color: 'black', textOK:{
}, color: '#FFFFFF',
// Modal Done fontFamily: 'Gilroy-Bold',
viewmodalD: { fontSize:16,
marginLeft: Dimensions.get('window').height * 0.3, textAlign: 'left',
width : Dimensions.get('window').height * 0.4, lineHeight:20,
alignItems: 'center', paddingHorizontal:width * 0.12,
}, },
imagedone :{
width: '120%', //showWrong()
height: '98%', viewShowWrong: {
}, marginHorizontal:width * 0.28,
viewmodalDD: { width :width * 0.45,
height :height * 0.6,
marginTop :width * 0.13,
alignItems: 'center', alignItems: 'center',
marginLeft:70, backgroundColor:'#FFFBF0',
}, borderRadius: 16,
textwelldone: { },
fontSize: 25, wrongIcon:{
fontFamily: 'sans-serif', height:'40%',
textAlign: 'center', width:'30%',
marginTop:Dimensions.get('window').width * 0.42, position:'absolute',
marginLeft:65, left:110,
color:'white', top: -45,
}, },
modaltextcorrect: { textScaleResultW:{
fontSize: 15, fontSize: 20,
fontFamily: 'sans-serif', fontFamily: 'Gilroy-Bold',
marginLeft:65,
textAlign: 'center', textAlign: 'center',
color: 'green', lineHeight:25,
}, color:'#3B3A39',
modaltextwrong: { paddingTop:height * 0.17,
fontSize: 15, },
fontFamily: 'sans-serif', textWrong:{
marginLeft:65, fontSize: 24,
fontFamily: 'Gilroy-Bold',
textAlign: 'center', textAlign: 'center',
color: 'red', lineHeight:30,
}, color:'#D11427',
c1: { paddingTop:height * 0.02,
height: '70%', },
alignItems: 'center', buttonOKW:{
borderColor: 'black', backgroundColor: '#81C9C9',
marginTop:5, width :width * 0.3,
}, paddingTop: 15,
cc1: { paddingBottom: 15,
flexDirection: 'row', borderRadius: 8,
marginLeft: 5, marginTop:10,
}, marginBottom:10,
t: { marginLeft:8,
fontSize: 25, },
fontFamily: 'sans-serif', textOKW:{
}, color: '#FFFFFF',
c2: { fontFamily: 'Gilroy-Bold',
flexDirection: 'row', fontSize:16,
height: '35%', textAlign: 'left',
}, lineHeight:20,
paddingHorizontal:width * 0.12,
},
t1: { //showDone()
color: 'black', viewShowDone:{
paddingTop: 120, marginHorizontal:width * 0.28,
}, width :width * 0.42,
button: { height :height * 0.73,
flex: 7, marginTop :width * 0.08,
alignItems: 'center', alignItems: 'center',
backgroundColor: 'white', backgroundColor:'#FFFBF0',
borderRightWidth: 1, borderRadius: 16,
borderColor: 'black', },
borderBottomWidth: 1, doneIcon:{
}, height:'30%',
b1: { width:'27%',
marginBottom: 25, position:'absolute',
width: 200, left:110,
height: 50, top: -45,
borderRadius: 15, },
alignItems: 'center', textWellDone:{
backgroundColor: 'purple', fontSize: 20,
}, fontFamily: 'Gilroy-Bold',
buttonText: {
textAlign: 'center', textAlign: 'center',
paddingTop: 15, lineHeight:25,
color: 'white', color:'#3B3A39',
fontSize: 15, paddingTop:height * 0.14,
fontFamily: 'sans-serif', },
}, viewScaleResult:{
logo: { borderRadius:16,
height: config.deviceWidth * 0.22, borderColor:'#E7E7E7',
width: config.deviceHeight * 0.5, borderWidth:1,
position: 'absolute', backgroundColor:'#FFFBF0',
marginTop: config.deviceWidth * 0.11, marginTop:'2.5%',
backgroundColor:'white', marginLeft:'2%',
}, width:width * 0.33, marginBottom:'1.7%',
correct: { },
width: 100, textScaleResultD: {
fontSize: 20,
fontFamily: 'Gilroy-Bold',
textAlign: 'center', textAlign: 'center',
lineHeight:25,
color:'#3D9090',
paddingHorizontal:width * 0.06,
paddingTop:height * 0.02,
},
viewCorrectWrong:{
flexDirection: 'row',
paddingHorizontal:width * 0.07,
paddingVertical:height * 0.02,
},
corIcon:{
height:'65%',
width:'14%',
marginTop:'3%',
},
wroIcon:{
height:'65%',
width:'14%',
marginTop:'3%',
},
textCorrectD:{
color:'#14A76C',
fontSize:24,
fontFamily:'Gilroy-Bold',
textAlign:'left',
lineHeight:30,
paddingHorizontal:'10%',
},
textWrongD:{
color:'#F94C4C',
fontSize:24,
fontFamily:'Gilroy-Bold',
textAlign:'left',
lineHeight:30,
paddingHorizontal:'10%',
},
buttonDone:{
backgroundColor: '#81C9C9',
width :width * 0.33,
paddingTop: 15, paddingTop: 15,
color: 'white', paddingBottom: 15,
height: 60, borderRadius: 8,
borderRadius: 10, marginTop:10,
alignItems: 'center', marginBottom:10,
fontSize: 25, marginLeft:5,
marginRight: 10, },
backgroundColor:'green', textDone:{
borderColor:'white', color: '#FFFFFF',
borderWidth: 2, fontFamily: 'Gilroy-Bold',
fontFamily: 'sans-serif', fontSize:16,
}, textAlign: 'left',
wrong: { lineHeight:20,
width: 100, paddingHorizontal:width * 0.14,
height: 60, },
borderRadius: 10,
borderColor:'white', //render()
view1:{
backgroundColor:'#FFFBF0',
flexDirection: 'row',
width:width,
height:height * 0.4,
borderTopLeftRadius:8,
borderTopRightRadius:8,
},
viewQues:{
width:width * 0.25,
marginHorizontal:width * 0.03,
marginTop:'6%',
marginBottom:'2%',
},
textQues:{
fontFamily:'Gilroy-Bold',
fontSize:16,
textAlign:'left',
lineHeight:20,
color:'#EF476F',
paddingBottom:'8%',
},
textQuesCount:{
fontFamily:'Gilroy-Bold',
fontSize:16,
textAlign:'left',
lineHeight:20,
color:'#3B3A39',
paddingBottom:'8%',
paddingLeft:'2%',
},
corIconQues:{
height:'65%',
width:'12%',
marginTop:'3%',
},
textCorrectQ:{
fontFamily:'Gilroy-Bold',
fontSize:24,
textAlign:'left',
lineHeight:30,
color:'#14A76C',
paddingHorizontal:'8%',
},
viewImageNotes:{
alignItems:'center',
width:width * 0.32,
marginHorizontal:width * 0.03,
marginTop:'2%',
},
imageNote:{
height:height * 0.27,
width:width * 0.18,
},
textKeyLeft:{
fontFamily:'Gilroy-Bold',
fontSize:14,
textAlign:'left',
lineHeight:18,
color:'#3B3A39',
},
textKeyCount:{
fontFamily:'Gilroy-Bold',
fontSize:14,
textAlign:'left',
lineHeight:18,
color:'#3D9090',
paddingLeft:'3%',
},
viewTimerUndo:{
alignItems:'center',
width:width * 0.25,
marginHorizontal:width * 0.045,
marginTop:'2.5%',
},
//stopwatch
containerStopWatch:{
backgroundColor: '#FFECDA',
padding: 10,
borderRadius: 8,
borderColor:'#FFECDA',
borderWidth:2,
width:width * 0.22,
alignItems: 'center', alignItems: 'center',
textAlign: 'center', },
paddingTop: 15, textStopWatch:{
color: 'white', fontSize: 16,
fontSize: 25, color: '#3B3A39',
marginRight: 10, textAlign: 'left',
backgroundColor:'red', paddingTop: 5,
borderWidth: 2, lineHeight:20,
fontFamily: 'sans-serif',
},
timer: {
width: 65,
height: 60,
borderRadius: 10,
borderColor:'white',
alignItems: 'center', alignItems: 'center',
textAlign: 'center', fontFamily: 'Gilroy-Bold',
paddingTop: 16, },
color: 'white', timerIcon:{
fontSize: 25, height:'18%',
backgroundColor:'black', width:'13%',
borderWidth: 2,
fontFamily: 'sans-serif',
},
submit: {
width: '40%',
marginTop: config.deviceWidth * 0.055,
borderColor:'white',
borderWidth: 2,
borderRadius: 5,
},
viewMain: {
width: '20%',
alignContent: 'flex-end',
marginLeft: 180,
marginTop: '173%',
position: 'absolute', position: 'absolute',
}, left:25,
top:15,
},
container: { //White Notes
flex: 1, whiteNotesButton: {
}, width:width / 14,
textStyle: { borderWidth: 0.5,
fontSize: 16, borderColor: '#707070',
padding: 8,
textAlign: 'center',
fontFamily: 'sans-serif',
},
buttonView: {
flexDirection: 'column',
marginLeft: config.deviceHeight * 1.0,
},
//White Notes
buttonStyle: {
width: config.deviceWidth * 0.075,
alignItems: 'center', alignItems: 'center',
backgroundColor: 'white', backgroundColor: 'white',
borderRightWidth: 1,
borderColor: 'black',
borderBottomWidth: 1, borderBottomWidth: 1,
}, },
selectedKeywordStyle: { whiteNotesButtonPress:{
width: config.deviceWidth * 0.075, width:width / 14,
alignItems: 'center', alignItems: 'center',
backgroundColor: '#FCE1FF', backgroundColor: '#FCE1FF',
borderRightWidth: 1, borderWidth: 0.5,
borderColor: 'black', borderColor: '#707070',
borderBottomWidth: 1, borderBottomWidth: 1,
}, },
//Black Notes
buttonB1: { //Black Notes
blackNotesButton: {
alignItems: 'center', alignItems: 'center',
backgroundColor: 'black', backgroundColor: 'black',
height: '55%', height: '55%',
...@@ -282,8 +484,8 @@ export default StyleSheet.create({ ...@@ -282,8 +484,8 @@ export default StyleSheet.create({
position: 'absolute', position: 'absolute',
borderWidth: 0.5, borderWidth: 0.5,
borderColor: '#707070', borderColor: '#707070',
}, },
SbuttonB1: { blackNotesButtonPress: {
alignItems: 'center', alignItems: 'center',
backgroundColor: '#FCE1FF', backgroundColor: '#FCE1FF',
borderWidth: 0.5, borderWidth: 0.5,
...@@ -291,5 +493,5 @@ export default StyleSheet.create({ ...@@ -291,5 +493,5 @@ export default StyleSheet.create({
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