isometrik-chat 0.1.0

package/src/view/component/Chatbox.js/styles.css

@@ -0,0 +1,231 @@
+.chatbox_body {
+  height: calc(100% - 70px);  /* 70px is height of chat input send */
+  background-color: aliceblue;
+  overflow-y: auto;
+  padding: 30px;
+}
+
+.chatbox_body .chat_message {
+  padding: 6px 7px 8px 9px;
+  background-color: var(--gray_color);
+  font-size: 16px;
+  width: fit-content;
+  border-radius: 5px;
+  margin-bottom: 2px;
+  color:var(--black)
+}
+
+
+.chatbox_body .chat_message_recive {
+  padding: 6px 7px 8px 9px;
+  background-color: var(--gray_color);
+  font-size: 16px;
+  width: fit-content;
+  border-radius: 5px;
+  margin-bottom: 2px;
+  color:var(--black)
+}
+
+.chatbox_body .chat_message:hover{
+  cursor: pointer;
+  background-color:var(--chat_hover)
+
+}
+
+.chatbox_body .chat_message_recive:hover{
+  cursor: pointer;
+  background-color:var(--chat_hover)
+
+}
+
+.chatbox_body .chat_message:hover .arrow{
+  display: block !important;
+}
+
+.chatbox_body .chat_message_recive:hover .arrow{
+  display: block !important;
+}
+
+.css-tlc64q-MuiPaper-root-MuiDialog-paper{
+  max-width: 315px !important;
+}
+
+.chatbox_body .chatText:hover .emoji{
+  display: block !important;
+}
+
+.MuiDialog-container{
+  justify-content: none !important;
+  background-color: none !important;
+}
+
+.chatbox_body .chatText .emoji{
+  color:var(--icon_color);
+  background-color: var(--contact-profile-bg);
+  border-radius: 20px;
+
+}
+
+.emoji_header span{
+  font-size: x-large;
+  padding: 6px 5px 5px 6px;
+  cursor: pointer;
+}
+
+.emoji_header{
+  /* transform: translateY(100px);
+    transition: 0.2s; */
+}
+
+.MuiPaper-root-MuiDialog-paper{
+  background-color: none !important;
+}
+
+.MuiDialog-paper{
+  background-color: none !important;
+}
+
+.chatbox_body .chat_message .arrow{
+  position: absolute;
+    left: 28px;
+    top: -18px;
+    background: var(--chat_hover);
+    display: flex;
+    align-content: end;
+    text-align: end;
+
+}
+
+.chatbox_body .chat_message .emoji_gif{
+  position: absolute;
+  left: 35px;
+  top: 15px;
+  background: var(--chat_hover);
+  display: flex;
+  align-content: end;
+  text-align: end;
+  border-radius: 15px;
+  /* width: 22px;
+  height: 20px; */
+  font-size: large;
+}
+
+.chatbox_body .chat_message .emoji{
+  position: absolute;
+    left: 152px;
+    top: 6px;
+    /* background: var(--chat_hover); */
+    display: flex;
+    align-content: end;
+    text-align: end;
+
+}
+
+.css-tlc64q-MuiPaper-root-MuiDialog-paper{
+  background-color: none !important;
+}
+
+
+
+.chat_name {
+  position: absolute;
+  top: -20px;
+  font-weight: bolder;
+}
+
+form .footerChat {
+  position: relative;
+  display: flex;
+  padding: 7px 16px;
+  align-items: center;
+  background-color:var(--gray_color);
+}
+
+form .footer {
+  width: 52%;
+  position: relative;
+  display: flex;
+  padding-top: 8px 0px;
+  align-items: center;
+  background-color: #ebebeb;
+}
+
+.css-yiavyu-MuiBackdrop-root-MuiDialog-backdrop{
+  background-color: hsla(0,0%,100%,0.85) !important;
+}
+
+.css-1t1j96h-MuiPaper-root-MuiDialog-paper{
+  width:33% !important;
+}
+
+.css-hz1bth-MuiDialog-container{
+padding:10px 0px 0px 0px ;
+}
+
+/* font-size: 0.6875rem;
+    position: relative;
+    top: 13px;
+    padding: 0px 4px;
+    left: 2px;
+    color: var(--chat_timing); */
+.chat_time {
+  font-size: 0.6875rem;
+  position: relative;
+  top: 13px;
+  padding: 0px 4px;
+  left: 2px;
+  color:var(--chat_timing)
+}
+
+.chat_recive {
+  margin-left: auto;
+  background-color: var(--sender_chatbg) !important;
+}
+
+.chat_recive .arrow{
+  position: absolute;
+    left: 28px;
+    top: -18px;
+    background: var(--sender_chatbg) !important;
+    display: flex;
+    align-content: end;
+    text-align: end;
+}
+
+/* .chat_recive :hover{
+  cursor: pointer;
+  background-color:var(--sender_chatbg)
+
+} */
+
+.chat_footer form {
+  flex: 1;
+}
+
+.chat_footer textarea {
+  width: 100%;
+  padding: 9px 11px 12px;
+  margin: 2px 5px;
+  border: none;
+  outline: none;
+  border-radius: 5px;
+  color: var(--black);
+  background-color: var(--input_bg);
+  margin-left: 10px;
+}
+
+
+.EmojiPickerReact {
+  height:320px !important;
+
+}
+
+.EmojiPickerReact .epr-search-container input.epr-search{
+  transition:unset !important;
+}
+
+
+.emoji-picker-react{
+  position: absolute !important;
+}
+

