isometrik-chat 0.1.0

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

@@ -0,0 +1,370 @@
+.profile .profile_image {
+  width: 200px !important;
+  height: 200px !important;
+}
+
+.statuss .status {
+  border-bottom: 2px solid #00a884;
+}
+
+.profile_name .statusField {
+  padding: 10px;
+  border: "3px solid";
+}
+
+.newGroup {
+  background-color: var(--gray_color);
+  height: 100vh;
+  position: absolute;
+  top: -41px !important;
+  left: -170px !important;
+  width: 30.5vw !important;
+  overflow-y: auto;
+}
+
+.mystatus span img {
+  height: 45px;
+  width: 46px;
+  border-radius: 20px;
+}
+
+.mystatus span {
+  /* width: 60px; */
+  padding-left: 16px;
+}
+
+.mystatus {
+  margin-top: 20px;
+  padding-bottom: 30px;
+  border-bottom: 1px solid rgb(175, 174, 174);
+}
+
+.profile_Container {
+  background-color: var(--white);
+  height: 100vh;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 30vw;
+  overflow-y: auto;
+}
+
+.newgroupSlider input,
+.communitySlider input {
+  margin-top: 30px;
+  outline: none;
+  margin-left: 34px;
+  width: 85%;
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  border-bottom: 1px solid lightgray;
+  padding-top: 2px;
+}
+
+.description {
+  height: 20vh;
+  margin-bottom: 10px;
+}
+.communitySlider input {
+  margin-top: 50px !important;
+}
+
+.profile_Container .messageChat {
+  left: 0px;
+  /* margin-top: 110px; */
+  /* margin-bottom: 10px; */
+  position: relative;
+}
+
+.profile_Container .messageChat .bg-white span {
+  padding: 10px;
+  background: #00a884;
+  border-radius: 50px;
+}
+
+.profile_Container .messageChat .bg-white {
+  padding-left: 15px;
+}
+
+.profile_Container .message span {
+  padding: 10px;
+  background: #00a884;
+  border-radius: 50px;
+  /* background: #00a884/; */
+}
+
+.profile_Container .message {
+  padding-left: 15px;
+}
+
+.profile_Div{
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 999;
+}
+
+.profile_Contaner .profile_Div {
+  width: 100vw;
+}
+
+.profile_Div .profile_header {
+  height: 108px;
+  padding-left: 20px;
+  padding-top: 67px;
+  padding-right: 23px;
+  background-color: var(--profile-header);
+  display: flex;
+  width: 30vw;
+  color: white;
+}
+
+.profile_header .profile_arrowIcon {
+  cursor: pointer;
+  color: white;
+}
+
+.profile_header h {
+  color: white;
+  margin-left: 40px;
+  font-size: 18px;
+}
+
+.profile_Container .profile-avatar {
+  display: flex;
+  justify-content: center;
+  margin-top: 140px;
+  margin-bottom: 28px;
+  /* margin-top: 25px; */
+  position: relative;
+}
+
+.profile_Container .proAvatar {
+  animation: showMe 0.75s;
+  animation-iteration-count: 1;
+}
+
+.profile_Container {
+  animation: showMe 0.75s;
+  animation-iteration-count: 1;
+  position: relative;
+}
+
+.profile_Container .groupChat {
+  left: 0px;
+  margin-top: 110px;
+  margin-bottom: 10px;
+  position: relative;
+  border-bottom: 1px solid var(--border_color);
+}
+
+.profile_Container .groupChat div {
+  padding-left: 15px;
+}
+.profile_header_text{
+  font-size:18px;
+  margin-left:15px;
+
+}
+
+.profile_Container .groupChat div span {
+  padding: 10px;
+  background: #00a884;
+  border-radius: 50px;
+}
+
+.profile-avatar img,
+.newCommunity input {
+  width: 200px;
+  height: 200px;
+  border-radius: 100px;
+}
+
+.newCommunity input {
+  border-radius: 55px !important;
+  background-color: rgba(84, 101, 111, 0.8) !important;
+  border: none !important;
+}
+
+.profile_Container .profile_name {
+  height: 100px;
+  /* background-color: var(--white); */
+  background-color: var(--primary-white);
+  padding: 0px 0px 0px 28px;
+  line-height: 0.1px;
+}
+
+.profile_name p {
+  color: var(--profile-name);
+  font-size: 14px;
+  position: relative;
+  top: 10px;
+  padding-top: 10px;
+}
+
+/* ATBBeHwyQE8vRCGfvgJjj24kqnxP3891D213 */
+
+.profile_name .user_input_text {
+  display: flex;
+  justify-content: space-between;
+}
+
+.profile_name div input {
+  border: none;
+  outline: none;
+  width: 100%;
+  background: none;
+  padding-top: 10px;
+  color: var(--black);
+  padding-right:15px
+}
+
+.profile_name div .emoji_Icon {
+  display: flex;
+  align-items: center;
+  position: relative;
+  top: 8px;
+  /* right: 25px; */
+}
+
+.profile_name div .edit_Icon {
+  position: relative;
+  /* right: 30px; */
+  top: 8px;
+}
+
+.profile_Container .profile_bio {
+  margin-left: 20px;
+  margin-right: 30px;
+  font-size: 14px;
+  line-height: 20px;
+  margin-top: 18px;
+  margin-bottom: 28px;
+  color: var(--chat-msg-text);
+}
+
+.profile_name div .userStatus_emoji {
+  display: flex;
+  position: relative;
+  top: 8px;
+  /* right: 50px; */
+}
+
+@keyframes showMe {
+  0% {
+    transform: scale(0, 0);
+  }
+
+  80% {
+    transform: scale(0, 0);
+  }
+
+  100% {
+    transform: scale(1, 1);
+  }
+}
+
+.profile_Container .profile_body {
+  position: relative;
+  overflow-y: auto;
+}
+
+.profile_name .inputField {
+  border-bottom: 2px solid lightgray;
+  border-color: var(--profile-color);
+}
+
+@keyframes show {
+  0% {
+    opacity: 0;
+    transform: translateY(-50px);
+  }
+
+  30% {
+    opacity: 0;
+    transform: translateY(-50px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0px);
+  }
+}
+
+.newCommunity {
+  margin-top: 30px;
+  display: flex;
+  justify-content: center;
+}
+
+.newCommunity img {
+  border-radius: 44px !important;
+}
+
+.chat_container{
+  padding-top: 160px;
+  height: calc(100vh);
+  overflow: scroll;
+}
+.profile__header__text{
+  margin-left: 2rem;
+  color:white
+}
+
+#allMessages{
+    padding: 0 15px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    flex: 1 1;
+    position: relative;
+}
+
+.no_result_text{
+  text-align: center;
+  padding: 4.5rem 3rem;
+  color: var(--black);
+}
+
+.profile_picture_uploader{
+  display: none
+}
+
+.profile_pic_container:hover .profile_picture_uploader{
+    display: flex;
+}
+
+.custom_padding_left{
+  padding-left: 1rem;
+}
+
+.custom_padding_bottom{
+  padding-bottom: 1rem;
+}
+
+.custom_padding_top{
+  padding-top: 1rem;
+}
+
+
+.input_maxlength_checker {
+  margin-bottom: 0;
+  top: 0 !important;
+  padding-top:  0 !important;
+  margin-right: 10px;
+}
+
+.input_maxlength_status_checker{
+  padding-top:  0 !important;
+  margin-right: 5px;
+}
+
+.danger__text{
+  color: var(--danger) !important;
+}
+
+@media (max-width: 420px) {
+    .chat_container{
+      height: calc(100vh - 60px);
+    }  
+}

