UI complete

Author: craig-dsilva

chat-app/client/src/App.css

@@ -0,0 +1,42 @@
+.messages {
+  list-style: none;
+}
+
+.message {
+  margin-bottom: 0.5em;
+}
+
+.chat-box {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 16px;
+  display: flex;
+  height: 7vh;
+  gap: 8px;
+}
+
+.chat-input {
+  flex: 1;
+  border-radius: 8px;
+  border: 1px solid #777;
+}
+
+.send-button {
+  background-color: #12bc00;
+  color: #fff;
+  border-radius: 8px;
+  border: none;
+}
+
+@media screen and (min-width: 800px) {
+  .container {
+    margin: auto 30%;
+  }
+  .chat-box {
+    height: 5vh;
+    left: 25%;
+    right: 25%;
+  }
+}

chat-app/client/src/App.jsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import useSocket from "./hooks/useSocket";
+import "./App.css";
 
 export default function App() {
   const { messages, sendMessage } = useSocket("http://localhost:3000");
@@ -10,16 +11,26 @@ export default function App() {
     sendMessage(input.trim());
     setInput("");
   };
-  
+
   return (
-    <div>
-      <ul>
-        {messages.map((msg, i) => (
-          <li key={i}>{msg.text}</li>
+    <div className="container">
+      <ul className="messages">
+        {messages.map((message, i) => (
+          <li className="message" key={i}>
+            {message.text}
+          </li>
         ))}
       </ul>
-      <input value={input} onChange={(e) => setInput(e.target.value)} />
-      <button onClick={handleSend}>Send</button>
+      <div className="chat-box">
+        <input
+          className="chat-input"
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+        />
+        <button className="send-button" onClick={handleSend}>
+          Send
+        </button>
+      </div>
     </div>
   );
 }