From de94377718fabb5a0e6f50710d734f6f2cad2efd Mon Sep 17 00:00:00 2001
From: JV Cortez <juanvictor.cortez@gmail.com>
Date: Mon, 21 Aug 2017 14:52:44 -0700
Subject: [PATCH 01/10] fixed spacing

---
 client/src/MainApp/MatchmakerEvent.jsx | 28 +++++++++++++-------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/client/src/MainApp/MatchmakerEvent.jsx b/client/src/MainApp/MatchmakerEvent.jsx
index 8f18b08..1d52c66 100644
--- a/client/src/MainApp/MatchmakerEvent.jsx
+++ b/client/src/MainApp/MatchmakerEvent.jsx
@@ -12,20 +12,20 @@ class MatchmakerEvent extends Component {
         <Cards onEnd={() => console.log('end')} className='master-root'>
           { 
             data.map(item =>
-                                   //make card and card border bigger
-                                   //make sure it's mobile responsive
-                                   <Card
-                                     onSwipeLeft={() => console.log('reject ' + item.username)}
-                                     onSwipeRight={() => {
-                                      console.log('accept ' + item.username);
-                                      this.props.inviteUserB(item);
-                                     }}>
-                                     <h2>{item.username}</h2>
-                                     <img className="avatar" src={item.imageurl} alt="avatar image"/> 
-                                     <p className="card-text-description">{item.tagline}</p>
-                                     <p className="card-text-description">{item.blurb}</p>
-                                   </Card>
-                                   )}
+              //make card and card border bigger
+              //make sure it's mobile responsive
+              <Card
+                onSwipeLeft={() => console.log('reject ' + item.username)}
+                onSwipeRight={() => {
+                console.log('accept ' + item.username);
+                this.props.inviteUserB(item);
+                }}>
+                <h2>{item.username}</h2>
+                <img className="avatar" src={item.imageurl} alt="avatar image"/> 
+                <p className="card-text-description">{item.tagline}</p>
+                <p className="card-text-description">{item.blurb}</p>
+              </Card>
+              )}
         </Cards>
       </div>
     )

From 454bdf0fccf1a69c510752bd8d6415f18c5cf7f7 Mon Sep 17 00:00:00 2001
From: JV Cortez <juanvictor.cortez@gmail.com>
Date: Tue, 22 Aug 2017 14:27:34 -0700
Subject: [PATCH 02/10] removed popupchat component

---
 client/src/MainApp/MatchmakerEvent.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/src/MainApp/MatchmakerEvent.jsx b/client/src/MainApp/MatchmakerEvent.jsx
