diff --git a/app/package.json b/app/package.json
index bfe2838..9a21f2e 100644
--- 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
index 138557c..9b7501b 100644
--- 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;
+}
\ No newline at end of file
diff --git a/app/src/components/Header.js b/app/src/components/Header.js
index 7fde4e9..57a2dd5 100644
--- 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 = () => (
);
diff --git a/app/src/components/MessageInput.js b/app/src/components/MessageInput.js
index a080995..8353d48 100644
--- 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
+ >
);
+
};
export default MessageInput;
diff --git a/app/src/components/MessagesList/index.js b/app/src/components/MessagesList/index.js
index 4580f4d..ec86ea7 100644
--- 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" });