changed chat ui (beta 4)

TheGemDev · Jan 13, 2021 · 5471bde · 5471bde
1 parent de3dc80
commit 5471bde
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 10 deletions.
diff --git a/app/package.json b/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gem-chat",
-  "version": "0.0.1-beta-3",
+  "version": "0.0.1-beta-4",
   "author": {
     "name": "The Gem Dev",
     "url": "https://github.com/TheGemDev"

diff --git a/app/src/App.css b/app/src/App.css
@@ -5,10 +5,50 @@ body {
   text-align: left;
 }
 
-img {
-  border-radius: 20%;
+
+
+
+
+p {
+  max-width: 100%;
+  margin-bottom: 12px;
+  line-height: 24px;
+  padding: 10px 20px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 50px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 50px;
+  position: relative;
+  text-align: left;
+}
+
+.message {
+  display: flex;
+  align-items: center;
+}
+
+
+.sent {
+  flex-direction: row-reverse;
 }
 
-.MuiButton-root {
-  border-radius: 8px;
+.sent p {
+  color: black;
+  background: #0b93f6;
+  align-self: flex-end;
 }
+.received p {
+  background: #e5e5ea;
+  color: black;
+}
+
+img {
+  width: 40px;
+  height: 40px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 50px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 50px;
+  margin: 2px 0;
+  display: flex;
+}
diff --git a/app/src/components/Header.js b/app/src/components/Header.js
@@ -1,13 +1,13 @@
 import React from "react";
 
-import { PageHeader } from "antd";
+import { PageHeader, Divider } from "antd";
 import { YoutubeFilled, TwitterOutlined } from "@ant-design/icons";
 import { SignOut } from "./AuthButton";
 
 const Header = () => (
   <header>
     <PageHeader
-      title="Gem Chat App (0.0.1 beta-3)"
+      title="Gem Chat App (0.0.1 beta-4)"
       extra={
         <div
           style={{
@@ -35,6 +35,7 @@ const Header = () => (
         </div>
       }
     />
+  <Divider />
   </header>
 );
 

diff --git a/app/src/components/MessageInput.js b/app/src/components/MessageInput.js
@@ -2,6 +2,7 @@ import React, { useState } from "react";
 
 import { Form, Button, Input } from "antd";
 import firebase, { auth, firestore } from "../utils/firebase";
+import { SendOutlined } from "@ant-design/icons";
 
 const MessageInput = () => {
   const [message, setMessage] = useState("");
@@ -47,12 +48,12 @@ const MessageInput = () => {
           type="primary"
           htmlType="submit"
           disabled={!message}
-        >
-          Send
+        ><SendOutlined />
         </Button>
       </Form.Item>
     </Form>
   );
+
 };
 
 export default MessageInput;
diff --git a/app/src/components/MessagesList/index.js b/app/src/components/MessagesList/index.js
@@ -6,7 +6,7 @@ import { useCollectionData } from "react-firebase-hooks/firestore";
 
 const MessagesList = () => {
   const bottomElement = useRef();
-
+  
   const messagesRef = firestore.collection("messages");
   const query = messagesRef.orderBy("createdAt").limit(500);
   const [messages] = useCollectionData(query, { idField: "id" });