index 6f53692..fb7f316 100644
--- a/client/src/MainApp/MatchmakerEvent.jsx
+++ b/client/src/MainApp/MatchmakerEvent.jsx
@@ -7,7 +7,6 @@ class MatchmakerEvent extends Component {
     console.log(data)
     return (
       <div>
-        <PopupChat />
         <Cards onEnd={() => console.log('end')} className='master-root'>
           {data.map(item =>
              <Card

From 4af35c7fc5ab30c94b758c8993a16bf9a36c8cfd Mon Sep 17 00:00:00 2001
From: JV Cortez <juanvictor.cortez@gmail.com>
Date: Tue, 22 Aug 2017 14:28:23 -0700
Subject: [PATCH 03/10] removed unnecessary spaces and added margin-bottom for
 main page

---
 client/styles/main.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/styles/main.scss b/client/styles/main.scss
index 6719557..868cbed 100644
--- a/client/styles/main.scss
+++ b/client/styles/main.scss
@@ -299,10 +299,10 @@ nav {
   flex-direction: column;
 }
 
-
 .matchmakerEventAndChat-container {
   display: flex;
   justify-content: space-evenly;
+  margin-bottom: 100px;
 }
 
 #chatbar {

From be25016fc7a9687f2191c12f1ec5a4f9506f62b5 Mon Sep 17 00:00:00 2001
From: JV Cortez <juanvictor.cortez@gmail.com>
Date: Wed, 23 Aug 2017 18:44:07 -0700
Subject: [PATCH 04/10] removed unnecessary styling and added placeholder for
 logo placement

---
 client/src/NavigationBar.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/NavigationBar.jsx b/client/src/NavigationBar.jsx
index e34ba94..b8c8360 100644
--- a/client/src/NavigationBar.jsx
+++ b/client/src/NavigationBar.jsx
@@ -46,10 +46,10 @@ class NavigationBar extends Component {
     );
       
     return (
-      <nav className="navbar navbar-default">
+      <nav>
         <div className="container-fluid">
           <div className="navbar-header">
-            <Link to="/matchmaker" className="navbar-brand">Buddy Up</Link>
+            <Link to="/matchmaker" className="navbar-brand">(logo)Buddy Up</Link>
           </div>
           <div className="collapse navbar-collapse">
             <ul className="nav navbar-nav navbar-right">

From 2af8ab3a06ee4afdc73f15afa307da24e7fa2bed Mon Sep 17 00:00:00 2001
From: JV Cortez <juanvictor.cortez@gmail.com>
Date: Wed, 23 Aug 2017 18:45:46 -0700
Subject: [PATCH 05/10] binded newPost

---
 client/src/MainApp/MatchmakerPage.jsx | 36 +++++++++++++--------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/client/src/MainApp/MatchmakerPage.jsx b/client/src/MainApp/MatchmakerPage.jsx
index b36ee1e..faac902 100644
--- a/client/src/MainApp/MatchmakerPage.jsx
+++ b/client/src/MainApp/MatchmakerPage.jsx
@@ -19,7 +19,7 @@ class MatchmakerPage extends Component {
     this.updateCompat = this.updateCompat.bind(this);
     this.updateDefaultValue = this.updateDefaultValue.bind(this);
     this.updateCurrentUserName = this.updateCurrentUserName.bind(this);
-    this.newPost = this.newPost.bind(this)
+    this.newPost = this.newPost.bind(this);
   }
 
   newPost(post) {
@@ -67,11 +67,11 @@ class MatchmakerPage extends Component {
       currentUserName: username
     })
   }
-
+  
   componentDidMount() {
     console.log("componentDidMount <App />");
     this.socket = io.connect('http://localhost:3001');
-
+    
     var c = this;
     this.socket.on("connect", () => {
       console.log("Connected!");
@@ -106,25 +106,25 @@ class MatchmakerPage extends Component {
       .on('new message', function(data){
         const messageData = JSON.parse(data)
         const message = {username: messageData.username,
-                          content: messageData.message,}
-        console.log(message)
-        c.updateMessages(message);
-      })
-      .on('disconnect', function(){
-        this.socket.emit('disconnect');
-      })
-    });
-  }
-
-  updateUserSeriousness = (value) => {
-    this.updateDefaultValue(value);
-    this.socket.emit('updateSeriousness', JSON.stringify({ value }));
+          content: messageData.message,}
+          console.log(message)
+          c.updateMessages(message);
+        })
+        .on('disconnect', function(){
+          this.socket.emit('disconnect');
+        })
+      });
+    }
+    
+    updateUserSeriousness = (value) => {
+      this.updateDefaultValue(value);
+      this.socket.emit('updateSeriousness', JSON.stringify({ value }));
   }
-
+  
   inviteUserB = (userData) => {
     this.socket.emit('sendInvite', this.state.currentUserName, JSON.stringify(userData));
   }
