merging popup chat

client/src/MainApp/MatchmakerPage.jsx

@@ -100,10 +100,10 @@ class MatchmakerPage extends Component {
       currentUserName: username
     })
   }
-
+  
   componentDidMount() {
     this.socket = io.connect('http://localhost:3001');
-
+    
     var c = this;
     this.socket.on("connect", () => {
       console.log("Connected!");

client/src/MainApp/PopupChat.jsx

@@ -9,40 +9,48 @@ class PopupChat extends Component {
     this.state = {
       currentUser: this.props.auth.user.username,
       input: '',
+      showHiddenChat: false
     }
     this.onChange = this.onChange.bind(this);
   }
 
+  toggleHiddenChat = () => {
+    this.setState({ showHiddenChat: !this.state.showHiddenChat })
+  }
+
+  componentDidMount() {
+    console.log("PopupChat component mounted");
+  }
+
   onChange(e) {
     this.setState({ [e.target.name]: e.target.value });
   }
 
   render() {
     const messageList = this.props.messages.map((message) => {
-      return (<div key={message.id} className="message">
-        <span >{message.username}: {message.content}</span>
-      </div>);
-    })
-    return (
-      <div className="bordered">
-        <div className="messagelist">{messageList}</div>
 
-        <div>
+          return (<div key={message.id} className="message">
+            <span >{message.username}: {message.content}</span>
+          </div>);
+        })
+    const className = this.state.showHiddenChat ? "messagelist shown" : "messagelist bottom";
+    return (
+      <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>
     )
   }

client/src/MainApp/Slider.jsx

@@ -26,39 +26,34 @@ class Slider extends Component {
     console.log(value); //eslint-disable-line
   }
 
-  render() {
-
-    const handle = (props) => {
-      const { value, dragging, index, ...restProps } = props;
-      return (
-        <Tooltip
-          prefixCls="rc-slider-tooltip"
-          overlay={value}
-          visible={dragging}
-          placement="top"
-          key={index}
-        >
-          <Handle value={value} {...restProps} />
-        </Tooltip>
-      );
-    };
-
-    const wrapperStyle = { width: 400, margin: 50 };
-    return (
-      <div>
-
-        <div style={wrapperStyle}>
-          <p>Please slide according to your seriousness</p>
-          <p>{this.props.sliderDefaultValue}</p>
-          <RCSlider min={0} max={8000} value={this.props.sliderDefaultValue} handle={handle}
-            onChange={this.onSliderChange}
-          />
-
-        </div>
-      </div>
-
-    );
-  }
+  render () {
+        const handle = (props) => {
+          const { value, dragging, index, ...restProps } = props;
+          return (
+            <Tooltip
+              prefixCls="rc-slider-tooltip"
+              overlay={value}
+              visible={dragging}
+              placement="top"
+              key={index}
+            >
+              <Handle value={value} {...restProps} />
+            </Tooltip>
+          );
+        };
+
+        return (
+          <div>
+            <div className="sliderSpace">
+              <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}
+              />
+            </div>
+          </div>
+        );
+      }
 }
 
 export default Slider;

client/styles/main.scss

@@ -28,21 +28,29 @@
 //   .navbar, .navbar-default{
 //     display: block;
 //   }
-
+  .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;
+  margin-top: 50px;
   padding: 0px 0px 10px 0px;
+  position: relative;
+  opacity: 0.6;
+  overflow: hidden;
+  width: 300px;
 
 }
 
@@ -130,7 +138,6 @@
 }
 
 //css style for pop up box
-
 .popupbox {
   width:100%;
   height:100%;
@@ -243,7 +250,6 @@
 .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;
@@ -299,21 +305,111 @@
   flex-direction: column;
 }
 
-
 .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;
+  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;
+  width: 530px;
 }