Main Screen Imporvements: Better Button and Correct 00:00:00 time now…

… displays Authentication Menu slight visual edit
CS-UCR · Dec 11, 2019 · c5bb4ba · c5bb4ba
1 parent f712abb
commit c5bb4ba
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 15 deletions.
diff --git a/assets/startStudyingButton.png b/assets/startStudyingButton.png
diff --git a/assets/stopStudyingButton.png b/assets/stopStudyingButton.png
diff --git a/src/authentication/AuthenticationMenu.js b/src/authentication/AuthenticationMenu.js
@@ -12,9 +12,6 @@ const AuthenticationMenu = props => {
       keyboardVerticalOffset={50}
       style={styles.screen}
     >
-      {/* <View style={styles.lines}></View>
-      <Text style={styles.Header}>Study Buddy</Text>
-      <View style={styles.lines}></View> */}
       <View style={{height: 5}}></View>
       <Image 
           source={require('../../assets/StuddyBuddyLogo.png')}  
@@ -48,18 +45,18 @@ const styles = StyleSheet.create({
       padding: 20,
       marginTop:50,
       backgroundColor:'#feccc1',
-      borderWidth:7,
+      borderWidth:5,
       borderColor:'pink'
 
     },
     buttonContainer: {
       marginTop: 10,
-      borderWidth:5,
+      borderWidth:3,
       backgroundColor:'white'
     },
     button:{
-      borderWidth:5,
-      borderColor: "black"
+      borderWidth:3,
+      borderColor: "#404040"
     },
     Header: {
       width:"90%",

diff --git a/src/components/MainScreen.js b/src/components/MainScreen.js
@@ -11,6 +11,7 @@ import { TouchableOpacity } from 'react-native-gesture-handler';
 
 import SpaceCard from './SpaceCard'
 import {NavigationEvents} from 'react-navigation'
+import Colors from '../constants/Colors';
 
 const styles = StyleSheet.create({
   container: {
@@ -61,12 +62,15 @@ export default class MainScreen extends Component {
         hourCount: 0,
         minCount: 0,
         secCount: 0,
+        hourCountText: '00',
+        minCountText: '00',
+        secCountText: '00', 
         trueStart: null,
         showTimerText: false,
         trueTime: null,
         isStarted: false,
         timerButtonText: 'Start\nStudying',
-
+        imageTimerButtonLoc: require('../../assets/startStudyingButton.png'),
         //using user information
         userId : null,
         currentUser : null,
@@ -86,10 +90,14 @@ export default class MainScreen extends Component {
 
   static navigationOptions = () => {
     return {
+        headerTitle: 'Main Screen',
         headerRight: <DrawerIcon/>,
         headerStyle: {
-            backgroundColor: '#E0E0E0',
+            backgroundColor: Colors.headerBackgoundColor,
         },
+        headerTitleStyle:{
+          color: Colors.headerTitleColor,
+        }
     };
   };
 
@@ -384,6 +392,10 @@ export default class MainScreen extends Component {
                 hourCount: hCount,
                 minCount: mCount,
                 secCount: num,
+
+                hourCountText: hCount <= 9 ? ('0' + hCount.toString()).toString() : hCount.toString(),
+                minCountText: mCount <= 9 ? ('0' + mCount.toString()).toString() : mCount.toString(),
+                secCountText: num <= 9 ? ('0' + num.toString()).toString() : num.toString(),
             });
 
         }, 1000);
@@ -392,7 +404,8 @@ export default class MainScreen extends Component {
         this.setState({
             isStarted : true,
             showTimerText: true,
-            timerButtonText: 'Stop\nStudying'
+            timerButtonText: 'Stop\nStudying',
+            imageTimerButtonLoc: require('../../assets/stopStudyingButton.png'),
         })
     }else if(this.state.isStarted){
 
@@ -426,7 +439,8 @@ export default class MainScreen extends Component {
             hourCount: 0,
             minCount: 0,
             secCount: 0,
-            timerButtonText: 'Start\nStudying'
+            timerButtonText: 'Start\nStudying',
+            imageTimerButtonLoc: require('../../assets/startStudyingButton.png'),
         });
     }
 
@@ -585,13 +599,16 @@ export default class MainScreen extends Component {
 
       </View>
       <View style={{height: 40}}>
-     {this.state.showTimerText && <Text style={styles.timerText}>{this.state.hourCount} : {this.state.minCount} : {this.state.secCount}</Text>}
+     {this.state.showTimerText && <Text style={styles.timerText}>{this.state.hourCountText} : {this.state.minCountText} : {this.state.secCountText}</Text>}
     </View>
+
         <TouchableHighlight onPress={this.onPressTimerButton} underlayColor="white">    
-            <View style={[styles.timerButton, {backgroundColor: this.state.isStarted ? '#ECB4B4' : '#B4ECB4'}]}>
-            <Text style={styles.timerButtonText}> {this.state.timerButtonText}</Text>
-            </View>
+            <Image 
+            source={this.state.imageTimerButtonLoc}  
+            style={{width: 170, height: 170}} 
+            />
         </TouchableHighlight>
+        <View style={{height: 40}}></View>
       </View>