-
+  
   render () {
     return (
       <div className="matchmaker-container">

From d54697f9ed6aba3cef8652566debaadaac7f6d17 Mon Sep 17 00:00:00 2001
From: JV Cortez <juanvictor.cortez@gmail.com>
Date: Wed, 23 Aug 2017 18:46:55 -0700
Subject: [PATCH 06/10] Fixed spaces, removed  unnecessary commented code, and
 styling to create popup chat window

---
 client/src/MainApp/PopupChat.jsx | 40 ++++++++++----------------------
 1 file changed, 12 insertions(+), 28 deletions(-)

diff --git a/client/src/MainApp/PopupChat.jsx b/client/src/MainApp/PopupChat.jsx
index f079d21..1354e5f 100644
--- a/client/src/MainApp/PopupChat.jsx
+++ b/client/src/MainApp/PopupChat.jsx
@@ -9,30 +9,18 @@ class PopupChat extends Component {
     this.state = {
       currentUser: this.props.auth.user.username,
       input: '',
+      showHiddenChat: false
     }
-    // this.newPost = this.newPost.bind(this);
     this.onChange = this.onChange.bind(this);
   }
   
+  toggleHiddenChat = () => {
+    this.setState({ showHiddenChat: !this.state.showHiddenChat })
+  }
+
   componentDidMount() {
     console.log("PopupChat component mounted");
   }
-  
-  // newPost() {
-  //   const socket = this.props.socket
-  //   const message = {
-  //     type: "postMessage",
-  //     username: this.state.currentUser,
-  //     message: this.state.input,
-  //   }
-  //   // ws.send(JSON.stringify(message))
-  //   this.setState({ input: ''})
-  //   // console.log(JSON.stringify(message))
-  //   const chatbar = document.getElementById('chatbar');
-  //   chatbar.value = '';
-  //   socket.emit('send message', JSON.stringify(message))
-  //   console.log('message sent')
-  // }
 
   onChange(e) {
     this.setState({ [e.target.name]: e.target.value });
@@ -44,28 +32,24 @@ class PopupChat extends Component {
             <span >{message.username}: {message.content}</span>
           </div>);
         })
+    const className = this.state.showHiddenChat ? "messagelist shown" : "messagelist bottom";
     return (
-      //Pop up currently triggered by a button click
-      //Eventually, the popup should be activated by an accepted invitation from a potential teammate
-      <div className="bordered">
-        <div className="messagelist">{messageList}</div>
-
-        <div>
+      <div className={className}>
+        <p className="chatheaderClicked" onClick={ this.toggleHiddenChat }>Chat</p>
+        <div className="message">{ messageList }</div>
           <input
             name="input"
             id="chatbar"
             placeholder="Type a message and hit ENTER"
-            onChange={this.onChange}
-            onKeyDown={(event) => {
+            onChange={ this.onChange }
+            onKeyDown={ (event) => {
               if (event.key === 'Enter') {
                 this.props.newPost(this.state.input);
-                const element = document.getElementsByClassName('messagelist');
+                const element = document.getElementsByClassName('message');
                 element.scrollIntoView(false);
               }
             }}
           />
-        </div>
-
       </div>
     )
   }

From fc7939d5eab4a9d3501b9e3dcb8ced5a530e784e Mon Sep 17 00:00:00 2001
From: JV Cortez <juanvictor.cortez@gmail.com>
Date: Wed, 23 Aug 2017 18:47:25 -0700
Subject: [PATCH 07/10] removed conflicting inline styling

---
 client/src/MainApp/Slider.jsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/client/src/MainApp/Slider.jsx b/client/src/MainApp/Slider.jsx
index 9876ecf..817c864 100644
--- a/client/src/MainApp/Slider.jsx
+++ b/client/src/MainApp/Slider.jsx
@@ -44,12 +44,10 @@ class Slider extends Component {
           );
         };
     
-        const wrapperStyle = { width: 400, margin: 50 };
-        return(
+        return (
           <div>
-            <div style={wrapperStyle}>
-              <p>Please slide according to your seriousness</p>
-              <p>{this.props.sliderDefaultValue}</p>
+            <div className="sliderSpace">
+              <p className="slideText">Please slide according to your seriousness: {this.props.sliderDefaultValue}</p>
               <RCSlider min={0} max={100} value={this.props.sliderDefaultValue} handle={handle} 
               onChange={this.onSliderChange}
               />

From 0b1d362571bd07cc43b47584f07af0dfd452416c Mon Sep 17 00:00:00 2001
From: JV Cortez <juanvictor.cortez@gmail.com>
Date: Wed, 23 Aug 2017 18:48:31 -0700
Subject: [PATCH 08/10] added comments to label which stylings belong to which,
 added styling for pop up chat window and fixed syntax

---
 client/styles/main.scss | 156 ++++++++++++++++++++++++++++++++++------
 1 file changed, 133 insertions(+), 23 deletions(-)

diff --git a/client/styles/main.scss b/client/styles/main.scss
index 868cbed..d2ccb52 100644
--- a/client/styles/main.scss
+++ b/client/styles/main.scss
@@ -1,48 +1,79 @@
-$brand-color: tomato;
-
 body{
   background: white;
   margin: 0;
 }
 h1, h2 {
-  color: $brand-color;
+  color: tomato;
   display: flex;
   justify-content: center;
 }
 //navbar and dropdown styles
 nav {
-  background: peachpuff;
-  display: flex;
+  background: none;
+  border-color: none;
   justify-content: space-between; 
   padding: 10px;
+  margin: 0px;
+}
+button {
+  color: lightgray;
+}
+
+button:hover {
+  color: grey;
+}
+
+a:hover{
+  color: grey;
 }
-  .title {
-    margin: 0;
-  }
 
+.navbar-brand {
+  color: lightgray;
+  font-weight: bold;  
+  font-size: 25px;
+}
+.title {
+  margin: 0;
+}
 
-  .dropdown {
+.dropdown {
     margin: 0;
   }
 
   .navbar, .navbar-default{
     display: block;
+    font-size: x-large;
+    font-weight: bold;
+  }
+
+  .nav, .navbar-nav, .navbar-right {
+    background: lightgray;
+    border-radius: 5px;
+    opacity: .6;  
   }
 
+  .nav, .navbar-nav, .navbar-right:hover {
+    color: lightgrey;
+    cursor: pointer;
+  }
+  
   .caret {
     display: none;
   }
 // card swipe styles  
 .master-root {
   // margin: 20px auto;
+  background: grey;
+  border-radius: 5px;
+  border: 1px solid grey;
   height: 50px;
-  position: relative;
   min-height: 400px;
   max-height: 100px;
-  width: 300px;
-  overflow: hidden;
-  border: 1px solid grey;
   padding: 0px 0px 10px 0px;
+  position: relative;
+  opacity: 0.6;
+  overflow: hidden;
+  width: 300px;
   
 }
 
@@ -130,7 +161,6 @@ nav {
 }
 
 //css style for pop up box
-
 .popupbox {
   width:100%;
   height:100%;
@@ -243,7 +273,6 @@ nav {
 .popupbox[data-title='bottom'] .popupbox-titleBar { box-shadow: none; border-top: 1px #ccc solid }
 
 //popupbox button style
-
 .popupbox-trigger:hover {
   box-shadow: 2px 3px 5px rgba(0,0,0,.2);
   margin-top: -12px;
@@ -301,19 +330,100 @@ nav {
 
 .matchmakerEventAndChat-container {
   display: flex;
-  justify-content: space-evenly;
+  justify-content: center;
   margin-bottom: 100px;
 }
+//chat window
+//chat header for the chat window
+.chatheaderClicked {
+  background: darkgrey;
+  width: 296px;
+  position: relative;
+  border-radius: 5px;
+  z-index: 101;
+  margin: 5px;
+  padding: 0 10px;
+  height: 35px;
+  line-height: 35px;
+  font-size: 18px;
+  font-weight: 700;
+  color: #616161;
+  text-align: left;
+  display: block;
+  cursor: pointer;
+  opacity: .9;
+}
+
+.messagelist {
+  background: grey;
+  border-radius: 5px;
+  width: 310px;
+  height: 230px;
+  position: fixed;
+  right: 49px;
+  transition: all .3s;
+  border: 1px solid transparent;
+  border-radius: 3px 3px 0 0;
+  overflow: hidden;
+  z-index:100;
+  opacity: .9;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 0 0 1px 2px;
+  -moz-box-shadow: rgba(0, 0, 0, 0.0980392) 0 0 1px 2px;
+  box-shadow: rgba(0, 0, 0, 0.0980392) 0 0 1px 2px;
+  -webkit-transition: all 0.5s ease;
+  -moz-transition:  all 0.5s ease;
+  -o-transition:  all 0.5s ease;
+  transition:  all 0.5s ease;
+}
+
+.message {
+  font-weight: bold;
+  padding-left: 5px;
+}
+
+.messagelist.shown {
+  bottom: 0px;
+}
+
+.messagelist.bottom {
+  bottom: -183px;
+}
 
 #chatbar {
-  border: black solid 1px;  
+  background: #f8f8f8;
+  border: grey solid 1px;  
+  border-radius: 5px;
+  position: absolute; 
+  bottom: 4px;
   width: 300px;
+  z-index: 101;
+  right: 4px;
 }
 
-.messagelist {
-  border: black solid 1px;  
-  height: 300px;
-  width: 300px;
-  overflow: auto;
-  word-wrap: normal;
+//matchmaker page styligs
+#react-root {
+  background: black;
+  background-position: center;
+  background-image: url(http://cdn.dota2.com/apps/dota2/images/international2017/overview/bg_battlepass.jpg); 
+}
+
+.slider-container {
+  border-radius: 5px;
+  height: 150px;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 35px;
+}
+
+.sliderSpace {
+  width: 525px;
+  margin: 30px;
+}
+
+.slideText{
+  font-size: x-large;
+  color: white;
+  text-align: center;
+  padding: 10px;
+  width: 530px;
 }
\ No newline at end of file

From 3dd800cf7ceb7c31c88e0c405790a49ad5f8be0f Mon Sep 17 00:00:00 2001
From: JV Cortez <juanvictor.cortez@gmail.com>
Date: Wed, 23 Aug 2017 21:02:54 -0700
Subject: [PATCH 09/10] Changed slider default value placement to under the
 slideText

---
 client/src/MainApp/Slider.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/src/MainApp/Slider.jsx b/client/src/MainApp/Slider.jsx
index 2ef3bec..833a532 100644
--- a/client/src/MainApp/Slider.jsx
+++ b/client/src/MainApp/Slider.jsx
@@ -47,7 +47,8 @@ class Slider extends Component {
         return (
           <div>
             <div className="sliderSpace">
-              <p className="slideText">Please slide according to your seriousness: {this.props.sliderDefaultValue}</p>
+              <p className="slideText">Please slide according to your seriousness:</p> 
+                <p className="slideNumber">{this.props.sliderDefaultValue}</p>
               <RCSlider min={0} max={8000} value={this.props.sliderDefaultValue} handle={handle} 
               onChange={this.onSliderChange}
               />

From 2bec392242408a8a9cd4fd191ef1628846cb594d Mon Sep 17 00:00:00 2001
From: JV Cortez <juanvictor.cortez@gmail.com>
Date: Wed, 23 Aug 2017 21:03:10 -0700
Subject: [PATCH 10/10] fixed slider position

---
 client/styles/main.scss | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/client/styles/main.scss b/client/styles/main.scss
index 8a86ef5..85e8321 100644
--- a/client/styles/main.scss
+++ b/client/styles/main.scss
@@ -45,6 +45,7 @@
   height: 50px;
   min-height: 400px;
   max-height: 100px;
+  margin-top: 50px;
   padding: 0px 0px 10px 0px;
   position: relative;
   opacity: 0.6;
@@ -394,12 +395,21 @@
 .sliderSpace {
   width: 525px;
   margin: 30px;
+  margin-top: 100px;
 }
 
 .slideText{
   font-size: x-large;
   color: white;
+  margin: 0px;
+  text-align: center;
+  width: 530px;
+}
+
+.slideNumber{
+  font-size: x-large;
+  color: white;
+  margin: 0px;  
   text-align: center;
-  padding: 10px;
   width: 530px;
 }