package/src/view/component/ReplyChatMessage/ReplyChatMessage.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import styled from 'styled-components';
+import ImageComponent from '../../../components/ImageComponent';
+import { CLOSEICON, CLOSE_ICON } from '../../../utils/global';
+import { decodeChatBody } from '../../../lib/helpers';
+const ReplyChatMessageWrapper = styled.div`
+    background-color: var(--gray_color);
+    padding: 0.5rem 2rem 0 0;
+    position: absolute;
+    bottom: 68px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    .close_icon{
+        width: 15px;
+        height: 15px;
+    }
+`;
+const ReplyChatMessageTextWrapper = styled.div`
+    padding: 0.25rem 0.5rem;
+    margin-left: auto;
+    width: 93%;
+    border-left: 4px solid  var(--profile-color);
+    border-radius:7.5px;
+    background-color:var(--reply-pannel-background)
+`;
+const SenderName = styled.h6`
+    color: var(--profile-color);
+`;
+const SenderText = styled.p`
+    color: var(--black);
+    margin-bottom: 0;
+    word-break: break-all;
+`;
+const ReplyChatMessage = (props) => {
+    const { theme,  clickedMessageInfo, replyMessageCloseHandler, setReply, reply } = props;
+    return (
+    <ReplyChatMessageWrapper>
+        <ReplyChatMessageTextWrapper>
+            <SenderName>{reply?.data?.chat?.senderName}</SenderName>
+            <SenderText>{ decodeChatBody(reply?.data?.chat?.body)}</SenderText>
+        </ReplyChatMessageTextWrapper>
+        <ImageComponent  src={CLOSE_ICON}  onClick={()=>setReply({...reply , isreply:false, data:{}, showReplyMessage:false})} />
+    </ReplyChatMessageWrapper>
+    )
+}
+export default ReplyChatMessage;
+

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

