isometrik-chat 0.1.0

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

@@ -0,0 +1,289 @@
+.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: 100%;
+    background-color:var(--primary-white);
+    overflow: auto;
+    height: 100vh;
+    right: 0px;
+    top: 0px
+}
+
+.contact_container .contact_header {
+    position: fixed;
+    padding:6px 12px;
+    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: 67px
+}
+
+
+
+.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);
+
+}
+
+
+.mediaContainer{
+    
+        max-width: 30vw;
+        background-color:var(--contact-profile-bg);
+        overflow: auto;
+        height: 100vh;
+        right: 0px;
+        top: 0px
+    
+}
+.mediaContainer .media_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%
+}
+
+.media_header p{
+   
+        color : var(--black)
+}
+
+/* .media_Container{
+    width: 30vw;
+} */
+
+ .media_header .keyboard{
+    color: var(--contact-media-text);
+    position: relative;
+    top: 20px;
+    left: 25px;
+}
+
+.css-heg063-MuiTabs-flexContainer{
+    justify-content: space-around !important;
+}
+
+.media_header{
+    background-color: var(--profile-header);
+}
+
+.MuiTabs-flexContainer {
+    background-color: var(--profile-header) !important;
+
+}
+
+.css-1h9z7r5-MuiButtonBase-root-MuiTab-root.Mui-selected{
+    color: var( --contact-media-text ) !important;
+}
+
+.css-1160xiw-MuiPaper-root-MuiDrawer-paper{
+    background-color: var(--primary-white) !important;
+}
+
+.MuiTab-textColorPrimary{
+    color: var(--contact-media-text ) !important;
+}
+
+.MuiBox-root {
+    background-color: var(--primary-white) !important;
+}
+.MuiTabs-indicator{
+    background-color: var(--sender_chatbg) !important;
+}
+
+.MuiPaper-root{
+box-shadow: none !important;
+}
+
+.profile_image{
+    cursor: pointer;
+}
+.user_unblock{
+    filter: invert(1);
+}

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

@@ -0,0 +1,3 @@
+import React from "react";
+
+export const ArrowContext = React.createContext();

package/src/view/component/DialogBox.js

@@ -0,0 +1,15 @@
+import React from "react";
+
+const DialogBox = (props) => {
+
+    const { dialogueBoxRef } = props;
+    return <dialog
+        ref={dialogueBoxRef}
+        style={{
+            width: '100%', height: '100%', maxHeight: '100%', maxWidth: '100%', backgroundColor: 'var(--white)', ...props.style
+        }}>
+        {props.children}
+    </dialog>;
+};
+
+export default DialogBox;

package/src/view/component/ImageCropper/ImageCropper.js

