Merge pull request #19 from MLH-Fellowship/CSS_Styling

CSS Styling

Author: RickyC0626

public/index.html

@@ -15,6 +15,8 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+     <!-- Compiled and minified CSS -->
+     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/view/App/App.css

@@ -11,4 +11,7 @@
     align-items: center;
     justify-content: center;
     font-size: calc(10px + 2vmin);
-} */
+} */
+
+
+

src/view/App/App.js

@@ -20,3 +20,4 @@ function App()
 }
 
 export default App;
+

src/view/Chat/Chat.css

@@ -0,0 +1,62 @@
+.Chat{
+    background-color:lightcyan;
+    color: black;
+    padding: 40px;
+    text-align: center;
+    border-style: solid;
+    width:500px;
+    height: 600px;
+    overflow-y: auto;
+    margin:50px ;
+    top:-40px;
+  }
+
+  *:focus {
+    outline: none;
+}
+
+  .Chat{
+    border-width: 3px;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    margin-left: 20px;
+    margin-right: 20px;
+    padding-top: 10px;
+    padding-bottom: 15px;
+    padding-right: 20px;
+    padding-left: 15px;
+    border-radius: 15px;
+    border: 1px solid lightgrey;
+  }
+
+ /* total width */
+ .Chat::-webkit-scrollbar {
+  width:16px
+}
+
+
+/* scrollbar itself */
+.Chat::-webkit-scrollbar-thumb {
+  background-color:#babac0;
+  border-radius:16px;
+  border:4px solid #babac0;
+}
+
+/* set button(top and bottom of the scrollbar) */
+.Chat::-webkit-scrollbar-button {display:none} 
+
+.username{
+      color: #cc0066;      
+      text-transform: uppercase;
+      font-weight: bold;
+  }
+
+.playername{
+      color: #0000cc;
+      text-transform: uppercase;
+      font-weight: bold;
+  }
+
+
+
+

src/view/Chat/Chat.jsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from "react";
+import './Chat.css';
 
 export default function Chat(props)
 {
@@ -52,19 +53,19 @@ export default function Chat(props)
     }, []);
 
     return (
-        <div>
-            Welcome, <strong>{props.userName}</strong>
+        <div className="Chat">
+           <span className="welcomemsg">  Welcome, <strong className="username">{props.userName}</strong> </span> 
             <form onSubmit={onSubmit}>
                 <input type="text" placeholder="Chat Here" onChange={onChange} />
             </form>
             Messages:<br/>
             {messages.map(msg => 
-                <div>
+                <div className="otherUser">
                     {msg.player.name !== props.userName ? 
-                        <a href={msg.player.name} onClick={event => onClick(event, msg.player)}><strong>{msg.player.name}</strong></a> : 
-                        <strong>{msg.player.name}</strong>
+                        <a href={msg.player.name} onClick={event => onClick(event, msg.player)}><strong className="playername">{msg.player.name}  </strong></a> : 
+                        <strong className="username">{msg.player.name}</strong>
                     }  
-                    <br/>
+                   : &nbsp; 
                     {msg.chatMsg}
                 </div>
             )}

src/view/Client/Client.css

@@ -0,0 +1,83 @@
+.login{
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+
+}
+
+/*
+.logo {
+    position: absolute;
+    left: 50%;
+    margin-left: -50px;
+    top: 50%;
+    margin-top: -50px;
+}
+*/
+
+/*
+.main{
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 10px;
+    grid-auto-rows: minmax(100px, auto);
+  }       
+  
+
+  .two {
+    grid-column: 1 / 3;
+    grid-row: 1;
+  }
+
+  
+  .three { 
+    grid-column: 2 / 4;
+    grid-row: 1 / 3;
+  }
+  
+*/ 
+
+.main {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 15px;
+    grid-auto-rows: minmax(100px, auto);
+    margin: 2rem;
+  }
+
+  .one {
+    grid-column: 2;
+    grid-row: 1;
+    justify-self: center;
+  }
+  
+  .two { 
+    grid-column: 2;
+    grid-row: 2 / 5;
+    position: relative;
+    right: 240px;
+    resize: both;
+  
+  }
+
+  .three {
+    grid-column: 3;
+    grid-row: 2 / 3;
+    position: relative;
+    right: 250px;
+    top: 24px;
+  
+  }
+
+  .four {
+    grid-column: 1;
+    grid-row: 3;
+    position: adsolute;
+    bottom: 0;
+    left: 0;
+  }
+
+

src/view/Client/Client.jsx

@@ -3,6 +3,8 @@ import socketIOClient from "socket.io-client";
 import Chat from "../Chat/Chat";
 import Notepad from "../Notepad/Notepad";
 import Music from "../Music/Music";
+import share_my_code  from './share_my_code.png';
+import "./Client.css"
 
 let ENDPOINT;
 
@@ -57,20 +59,23 @@ export default function Client()
     return (
         <div>
             {!isLoggedIn ? 
-                <div>
+                <div className="login">
                     <form onSubmit={onSubmit}>
                         Enter a Username:<br/>
                         <input type="text" name="input" placeholder="Username" />
-                        <button type="submit">Enter the Chat</button>
+                        <button class="btn waves-effect waves-light" type="submit" name="action">Enter the Chat
+                        <i class="material-icons right">send</i>
+                        </button>
                     </form>
                     <br/>
                     {errorMsg}
                 </div>
                 :
-                <div>
-                    <Notepad socket={socket} />
-                    <Chat socket={socket} userName={userName} />
-                    <Music/>
+                <div className="main">
+                   <div className="one"> <img className="logo" src={share_my_code} alt="Logo"/> </div>
+                   <div className="two"> <Notepad socket={socket} /> </div>
+                   <div className="three"> <Chat socket={socket} userName={userName} /> </div>
+                   <div className="four">  <Music/> </div>
                 </div>
             }
         </div>

src/view/Client/share_my_code.png

@@ -34,7 +34,7 @@ class Music extends Component {
     render() {
         const imageName = this.getImageName();
         return (
-            <div>
+            <div className="musicbox">
                 <form>
                     <img src={imageP[imageName]} onClick={this.toggleBoth} alt='crappyjukebox' />
                 </form>

src/view/Music/Music.jsx

@@ -0,0 +1,19 @@
+label,
+textarea {
+    font-size: 1rem;
+    letter-spacing: 1px;
+}
+textarea {
+    padding: 10px;
+    line-height: 1.5;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+    box-shadow: 1px 1px 1px rgb(219, 205, 205);
+    width: 600px;
+	height: 600px;
+}
+
+label {
+    display: block;
+    margin-bottom: 0em;
+}