@@ -0,0 +1,106 @@
+import React, { useState } from "react";
+import { BACKICON, CLOSE_ICON, SEARCH } from "../../../utils/global";
+import { ArrowContext } from "../Context";
+import "./styles.css";
+import ImageComponent from "../../../components/ImageComponent";
+
+function SearchBar(props) {
+  const [isArrowShow, setISArrowShow] = useState();
+  const initialValue = { search: "" };
+  const [formValue, setFormValue] = useState(initialValue);
+  const list = localStorage.getItem("index");
+  const contextType = ArrowContext;
+  const { userSearchEnteredData } = props;
+
+  const showHandler = () => {
+    setISArrowShow(false);
+    setFormValue({ ...formValue, search: "" });
+    {userSearchEnteredData && userSearchEnteredData(formValue)};
+  };
+
+  const changeHandler = (e) => {
+    const { name, value } = e.target;
+    setFormValue({ ...formValue, [name]: value });
+    setISArrowShow(true);
+    if (!e.target.value)  setISArrowShow(false);
+  };
+
+  return (
+    <>
+      <div
+        style={{ width: "100%" }}
+        className={
+          props?.messageSliderOpen
+            ? "sidebar-search msg-search d-flex"
+            : "sidebar-search d-flex"
+        }
+      >
+        <div className="searchBox">
+          <div className="sidebar_search-container">
+            {isArrowShow ? (
+             <span>
+             <ImageComponent
+               onClick={showHandler}
+               src={BACKICON}
+               className={
+                props?.theme ? "darkicons" : "lighticons"
+               }
+             />
+           </span>
+            ) : (
+              <span data-testid="search" data-icon="search" class="">
+              <ImageComponent
+                src={SEARCH}
+                className={
+                props?.theme ? "darkicons" : "lighticons"
+                }
+              />
+            </span>
+            )}
+          </div>
+          <input
+            className={
+              props?.searchShow ? "sidebar-input truncate contact-search" : "sidebar-input"
+            }
+            size="small"
+            name="search"
+            value={formValue?.search}
+            type="text"
+            placeholder={`${props?.searchShow ? "search......" : ""} ${
+              props?.messageSliderOpen ? "New Contacts" : ""
+            } ${
+              !props?.messageSliderOpen && !props?.searchShow
+                ? "Search a New Chat"
+                : ""
+            }  `}
+            onChange={(e) => {
+             {userSearchEnteredData &&  userSearchEnteredData(e.target.value)};
+              changeHandler(e);
+            }}
+          />
+           {isArrowShow ? (
+          <span data-testid="search" data-icon="search">
+              <ImageComponent
+               onClick={showHandler}
+                src={CLOSE_ICON}
+                className={
+                props?.theme ? "darkicons close_icon" : "lighticons close_icon" 
+                }
+              />
+            </span>
+           ):""}
+        </div>
+      </div>
+      <style jsx>{`
+      @media(max-width:48rem){
+       .sidebar-input{
+        width:100%
+       } 
+      }
+      `}
+      </style>
+    </>
+  );
+}
+
+export default SearchBar;

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

@@ -0,0 +1,53 @@
+.sidebar-search {
+  padding: 8px 10px;
+  max-height: 50px;
+  text-align: center;
+  background-color: var(--primary-white);
+  align-items: center;
+}
+
+.msg-search {
+  /* position: fixed;
+    z-index: 2; */
+}
+
+.sidebar-search .searchBox {
+  display: flex;
+  background-color:var(--gray_color);
+  flex: 1;
+  border-radius: 10px;
+  height: 35px;
+}
+.sidebar-search .searchBox .close_icon {
+padding:2px;
+vertical-align:-webkit-baseline-middle;
+
+
+}
+
+
+.sidebar_search-container svg {
+  color: #54656f;
+  margin-left: 12px;
+  margin-top: 6px;
+}
+
+.sidebar-input {
+  position: relative;
+  padding-left: 15px !important;
+  padding-right: 15px !important;
+  font-size: 15px;
+  border: none;
+  outline: none;
+  background: none;
+  width: 23vw;
+}
+
+.contact-search{
+  min-width: 92%;
+}
+
+.filterIcon {
+  margin-top: 15px;
+  margin-right:10px;
+}