Latex fix again (#51)

* Media Widget Render patch, reapply CSS changes

* About logo update

client/src/components/About.js

@@ -1,11 +1,11 @@
 import React, { Component } from "react";
 import './style/About.css'; 	
-import egg from '../images/paul.jpg';
+import logo from '../images/logotest.png';
 
 export default function About(props) {
         return (
             <div className="about">
-                <img src={egg} id="loginlogo"/>
+                <img src={logo} id="about-logo"/>
                 <div className="info-content">
                     Welcome to UChat created by the Bash Brothers! UChat is an application where users can share and send messages like any other app along with LaTeX equations and images!
                     <p>Aman Oberoi</p>

client/src/components/ChatWindow.js

@@ -18,7 +18,7 @@ class MediaWidget extends React.Component {
         super(props);
         this.state = {
             img: defImg,
-            status: 1,
+            display: 1,
         }
         this.generatePreview = this.generatePreview.bind(this);
         this.backClick = this.backClick.bind(this);
@@ -132,20 +132,21 @@ class MediaWidget extends React.Component {
         if (i == 3) {
             this.setState({ img: defImg })
         }
-        this.setState({ status: i })
+        this.setState({ display: i })
     }
 
     render() {
-        const status = this.state.status;
-        if (status === 1) {
+        const status = this.props.status;
+        if(status) {
+            if (this.state.display === 1) {
             return (
                 <div className="mediaWidget">
                     <div className="mediaLatex" onClick={() => this.backClick(2)} />
                     <div className="mediaUploadImage" onClick={() => this.backClick(3)} />
                 </div>
             )
         }
-        else if (status === 2) {  //render the latex widget on latex button click
+        else if (this.state.display === 2) {  //render the latex widget on latex button click
             return (
                 <div className="latexWidget">
                     <div className="widgetHeader">
@@ -158,7 +159,7 @@ class MediaWidget extends React.Component {
                 </div>
             )
         }
-        else if (status === 3) { //render the image input widget
+        else if (this.state.display === 3) { //render the image input widget
             return (
                 <div className="imageWidget">
                     <div className="widgetHeader">
@@ -173,6 +174,7 @@ class MediaWidget extends React.Component {
                     </form>
                 </div>
             )
+            }
         }
         return (null);
     }
@@ -281,7 +283,7 @@ export default class ChatWindow extends Component {
             }
 
             // get updated list of messages every 5 seconds
-            this.intervalID = setInterval(this.getData.bind(this), 5000)
+            this.intervalID = setInterval(this.getData.bind(this), 3000)
 
             this.setState({
                 loggedIn: loggedIn, curUser: curUser, curChat: curChat,
@@ -291,7 +293,7 @@ export default class ChatWindow extends Component {
         }
         else {
             // get updated list of messages every 5 seconds
-            this.intervalID = setInterval(this.getData.bind(this), 5000)
+            this.intervalID = setInterval(this.getData.bind(this), 3000)
             this.setState({ loggedIn: loggedIn, curUser: curUser, });
         }
 
@@ -363,25 +365,8 @@ export default class ChatWindow extends Component {
 
     }
     //handle clicks on the media button
-    handleMediaClick(i) {
-        switch (i) {
-            case 0: // media button clicked
-                if (this.state.mediaState === 0)
-                    this.setState({ mediaState: 1, })
-                else
-                    this.setState({ mediaState: 0, })
-                break;
-            case 1: // latex button clicked
-                this.setState({ mediaState: 2, })
-                break;
-            case 2: // image button clicked
-                this.setState({ mediaState: 3, })
-                break;
-            case 3: // back button clicked
-                this.setState({ mediaState: 1, })
-                break;
-
-        }
+    handleMediaClick() {
+        this.setState({mediaState: !(this.state.mediaState)})
 
     }
 
@@ -549,7 +534,7 @@ export default class ChatWindow extends Component {
                 </div>
                 <div className="curChat">
                     <div className="inputField">
-                        <div className="button-media" onClick={() => this.handleMediaClick(0)} />
+                        <div className="button-media" onClick={() => this.handleMediaClick()} />
                         <form onSubmit={this.handleSubmit}>
                             <input
                                 type="text"

client/src/components/Nav.js

@@ -11,6 +11,7 @@ import IconContactUs from '../images/icon_contactus.svg';
 import IconSearch from '../images/icon_search.svg';
 import IconNotif from '../images/icon_notif.svg';
 import IconFriendReqs from '../images/friend_requests.svg';
+import Logo from '../images/logotest.png';
 
 export default class Nav extends React.Component {
     constructor(props) {
@@ -66,6 +67,7 @@ export default class Nav extends React.Component {
         return (
                 <div className="main">
                     <div className="navigation1">
+                    <img src={Logo} className="navbarLogo"/>
                     <div className="page-title">{this.state.curPage}</div>
                         <Link to="/chats" className="navButton" onClick={() => this.setState({curPage: 'Chats'})}>
                             <img src={IconChat} className="navIcon"/>

client/src/components/style/About.css

@@ -24,4 +24,10 @@
     border-radius: 30px;
     box-shadow: 2px 3px 6px 4px #cccccc;
     width: 60vh;
+}
+
+#about-logo{
+    height: 20vh;
+    margin-bottom: 20px;
+    border: none;
 }

client/src/components/style/ChatWindow.css

@@ -8,6 +8,7 @@
 .sidebar{
   height: 96vh;
   width: 13vw;
+  border-right: 2px solid black;
 }
 
 .searchorcreate{
@@ -124,7 +125,7 @@
     display: flex;
     flex-direction: column-reverse;
     font-size: larger;
-    background-color: white;
+    background-color: #f8f9fb;
     border: none;
     margin-top: 6vh;
 }
@@ -165,10 +166,10 @@
     max-width: 60%;
     border-radius: 5px;
     padding-left: 20px;
-    padding-right: 20px;
+    padding-right: 5px;
     padding-bottom: 3px;
     border: solid #e5e5e5 1px;
-    margin-left: 1%;
+    margin-left: 1vw;
     margin-right: auto;
     overflow-wrap: normal;
     /*display: inline-block;*/
@@ -183,12 +184,12 @@
     border-radius: 5px;
     border: 1px solid #163099;
     padding-left: 20px;
-    padding-right: 20px;
+    padding-right: 5px;
     padding-bottom: 3px;
     overflow-wrap: normal;
     max-width: 60%;
     color: white;
-    margin-right: 0;
+    margin-right: 1vw;
     margin-left: auto;
 
 }
@@ -243,6 +244,8 @@
     height: 2vh;
     width: 2vh;
     vertical-align: middle;
+    border: none;
+
 }
 
 .searchbar-send:focus {
@@ -255,6 +258,7 @@
     width: 60vw;
     height: 2vh;
     vertical-align: middle;
+    border: 1px solid black;
 }
 
 .message-input:focus {
@@ -499,24 +503,25 @@
 
 .messageText {
   margin-top: 10px;
-  font-size: 20px;
+  font-size: 2vh;
+  padding-right: 15px;
 }
 
 .messageTimeSent {
-  font-size: 10px;
+  font-size: 1vh;
   text-align: right;
 }
 
 .messageTimeReceived {
-  font-size: 10px;
+  font-size: 1vh;
   margin-top: 5px;
   text-align: right;
 }
 
 .messageImage {
   border-radius: 10px;
   margin-top: 10px;
-  max-width: 53vw;
+  max-width: 52vw;
   height: auto;
 }
 

client/src/components/style/Nav.css

@@ -77,7 +77,15 @@
 
   .navIcon {
     height: 2.5vh;
-    margin-right: .2vw;
+    margin-right: .25vw;
+    margin-left: .25vw;
     width: auto;
     fill: black;
+  }
+
+  .navbarLogo {
+    height: 2.5vh;
+    width: auto;
+    left: 0.5%;
+    position: absolute;
   }

client/src/images/attributions.txt

@@ -1,5 +1,5 @@
 edit: https://www.flaticon.com/free-icon/edit_1159633?term=edit&page=1&position=3&page=1&position=3&related_id=1159633&origin=search
-chat: https://www.flaticon.com/free-icon/chat_876170?term=message&page=1&position=22&page=1&position=22&related_id=876170&origin=search
+chat: https://www.flaticon.com/free-icon/speech-bubble_2462844?term=chat&page=1&position=38&page=1&position=38&related_id=2462844&origin=search
 info: https://www.flaticon.com/free-icon/rounded-info-button_61053?term=info&page=3&position=21&page=3&position=21&related_id=61053&origin=search
 login: https://www.flaticon.com/free-icon/enter_1828391?term=login&page=1&position=3&page=1&position=3&related_id=1828391&origin=search
 register: https://www.flaticon.com/free-icon/add_992651?term=add&page=1&position=2&page=1&position=2&related_id=992651&origin=search
@@ -8,7 +8,7 @@ search: https://www.flaticon.com/free-icon/search_56936?term=search&page=1&posit
 searchbarbutton: https://www.flaticon.com/free-icon/search_149852?term=search&page=1&position=4&page=1&position=4&related_id=149852&origin=search&origin=tag
 send: https://www.flaticon.com/free-icon/send_736212?term=send&page=1&position=4&page=1&position=4&related_id=736212&origin=search
 notification: https://www.flaticon.com/free-icon/notification_633816?term=notifications&page=1&position=5&page=1&position=5&related_id=633816&origin=search
-friendrequests: https://www.flaticon.com/free-icon/contact_1239336?term=add%20contacts&page=1&position=6&page=1&position=6&related_id=1239336&origin=search
+friendrequests: https://www.flaticon.com/free-icon/friends_880594?term=friend&page=1&position=5&page=1&position=5&related_id=880594&origin=search
 pendingicon: https://www.flaticon.com/free-icon/more_512142?term=three%20dots&page=1&position=3&page=1&position=3&related_id=512142&origin=search
 addicon: https://www.flaticon.com/free-icon/add_1237946?term=plus&page=1&position=1&page=1&position=1&related_id=1237946&origin=search
 check icon: https://www.flaticon.com/free-icon/tick_447147?term=checkmark&page=1&position=1&page=1&position=1&related_id=447147&origin=search