package/src/view/component/Contact/index.js

@@ -0,0 +1,56 @@
+import React, { useEffect, useState } from "react";
+import CloseIcon from "@mui/icons-material/Close";
+import { Avatar } from "@mui/material";
+import "./styles.css";
+import BlockIcon from "@mui/icons-material/Block";
+import SearchBar from "../SeachBar";
+import "./styles.css"
+import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace';
+
+function ContactInfo(props) {
+  const [isShow , setIsShow] = useState(false)
+ 
+  const closeHandler = () => {
+    // props?.mediaClose();
+   props?. mediaContact();
+
+    props?.handler();
+  };
+
+
+  // const mediaHandler = ()=>{
+  //   setIsShow(true);
+  // }
+
+  return (
+    <>
+
+      {props?.mediaShow ? (
+        <div className="contact_container">
+          <div
+            className="contact_header header" 
+            
+          >
+            <KeyboardBackspaceIcon onClick={closeHandler} className="pointer" />
+            <p>media info</p>
+          </div>
+          <div>
+            {/* <div className="contact_profile border border-1-light">
+              <SearchBar />
+            </div>
+
+            <div className="bg-white">
+              <p className="text_Color text-align-center searchmsg text-center">
+                Seach for meassage with
+              </p>
+            </div> */}
+          </div>
+        </div>
+     ) : (
+        ""
+      )} 
+    </>
+  );
+}
+
+export default ContactInfo;

package/src/view/component/Contact/styles.css

@@ -0,0 +1,208 @@
+.contact_profile .profile_image {
+    display: flex;
+    align-items: center;
+    align-content: center;
+    width: 200px !important;
+    height: 200px !important;
+    margin-top: 25px;
+}
+
+.contact_container {
+    max-width: 30vw;
+    background-color:var(--contact-profile-bg);
+    overflow: auto;
+    height: 100vh;
+    right: 0px;
+    top: 0px
+}
+
+.contact_container .contact_header {
+    position: fixed;
+    display: flex;
+    align-items: center;
+    background-color: var(--gray_color);
+    height: 62px;
+    padding-left: 25px;
+    border-left: 1px solid var(--border_color);
+    width: 100%
+}
+
+ .contact_header p {
+    color : var(--black)
+}
+
+.contact_profile {
+    position: relative;
+}
+
+.text p {
+    display: flex;
+    align-items: center;
+    padding-top: 17px;
+    padding-left: 20px;
+    padding-right: 30px;
+}
+
+.text p span {
+    margin-left: 20px;
+    font-size: 17px;
+    position: relative;
+    width: 100%;
+    color: var(--black);
+
+}
+
+
+p .btnn {
+    color: var(--danger) !important
+
+}
+
+.contact_container .contactp {
+    position: relative;
+}
+
+text {
+    position: relative;
+}
+
+.text p svg {
+    height: 20px;
+}
+
+.text p .svgg {
+    color: var(--danger);
+    height: 24px;
+    width: 24px;
+    position: relative;
+
+}
+
+.contact-container .contact_profile {
+    position: relative;
+}
+
+.contact-container .text {
+
+    position: relative;
+}
+
+div .contact_status {
+    position: relative;
+}
+
+div .contactsocialInfo {
+    position: relative;
+}
+
+.contact_container .textt {
+    position: relative;
+}
+
+.contact_status .bio {
+    color: var(--black);
+
+}
+
+.contact_container .textt {
+    background-color: var(--primary-white);
+    padding-left: 15px;
+    margin-top: 10px;
+    position: relative;
+}
+
+.contact_container .contactp {
+    position: relative;
+}
+
+.txt {
+    font-size: 14px;
+    padding-left: 42px !important;
+    padding-top: 0px !important
+}
+
+.dlttxt {
+    padding-bottom: 17px;
+}
+
+.showMe {
+    position: relative;
+    animation: contactPro 0.75s;
+    animation-iteration-count: 1;
+}
+
+.svgg .btnn {
+    color: var(--danger) !important
+}
+
+
+@keyframes contactPro {
+    0% {
+        opacity: 0;
+        transform: translateY(-50px);
+    }
+
+    30% {
+        opacity: 0;
+        transform: translateY(-50px);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.contact_container .contact_header p {
+    font-size: 16px;
+    padding-top: 15px;
+    padding-left: 30px;
+}
+
+.contact_profile {
+    display: flex;
+    justify-content: center;
+    background-color: var(--primary-white);
+    margin-top: 60px
+}
+
+
+
+.contact_name {
+    display: flex;
+    justify-content: center;
+    background:var(--primary-white);
+    padding-top: 15px;
+    color: var(--black);
+}
+
+.contact_name div {
+    font-size: 24px;
+}
+
+.contact_name div p {
+    font-size: 16px;
+}
+
+.contactsocialInfo {
+    background-color:var(--primary-white);
+    margin-top: 10px;
+    padding: 17px 30px 17px 30px;
+    display: flex;
+    justify-content: space-between
+}
+
+.contact_status {
+    background-color: var(--primary-white);
+    padding: 17px 30px 5px 30px;
+    line-height: 0.8;
+    margin-top: 10px
+}
+
+div .searchmsg {
+    padding: 72px 50px 72px 50px;
+    font-size: 0.875rem;
+    background-color: var(--primary-white);
+
+
+}