User experience improved

client/src/components/Input/Input.css

@@ -15,13 +15,6 @@ input:focus, textarea:focus, select:focus{
   outline: none;
 }
 
-.sendButton {
-  color: #fff !important;
-  text-transform: uppercase;
-  text-decoration: none;
-  background: #2979FF;
-  padding: 20px;
-  display: inline-block;
-  border: none;
-  width: 20%;
+.sendBtnWidth {
+  width: 20% !important;
 }

client/src/components/Input/Input.js

@@ -12,7 +12,7 @@ const Input = ({ setMessage, sendMessage, message }) => (
       onChange={({ target: { value } }) => setMessage(value)}
       onKeyPress={event => event.key === 'Enter' ? sendMessage(event) : null}
     />
-    <button className="sendButton" onClick={e => sendMessage(e)}>Send</button>
+    <button className="sendBtnWidth blueBtn" onClick={e => sendMessage(e)}>Send</button>
   </form>
 )
 

client/src/components/Join/Join.css

@@ -38,16 +38,8 @@ html, body {
   border-bottom: 2px solid white;
 }
 
-.button {
-    color: #fff !important;
-    text-transform: uppercase;
-    text-decoration: none;
-    background: #2979FF;
-    padding: 20px;
-    border-radius: 5px;
-    display: inline-block;
-    border: none;
-    width: 100%;
+.joinBtnWidth {
+  width: 100%;
 }
 
 .mt-20 {

client/src/components/Join/Join.js

@@ -18,7 +18,7 @@ export default function SignIn() {
           <input placeholder="Room" className="joinInput mt-20" type="text" onChange={(event) => setRoom(event.target.value)} />
         </div>
         <Link onClick={e => (!name || !room) ? e.preventDefault() : null} to={`/chat?name=${name}&room=${room}`}>
-          <button className={'button mt-20'} type="submit">Sign In</button>
+          <button className={'joinBtnWidth blueBtn mt-20'} type="submit">Sign In</button>
         </Link>
       </div>
     </div>

client/src/components/Messages/Message/Message.js

@@ -4,9 +4,14 @@ import './Message.css';
 
 import ReactEmoji from 'react-emoji';
 
+const capitalizeName = (name) => {
+  let data = name
+  let char = data.slice(0,1).toUpperCase()
+  return name.replace(data.charAt(0),char)
+}
+
 const Message = ({ message: { text, user }, name }) => {
   let isSentByCurrentUser = false;
-
   const trimmedName = name.trim().toLowerCase();
 
   if(user === trimmedName) {
@@ -17,7 +22,7 @@ const Message = ({ message: { text, user }, name }) => {
     isSentByCurrentUser
       ? (
         <div className="messageContainer justifyEnd">
-          <p className="sentText pr-10">{trimmedName}</p>
+          <p className="sentText pr-10">{capitalizeName(trimmedName)}</p>
           <div className="messageBox backgroundBlue">
             <p className="messageText colorWhite">{ReactEmoji.emojify(text)}</p>
           </div>
@@ -28,7 +33,7 @@ const Message = ({ message: { text, user }, name }) => {
             <div className="messageBox backgroundLight">
               <p className="messageText colorDark">{ReactEmoji.emojify(text)}</p>
             </div>
-            <p className="sentText pl-10 ">{user}</p>
+            <p className="sentText pl-10 ">{capitalizeName(user)}</p>
           </div>
         )
   );

client/src/index.css

@@ -0,0 +1,15 @@
+.blueBtn {
+    color: #fff !important;
+    text-transform: uppercase;
+    text-decoration: none;
+    background: #2979FF;
+    padding: 20px;
+    display: inline-block;
+    border: none;
+    transition: transform 2s;
+}
+
+.blueBtn:hover {
+    transition: background-color 3s linear;
+    background-color: #062c6e;
+}

client/src/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-
+import './index.css'
 import App from './App';
 
 ReactDOM.render(<App />, document.getElementById('root'));