Adding chat components

2022-03-06 15:57:04 -05:00
parent c332594b40
commit ab80301f31
4 changed files with 213 additions and 0 deletions
--- a/sports-matcher/src/chats.css
+++ b/sports-matcher/src/chats.css
@@ -0,0 +1,88 @@
+.chatcomponent > * {
+    display: inline-block;
+}
+.contact {
+    border-style: solid;
+    border-width: 1px;
+    border-bottom: 1px;
+    border-color:rgb(75, 75, 75);
+
+    background-color: rgb(80, 80, 80);
+    height: 70px;
+
+    user-select: none;
+}
+.contact.dark {
+    background-color: black;
+}
+.contactlist {
+    height: 500px;
+    width: 200px;
+    top: 0;
+    left: 0;
+    box-sizing: border-box;
+    border-radius: 2%;
+    background: rgb(48, 45, 45);
+    overflow-y: scroll;
+    overflow-x: hidden;
+
+    text-align: center;
+}
+.messagelist {
+    height: 500px;
+    width: 800px;
+    background-color: rgb(80, 80, 80);
+    overflow-x: hidden;
+    overflow-y: scroll;
+}
+.messagelist > * {
+    display: block;
+}
+.profilepiccontainer {
+    height: 60px;
+    width: 60px;
+    margin-top: 10px;
+    margin-left: 10px;
+    margin-right: 10px;
+    float: left;
+}
+.profilepic {
+    border-radius: 50%;
+    height: 50px;
+    width: 50px;
+}
+.profilenamecontainer {
+    text-align: center;
+    padding: 7%;
+}
+.profilename {
+    color: white;
+}
+.chatbubble {
+	margin-top: 20px;
+    margin-left: 20px;
+    display: inline-block;
+    position: relative;
+	width: auto;
+	height: auto;
+    padding: 10px;
+	
+    border-radius: 10px;
+}
+.left {
+    background-color: rgba(0, 57, 163, 0.637);
+    margin-right: 35px;
+    color: white;
+    float: auto;
+}
+.right {
+    background-color: khaki;
+    color: black;
+    margin-right: 35px;
+    float: right;
+}
+.chatbubble-container {
+    width: 800px;
+    height: auto;
+    float: left;
+}