@@ -0,0 +1,128 @@
+import React, { useState, useRef } from "react";
+// Cropping Module
+import Cropper from "react-cropper";
+import "cropperjs/dist/cropper.css";
+import styled from "styled-components";
+import { MOBILE_MAX_WIDTH_LIMIT } from "../../../lib/constant";
+
+
+
+const ImageCropperWrapper = styled.div`
+    position: relative;
+`;
+
+
+
+var rotateDegree = 0;
+export default function ImageCropper(props) {
+    const { imageUrl, setCroppedImg } = props;
+	let cropperRef = useRef();
+
+	//rounded image
+	const getRoundedCanvas = (sourceCanvas) => {
+        try {
+            let canvas = document.createElement("canvas");
+            let context = canvas.getContext("2d");
+            let width = sourceCanvas.width;
+            let height = sourceCanvas.height;
+            canvas.width = width;
+            canvas.height = height;
+            context.imageSmoothingEnabled = true;
+            context.imageSmoothingQuality = "high";
+            context.drawImage(sourceCanvas, 0, 0, width, height);
+            context.globalCompositeOperation = "destination-in";
+            context.beginPath();
+            context.arc(
+                width / 2,
+                height / 2,
+                Math.min(width, height) / 2,
+                0,
+                2 * Math.PI,
+                true
+            );
+            context.fill();
+            return canvas;
+        } catch (error) {
+            console.error('error', error);
+        }
+	};
+
+	const handleRotate = () => {
+        try {
+            const imageElement = cropperRef?.current;
+            const cropper = imageElement?.cropper;
+            rotateDegree = rotateDegree >= 360 ? 0 : rotateDegree + 90;
+            cropper.rotateTo(rotateDegree);
+        } catch (error) {
+            console.error('error', error);
+        }
+	};
+
+	const onCrop = () => {
+        try {
+            const imageElement = cropperRef?.current;
+            const cropper = imageElement?.cropper;
+            const resultCrop = cropper.getCroppedCanvas({
+                maxWidth: 4096,
+                maxHeight: 4096,
+                fillColor: "#fff",
+                imageSmoothingEnabled: true,
+                imageSmoothingQuality: "high",
+            });
+            const result = props.cropRoundImg
+                ? getRoundedCanvas(resultCrop)
+                : resultCrop;
+            setCroppedImg(result && result.toDataURL("image/jpeg", 1.0));
+        } catch (error) {
+            console.error('error', error);
+        }
+		
+	};
+
+	return (
+		<ImageCropperWrapper>
+			<div className="CroppingDiv col-12 ">
+				<div className="row m-0 mb-3 d-flex justify-content-center align-items-center">
+					<div className="col-12 p-0">
+						<Cropper
+							style={{
+								maxHeight: 450,
+                                width: window.innerWidth < MOBILE_MAX_WIDTH_LIMIT && window.innerWidth ,
+							}}
+							aspectRatio={1/1 || NaN}
+							guides={false}
+							src={imageUrl}
+							ref={cropperRef}
+							viewMode={1}
+							dragMode="move"
+							cropBoxMovable={true}
+							crop={onCrop}
+							rotatable={true}
+							scalable={true}
+							checkOrientation={1}
+						/>
+					</div>
+				</div>
+			</div>
+
+			<style jsx>
+				{`
+
+					.CroppingDiv {
+						position: relative;
+					}
+					.CroppingDiv img {
+						display: block;
+						width: 100%;
+						height: 100%;
+						object-fit: contain;
+					}
+					
+					.cropper-view-box, .cropper-face {
+						border-radius: 50%;
+					}
+				`}
+			</style>
+		</ImageCropperWrapper>
+	);
+}

package/src/view/component/Loader/Loader.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { mobile } from '../../../utils/media';
+
+
+const LoaderContainer = styled.div`
+    width: ${props => props.width || '30vw'} ;
+    height: ${props => props.height || 'calc(100vh - 135px)'};
+    position: ${props => props.position || 'absolute'} ;
+    top: 135px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: var(--primary_white);
+    z-index: 999;
+
+    .loader {
+        border: 4px solid var(--black);
+        border-left-color: transparent;
+        width: 36px;
+        height: 36px;
+        border-radius: 50%;
+        animation: spin89345 1s linear infinite;
+    }
+
+    @keyframes spin89345 {
+        0% {
+        transform: rotate(0deg);
+        }
+
+        100% {
+        transform: rotate(360deg);
+        }
+    }
+
+    ${mobile(css`
+        width: ${props => props.width || '100vw'} ;
+    `)}
+`;
+
+const Loader = ({theme, width, height, maxHeight, maxWidth, position}) => {
+
+  return (
+    <>
+    <LoaderContainer width={width} height={height} maxHeight={maxHeight} maxWidth={maxWidth} theme={theme} position={position}>
+        <div className='loader' />
+    </LoaderContainer>
+    </>
+
+)}
+
+export default Loader;

package/src/view/component/Loader/UserPagingLoader.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const UserPagingLoaderWrapper = styled.div`
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 40px;
+    .loader {
+        width: 8px;
+        height: 15px;
+        border-radius: 4px;
+        display: block;
+        background-color: currentColor;
+        margin: 20px auto;
+        position: relative;
+        color: var(--black); 
+        animation: animloader 0.3s 0.3s linear infinite alternate;
+      }
+      
+      .loader::after,
+      .loader::before {
+        content: '';
+        width: 8px;
+        height: 15px;
+        border-radius: 4px;
+        background: currentColor;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        left: 20px;
+        animation: animloader 0.3s 0.45s linear infinite alternate;
+      }
+      
+      .loader::before {
+        left: -20px;
+        animation-delay: 0s;
+      }
+      
+      @keyframes animloader {
+        0% {
+          height: 20px;
+        }
+      
+        100% {
+          height: 4px;
+        }
+      }
+
+`;
+
+const UserPagingLoader = () => {
+    return (
+        <UserPagingLoaderWrapper>
+            <div className='loader'>
+            </div>
+        </UserPagingLoaderWrapper>
+    )
+}
+
+export default UserPagingLoader;