reza added NavbarDrawer,Leaflet,Suggests Bar, search bar

front
Reza_ashrafi 3 years ago
parent 50c5281e34
commit af0ac4d462
  1. 7
      package.json
  2. 3
      public/index.html
  3. BIN
      src/assets/icons/exit.png
  4. BIN
      src/assets/icons/home.png
  5. BIN
      src/assets/icons/marker-blue.png
  6. BIN
      src/assets/icons/marker-green.png
  7. BIN
      src/assets/images/chat.png
  8. 79
      src/views/Auth/Login/Code/Code.js
  9. 8
      src/views/Auth/Login/Login.js
  10. 7
      src/views/Auth/Login/Login.scss
  11. 15
      src/views/Auth/Logo/Logo.js
  12. 1
      src/views/Auth/Logo/Logo.scss
  13. 70
      src/views/Auth/loader/loader.js
  14. 89
      src/views/ChatRoom/Body/Body.js
  15. 27
      src/views/ChatRoom/Body/Body.scss
  16. 7
      src/views/ChatRoom/Body/ChatInputs/ChatInput.js
  17. 9
      src/views/ChatRoom/Body/ChatInputs/ChatInputs.scss
  18. 34
      src/views/ChatRoom/Body/ChatSuggest/ChatSuggest.js
  19. 66
      src/views/ChatRoom/Body/ChatSuggest/ChatSuggest.scss
  20. 57
      src/views/ChatRoom/Body/Message/DraggableMessage/DraggableMessage.js
  21. 0
      src/views/ChatRoom/Body/Message/DraggableMessage/DraggableMessage.scss
  22. 15
      src/views/ChatRoom/Body/Message/Message.js
  23. 2
      src/views/ChatRoom/Body/Message/Message2D/Message2D.js
  24. 53
      src/views/ChatRoom/Body/Message/Message2D/Message2D.scss
  25. 4
      src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.scss
  26. 57
      src/views/ChatRoom/Body/Message/RadioMessage/RadioMessage.js
  27. 0
      src/views/ChatRoom/Body/Message/RadioMessage/RadioMessage.scss
  28. 94
      src/views/ChatRoom/Body/Message/SliderMessage/SliderMessage.js
  29. 0
      src/views/ChatRoom/Body/Message/SliderMessage/SliderMessage.scss
  30. 9
      src/views/ChatRoom/ChatRoom.js
  31. 9
      src/views/ChatRoom/ChatRoom.scss
  32. 9
      src/views/ChatRoom/Header/Header.js
  33. 30
      src/views/ChatRoom/Header/Header.scss
  34. 6
      src/views/Home/Body/Body.scss
  35. 6
      src/views/Home/Body/ChatList/Chat/Chat.scss
  36. 104
      src/views/Home/Body/Location/Location.js
  37. 49
      src/views/Home/Body/Location/Location.scss
  38. 100
      src/views/Home/Header/Header.js
  39. 36
      src/views/Home/Header/Header.scss
  40. 68
      src/views/Home/Header/NavbarDrawer/NavbarDrawer.js
  41. 98
      src/views/Home/Header/NavbarDrawer/NavbarDrawer.scss
  42. 1
      src/views/Home/Home.scss
  43. 6
      src/views/Home/TabBar/TabBar.js
  44. 7
      src/views/Home/TabBar/TabBar.scss
  45. 2269
      yarn.lock

@ -8,19 +8,26 @@
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"array-move": "^3.0.1",
"audio-react-recorder": "^1.0.4",
"axios": "^0.21.1",
"bootstrap": "^4.6.0",
"leaflet": "^1.7.1",
"node-sass": "^5.0.0",
"react": "^17.0.2",
"react-audio-player": "^0.17.0",
"react-dom": "^17.0.2",
"react-elastic-carousel": "^0.11.5",
"react-leaflet": "^3.2.0",
"react-player": "^2.9.0",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"react-sortable-hoc": "^2.0.0",
"react-toastify": "^7.0.4",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.3.0",
"styled-components": "^5.3.0",
"web-vitals": "^1.0.1"
},
"scripts": {

@ -25,6 +25,9 @@
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin="" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

Binary file not shown.

After

Width:  |  Height:  |  Size: 642 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 686 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 MiB

@ -18,42 +18,49 @@ export default class Code extends Component {
})
}
changeValue = (name, value) => {
if (value.match("^[0-9]{1}$") !== null) {
changeValue = (e) => {
if (e.target.value.match("^[0-9]{1}$")) {
this.setState({
[name]: value,
[e.target.name]: e.target.value,
})
} else {
if(e.target.name === 'auth_code1'){
this.inputRef2.focus();
}else if(e.target.name === 'auth_code2'){
this.inputRef3.focus();
}else if(e.target.name === 'auth_code3'){
this.inputRef4.focus();
}else if(e.target.name === 'auth_code4'){
return;
}
} else{
return;
}
componentDidMount() {
this.inputRef1.focus();
}
componentDidUpdate() {
if (this.state.auth_code1) {
keyboardEvent = (e) => {
if (e.keyCode === 8) {
this.setState({
[e.target.name]: '',
});
if(e.target.name === 'auth_code1'){
return;
}else if(e.target.name === 'auth_code2'){
this.inputRef1.focus();
return;
}else if(e.target.name === 'auth_code3'){
this.inputRef2.focus();
}
if (this.state.auth_code2) {
return;
}else if(e.target.name === 'auth_code4'){
this.inputRef3.focus();
return;
}
if (this.state.auth_code3) {
this.inputRef4.focus();
}
}
onKeyDown = (e) => {
if (e.keyCode === 8) {
this.setState({
[e.target.name]: '',
})
}
componentDidMount() {
this.inputRef1.focus();
}
render() {
return(
<>
@ -65,43 +72,47 @@ export default class Code extends Component {
<input
name="auth_code1"
type="number"
onChange={(e) => this.changeValue(e.target.name, e.target.value)}
onChange={(e) => this.changeValue(e)}
maxLength="1"
ref={(input) => { this.inputRef1 = input }}
value={this.state.auth_code1}
onKeyDown={this.onKeyDown}
autoComplete="false"
value={this.state.auth_code1}
onKeyDown={e => this.keyboardEvent(e)}
/>
<input
name="auth_code2"
type="number"
onChange={(e) => this.changeValue(e.target.name, e.target.value)}
value={this.state.auth_code2}
onChange={(e) => this.changeValue(e)}
maxLength="1"
ref={(input) => { this.inputRef2 = input }}
onKeyDown={this.onKeyDown}
autoComplete="false"
value={this.state.auth_code2}
onKeyDown={e => this.keyboardEvent(e)}
/>
<input
name="auth_code3"
type="number"
onChange={(e) => this.changeValue(e.target.name, e.target.value)}
onChange={(e) => this.changeValue(e)}
maxLength="1"
ref={(input) => { this.inputRef3 = input }}
value={this.state.auth_code3}
onKeyDown={this.onKeyDown}
autoComplete="false"
value={this.state.auth_code3}
onKeyDown={e => this.keyboardEvent(e)}
/>
<input
name="auth_code4"
type="number"
onChange={(e) => this.changeValue(e.target.name, e.target.value)}
onChange={(e) => this.changeValue(e)}
maxLength="1"
ref={(input) => { this.inputRef4 = input }}
value={this.state.auth_code4}
onKeyDown={this.onKeyDown}
autoComplete="false"
value={this.state.auth_code4}
onKeyDown={e => this.keyboardEvent(e)}
/>
<div className="logo__footer d-flex align-self-center">
<h2 style={{fontFamily : 'IRANSansNumeralBold',marginRight : 10, color : "rgb(108, 72, 191)"}}>Eema</h2>
<h2 style={{fontSize :17, color : "rgb(108, 72, 191)"}}>Entertainments</h2>
</div>
</div>
</>
);

@ -16,6 +16,10 @@ export default class Login extends Component {
section : val,
})
}
componentDidMount() {
}
render() {
return(
<div className="login d-flex flex-column">
@ -27,6 +31,10 @@ export default class Login extends Component {
this.state.section === 1 ?
<Code setSection={this.setSection}/> : null
}
<div className="logo__footer d-flex align-self-center">
<h2 style={{fontFamily : 'IRANSansNumeralBold',marginRight : 10, color : "rgb(108, 72, 191)"}}>Eema</h2>
<h2 style={{fontSize :17, color : "rgb(108, 72, 191)"}}>Entertainments</h2>
</div>
</div>
);
}

@ -62,7 +62,7 @@
text-align: left;
direction :ltr;
font-size: 25px;
color: white;
color: rgb(102, 102, 102);
&:focus{
outline : none;
}
@ -72,7 +72,7 @@
left : 65px;
top :4px;
font-size: 25px;
color : rgb(113, 88, 177);
color : rgb(102, 102, 102);
}
}
&-code__bottom{
@ -81,7 +81,7 @@
left: 0px;
width : 100%;
height : 50%;
background-color: white;
background-color: rgb(233, 233, 233);
border-top-left-radius: 40px;
border-top-right-radius: 40px;
justify-content: center;
@ -97,6 +97,7 @@
direction : ltr;
font-size: 24px;
color : rgb(101, 61, 196);
background-color: rgb(233, 233, 233);
&:focus{
outline : none;
}

@ -1,4 +1,6 @@
import React, { Component } from 'react';
import Loader from '../loader/loader';
import logo from '../../../assets/icons/logo.svg';
@ -7,7 +9,7 @@ export default class Logo extends Component {
componentDidMount() {
setTimeout(() =>{
this.props.setPage('bio');
},2000);
},1200);
}
render() {
return(
@ -18,9 +20,14 @@ export default class Logo extends Component {
<span></span>
<h1 style={{fontSize :20}}>داستانبازی</h1>
</div>
<div className="logo__footer d-flex">
<h2 style={{fontFamily : 'IRANSansNumeralBold',marginRight : 10}}>Eema</h2>
<h2 style={{fontSize :17}}>Entertainments</h2>
<div className="logo__footer d-flex flex-column align-items-center">
<div className="mb-4">
<Loader />
</div>
<div className="d-flex">
<h2 style={{fontFamily : 'IRANSansNumeralBold',marginRight : 10,color: "white"}}>Eema</h2>
<h2 style={{fontSize :17,color: "white"}}>Entertainments</h2>
</div>
</div>
</div>
);

@ -31,7 +31,6 @@
bottom: 55px;
& h2{
font-size: 16px;
color: white;
}
}
}

@ -0,0 +1,70 @@
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import CircularProgress from '@material-ui/core/CircularProgress';
// Inspired by the former Facebook spinners.
const useStylesFacebook = makeStyles((theme) => ({
root: {
position: 'relative',
top: '2px',
right: '2px',
marginLeft: '6px',
},
bottom: {
color: theme.palette.grey[theme.palette.type === 'light' ? 200 : 700],
},
top: {
color: '#1ED81E',
animationDuration: '550ms',
position: 'absolute',
left: 0,
},
circle: {
strokeLinecap: 'round',
},
}));
function FacebookCircularProgress(props) {
const classes = useStylesFacebook();
return (
<div className={classes.root}>
<CircularProgress
variant="determinate"
className={classes.bottom}
size={34}
thickness={4}
{...props}
value={100}
/>
<CircularProgress
variant="indeterminate"
disableShrink
className={classes.top}
classes={{
circle: classes.circle,
}}
size={34}
thickness={4}
{...props}
/>
</div>
);
}
const useStyles = makeStyles({
root: {
// flexGrow: 1,
},
});
export default function CustomizedProgressBars() {
const classes = useStyles();
return (
<div className={classes.root}>
<FacebookCircularProgress />
</div>
);
}

@ -1,6 +1,7 @@
import React, { Component } from 'react';
import Message from './Message/Message';
import ChatInputs from './ChatInputs/ChatInput';
import ChatSuggest from './ChatSuggest/ChatSuggest';
import { RecordState } from 'audio-react-recorder';
import ReactPlayer from 'react-player';
import ReactAudioPlayer from 'react-audio-player';
@ -154,6 +155,60 @@ export default class Body extends Component {
id: 'u2',
name: 'Lukas',
},
},{
id: 'm11',
type: 'draggable',
options: [
[{id : 0, name : 'پرسپولیس', position : 1}],
[{id : 1, name : 'سپاهان',position : 2}],
[{id : 2, name : 'استقلال',position : 3}]
],
text: ' موقعیت تیمهای زیر را در پایان مسابقات جدول لیگ برتر را پیش بینی کنید!',
voice: null,
image: null,
video : null,
music: null,
document : null,
createdAt: '2020-10-03T14:53:00.000Z',
user: {
id: 'u2',
name: 'Lukas',
},
},{
id: 'm12',
type: 'slider',
options: null,
text: 'معدل شما درآزمون دکتری',
voice: null,
image: null,
video : null,
music: null,
document : null,
createdAt: '2020-10-03T14:53:00.000Z',
user: {
id: 'u2',
name: 'Lukas',
},
},{
id: 'm13',
type: 'radio',
options: [
{id : 0, name: "مادرید"},
{id : 1, name : "میلان"},
{id : 2, name : "رم"},
{id : 3, name : "ونیز"},
],
text: 'پایتخت کشور ایتالیا؟',
voice: null,
image: null,
video : null,
music: null,
document : null,
createdAt: '2020-10-03T14:53:00.000Z',
user: {
id: 'u2',
name: 'Lukas',
},
}
]
},
@ -164,6 +219,13 @@ export default class Body extends Component {
video : null,
music: null,
document : null,
footer : 'normal',
suggest: [
{id : 0, text : 'سلام'},
{ id : 1, text: 'وقت بخیر'},
{ id : 2, text: 'لطفا بامن تماس بگیر'},
{ id : 3, text: 'متشکرم'},
]
}
}
@ -238,15 +300,18 @@ export default class Body extends Component {
}
sendMessage = () => {
console.log(1);
if(this.state.file !== null){
this.sendFile();
return
}else{
console.log(2);
let now = new Date();
this.setState(prevState => ({
data : {...prevState.data,messages : [...prevState.data.messages,
{
id: 'm8',
id: 'm12',
type : 'normal',
text: prevState.message,
voice : null,
image : null,
@ -276,6 +341,7 @@ export default class Body extends Component {
{
id: 'm9',
text: null,
type : 'normal',
voice : audioData,
createdAt: now.toString(),
image : null,
@ -303,6 +369,7 @@ export default class Body extends Component {
data : {...prevState.data,messages : [...prevState.data.messages,
{
id: 'm8',
type : 'normal',
text: prevState.message,
voice : null,
createdAt: now.toString(),
@ -328,6 +395,7 @@ export default class Body extends Component {
data : {...prevState.data,messages : [...prevState.data.messages,
{
id: 'm8',
type : 'normal',
text: prevState.message,
voice : null,
createdAt: now.toString(),
@ -354,6 +422,7 @@ export default class Body extends Component {
{
id: 'm8',
text: prevState.message,
type : 'normal',
voice : null,
createdAt: now.toString(),
image : null,
@ -380,7 +449,9 @@ export default class Body extends Component {
{
id: 'm8',
text: prevState.message,
type : 'normal',
voice : null,
type : 'normal',
createdAt: now.toString(),
image : null,
video : null,
@ -426,8 +497,13 @@ export default class Body extends Component {
render(){
const {setPage} = this.props;
return (
<div className="chat-body d-flex flex-column">
<div className="chat-room__status d-flex flex-column" onClick={() => setPage('info')}>
<h1>محسن محمدی</h1>
<p>2 دقیقه پیش آنلاین بوده</p>
</div>
<div className="chat-body__content d-flex flex-column" id="chatroom"
style={{
overflowY : this.state.file !== null ? 'hidden' : 'scroll',
@ -474,6 +550,8 @@ export default class Body extends Component {
</div>
<div className="chat-body__footer d-flex">
{
this.state.footer === 'normal'?
<ChatInputs
onStop={this.onStop}
stop={this.stop}
@ -485,7 +563,14 @@ export default class Body extends Component {
sendMessage={this.sendMessage}
addFile={this.addFile}
file={this.state.file}
/>
/> : null
}
{
this.state.footer === 'suggest' ?
<ChatSuggest
suggest={this.state.suggest}
/> : null
}
</div>
</div>
);

@ -1,18 +1,22 @@
@media screen and (max-width: 450px){
.chat-body{
background-color: rgb(210, 196, 214);
background: url(../../../assets/icons/chat.png);
background-size: cover;
justify-content:flex-start;
flex : 1;
max-height: calc(100vh - 150px);
height : 100%;
border-top-left-radius: 40px;
border-top-right-radius: 40px;
&__content{
padding : 0px 20px 40px;
height : calc(100vh - 268px);
background: url(../../../assets/images/chat.png);
background-size: cover;
padding : 0px 10px 70px;
height : 100%;
min-height: 200px;
position: relative;
border-top-left-radius: 40px;
border-top-right-radius: 40px;
position: relative;
top : -75px;
&--preview{
position: absolute;
bottom: 0px;
@ -22,6 +26,7 @@
justify-content:center;
align-items:center;
background-color: rgb(210, 196, 214);
z-index: 1000;
& img{
width: 100%;
max-height : 400px;
@ -71,12 +76,16 @@
}
&__footer{
width: 100%;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
z-index: 200;
z-index: 1000;
background-color: rgb(210, 196, 214);
background: url(../../../assets/icons/chat.png);
background: url(../../../assets/images/chat.png);
background-size: cover;
overflow-y: scroll;
position: fixed;
bottom: 0px;
left: 0;
padding-top: 5px;
padding-bottom: 5px;
}
}
}

@ -24,14 +24,17 @@ export default class ChatInputs extends Component {
controls
/> : null
} */}
{
recordState !== 'start' ?
<div className="chat-inputs__box d-flex">
<div className="chat-inputs__box--file">
<input type="file" onChange={(e) => addFile(e)}/>
<AttachmentIcon style={{color : "white", marginRight : 10, width : 30, height: 30, zIndex : 10,position : "absolute", top: 0, left: 0}} />
<AttachmentIcon style={{color : "white", marginRight : 10, width : 30, height: 30, zIndex : 10,position : "absolute", top: -4, left: 0}} />
</div>
{/* <input type="text" placeholder="یک پیام بنویسید..." multiline /> */}
<TextField id="standard-textarea" label="" value={message} placeholder="یک پیام بنویسید..." rowsMax={4} onChange={(e) => typeText(e)} multiline />
</div>
: null
}
<div className="chat-inputs__voice d-flex">
<div className="chat-inputs__voice d-flex">
{

@ -3,10 +3,11 @@
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;
width: 100%;
padding : 2px 15px 70px;
padding : 2px 5px 0px;
align-items : flex-end;
justify-content : flex-end;
&__box{
flex: 1;
width: 100%;
border-radius: 30px;
background: rgb(18,15,153);
background: linear-gradient(90deg, rgba(18,15,153,1) 0%, rgba(105,9,121,1) 60%);
@ -58,8 +59,8 @@
}
&__voice{
&--icon{
width: 45px;
height: 45px;
width: 50px;
height: 50px;
border-radius: 30px;
justify-content:center;
align-items:center;

@ -0,0 +1,34 @@
import React, { Component } from 'react';
import Carousel from 'react-elastic-carousel';
import './ChatSuggest.scss';
export default class ChatSuggest extends Component {
render(){
const {suggest} = this.props;
return (
<div className="chat-suggest portrait-slider d-flex flex-column">
<Carousel itemsToShow={1} isRTL={true} enableTilt={true} showArrows={false}>
{
suggest.map(item => (
<Suggest item={item} key={item.id} />
))
}
</Carousel>
</div>
);
}
}
class Suggest extends Component {
render(){
const {item} = this.props;
return(
<div className="chat-suggest__item d-flex">
{item.text}
</div>
);
}
}

@ -0,0 +1,66 @@
@media screen and (max-width: 450px){
.chat-suggest{
// border-bottom-right-radius: 40px;
// border-bottom-left-radius: 40px;
width : 100%;
// height : 40px;
padding : 2px 0px 0px;
align-items : flex-end;
&__item{
padding : 8px 6px;
background-color : rgb(13, 214, 20);
border-radius: 5px;
margin : 5px;
width :100% !important;
justify-content : center;
color : white;
}
}
}
.portrait-slider{
width : 100% !important;
height: 100% !important;
position: relative;
padding : 20px 12px 0px;
margin-bottom: 10px;
justify-content: center !important;
}
.rec-dot_active{
background-color: white !important;
color: white !important;
// box-shadow: 0 0 1px rgba(255, 255, 255, 1) !important;
}
.Carousel-button-10{
background-color: white !important;
}
.rec-pagination{
z-index: 600;
position: absolute;
top: -12px !important;
// left: calc(50% - 20px) !important;
& button{
background-color: grey;
margin : 2px !important;
box-shadow: 0px 0px 0px rgba(255,255,255,1);
}
}
// .guuruq{
// box-shadow: 0 1px 2px rgba(0, 0, 0, 0%);
// }
// .cJeRRR{
// background-color: white !important;
// }
// .cJeRRR:hover, .cJeRRR:focus{
// cursor: pointer;
// box-shadow: 0px 0px 0px rgba(255,255,255,1) !important;
// background-color: white !important;
// }

@ -0,0 +1,57 @@
import React, {Component} from 'react';
import {SortableContainer, SortableElement} from 'react-sortable-hoc';
import arrayMove from 'array-move';
import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt';
const SortableItem = SortableElement(({value}) => <div className="message-2d__options--draggable d-flex">{value}</div>);
const SortableList = SortableContainer(({items}) => {
return (
<div className="message-2d__options d-flex flex-column">
{items.map((value, index) => (
<SortableItem key={`item-${value}`} index={index} value={value} />
))}
</div>
);
});
export default class DraggableMessage extends Component {
state = {
items: ['استقلال', 'پرسپولیس', 'سپاهان'],
};
onSortEnd = ({oldIndex, newIndex}) => {
this.setState(({items}) => ({
items: arrayMove(items, oldIndex, newIndex),
}));
};
render() {
const {message, user1, user2} = this.props;
return (
<div
className="message-2d d-flex flex-column d-flex"
style={{
marginRight: message.user.id === user1.id ? 0 : 40,
marginLeft: message.user.id === user1.id ? 40 : 0,
}}
>
<img
src={message.user.id === user1.id ? user1.imageUri : user2.imageUri}
style={{alignSelf: message.user.id === user1.id ? "flex-end" : "flex-start" }}
alt={message.id}
/>
<div
className='message-2d__text d-flex'
>
{
message.text !== null ?
<p id="3" style={{color: message.user.id === user1.id ? "white" : "black" }}>{message.text}</p> : null
}
</div>
<SortableList items={this.state.items} onSortEnd={this.onSortEnd} />
<button className="message-2d__submit">ثبت<ArrowRightAltIcon style={{color : "white" , width : 32, height : 32, marginLeft: 10}} /></button>
</div>
);
}
}

@ -2,6 +2,9 @@ import React, { Component } from 'react';
import NormalMessage from './NormalMessage/NormalMessage';
import Message2D from './Message2D/Message2D';
import DraggableMessage from './DraggableMessage/DraggableMessage';
import SliderMessage from './SliderMessage/SliderMessage.js';
import RadioMessage from './RadioMessage/RadioMessage.js';
export default class Message extends Component {
@ -18,6 +21,18 @@ export default class Message extends Component {
message.type === '2d' ?
<Message2D message={message} user1={user1} user2={user2} /> : null
}
{
message.type === 'draggable' ?
<DraggableMessage message={message} user1={user1} user2={user2} /> : null
}
{
message.type === 'slider' ?
<SliderMessage message={message} user1={user1} user2={user2} /> : null
}
{
message.type === 'radio' ?
<RadioMessage message={message} user1={user1} user2={user2} /> : null
}
</>
);
}

@ -35,7 +35,7 @@ export default class Message2D extends Component {
{
option.map(
item => (
<div className="d-flex" style={{ width : `calc(100% / ${option.length} )`}}>
<div className="d-flex" style={{ width : `calc(100% / ${option.length} )`}} draggable={true}>
<span>{item.name}</span>
</div>
)

@ -20,6 +20,8 @@
border-radius: 5px;
position: relative;
margin-bottom: 5px;
text-align: right;
direction: rtl;
p{
width: 100%;
text-align: right;
@ -30,17 +32,17 @@
}
&__options{
width: 100%;
z-index: 1000;
z-index: 400;
&--row{
width: 100%;
justify-content: space-around;
div{
background-color: white;
background-color: rgba(153, 153, 153, 0.87);
border-radius: 10px;
justify-content: center;
align-items: center;
margin : 5px 3px;
padding : 10px;
margin : 2px 3px;
padding : 6px;
span{
font-size: 16px;
color : black;
@ -48,7 +50,50 @@
}
}
}
&--radio{
width : calc(50% - 6px);
margin : 3px;
padding : 10px;
text-align: center;
font-size: 16px;
color : black;
font-weight: 600;
border-radius: 5px;
}
&--draggable{
background-color: rgba(153, 153, 153, 0.87);
border-radius: 10px;
justify-content: center;
align-items: center;
margin : 2px 3px;
padding : 6px;
font-size: 16px;
color : black;
font-weight: 600;
position: relative;
}
}
& button{
background: rgb(176, 73, 186);
background: linear-gradient(180deg,rgb(163, 73, 186) 0%, rgb(108, 72, 191) 52%);
width : 100%;
margin : 3px auto 0px;
border : none;
padding : 5px 0px;
font-size: 18px;
border-radius: 10px;
color : white;
}
}
}
.MuiGrid-container{
display: flex !important;
width:100% !important;
margin : 0px !important;
background-color: rgba(153, 153, 153, 0.87);
justify-content : center !important;
align-items : center !important;
border-radius: 10px;
}

@ -47,7 +47,7 @@
position: static;
}
& video{
height: 100%;
height: 180px !important;
width: 100%;
}
& p{
@ -58,7 +58,7 @@
// }
}
&--file{
background-color: rgb(210, 196, 214) !important;
background-color: inherit !important;
}
&--document{
width: 100%;

@ -0,0 +1,57 @@
import React, {Component} from 'react';
import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt';
export default class RadioMessage extends Component {
constructor(props) {
super(props);
this.state = {
value : null,
}
}
handleRadioChange = (newValue) => {
this.setState({
value: newValue
});
};
render() {
const {message, user1, user2} = this.props;
return (
<div
className="message-2d d-flex flex-column d-flex"
style={{
marginRight: message.user.id === user1.id ? 0 : 40,
marginLeft: message.user.id === user1.id ? 40 : 0,
}}
>
<img
src={message.user.id === user1.id ? user1.imageUri : user2.imageUri}
style={{alignSelf: message.user.id === user1.id ? "flex-end" : "flex-start" }}
alt={message.id}
/>
<div
className='message-2d__text d-flex'
>
{
message.text !== null ?
<p id="3" style={{color: message.user.id === user1.id ? "white" : "black" }}>{message.text}</p> : null
}
</div>
<div className="message-2d__options d-flex flex-wrap justify-content-center">
{
message.options.map(item => (
<div key={item.id} onClick={() => this.handleRadioChange(item.name)} className="message-2d__options--radio" style={{backgroundColor : item.name === this.state.value ? '#0000cc' : 'rgba(153, 153, 153, 0.87)',color : item.name === this.state.value ? 'white' : 'black'}}>
{item.name}
</div>
))
}
</div>
<button className="message-2d__submit">ثبت<ArrowRightAltIcon style={{color : "white" , width : 32, height : 32, marginLeft: 10}} /></button>
</div>
);
}
}

@ -0,0 +1,94 @@
import React, {Component} from 'react';
import Grid from '@material-ui/core/Grid';
import Slider from '@material-ui/core/Slider';
import Input from '@material-ui/core/Input';
import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt';
export default class SliderMessage extends Component {
constructor(props) {
super(props);
this.state = {
value : 10,
}
}
handleSliderChange = (event,newValue) => {
this.setState({
value: newValue
});
};
handleInputChange = (event) => {
this.setState({
value : event.target.value === '' ? '' : Number(event.target.value)
});
};
handleBlur = () => {
if (this.state.value < 0) {
this.setState({ value: 0});
} else if (this.state.value > 20) {
this.setState({ value: 20});
}
};
render() {
const {message, user1, user2} = this.props;
return (
<div
className="message-2d d-flex flex-column d-flex"
style={{
marginRight: message.user.id === user1.id ? 0 : 40,
marginLeft: message.user.id === user1.id ? 40 : 0,
}}
>
<img
src={message.user.id === user1.id ? user1.imageUri : user2.imageUri}
style={{alignSelf: message.user.id === user1.id ? "flex-end" : "flex-start" }}
alt={message.id}
/>
<div
className='message-2d__text d-flex'
>
{
message.text !== null ?
<p id="3" style={{color: message.user.id === user1.id ? "white" : "black" }}>{message.text}</p> : null
}
</div>
<Grid container spacing={2} alignItems="center">
<Grid item xs>
<Slider
value={typeof this.state.value === 'number' ? this.state.value : 0}
onChange={this.handleSliderChange}
aria-labelledby="input-slider"
style={{marginTop:10}}
min={0}
max={20}
step={0.1}
/>
</Grid>
<Grid item>
<Input
value={this.state.value}
margin="dense"
onChange={(e) => this.handleInputChange(e)}
onBlur={() => this.handleBlur()}
inputProps={{
step: 0.1,
min: 0,
max: 20,
type: 'number',
'aria-labelledby': 'input-slider',
}}
style={{width : 42, borderBottom : '2px solid #000099', paddingLeft :10,marginBottom :18, color : '#000099'}}
/>
</Grid>
</Grid>
<button className="message-2d__submit">ثبت<ArrowRightAltIcon style={{color : "white" , width : 32, height : 32, marginLeft: 10}} /></button>
</div>
);
}
}

@ -20,22 +20,17 @@ export default class ChatRoom extends Component {
}
render(){
return (
<div className="chat-room d-flex flex-column" style={{borderBottomRightRadius : this.state.page === 'info' ? '0px' : '40px', borderBottomLeftRadius : this.state.page === 'info' ? '0px' : '40px'}}>
<div className="chat-room d-flex flex-column">
<Header page={this.state.page} setPage={this.setPage} />
{
this.state.page === 'chatroom' ?
<>
<div className="chat-room__status d-flex flex-column" onClick={() => this.setPage('info')}>
<h1>محسن محمدی</h1>
<p>2 دقیقه پیش آنلاین بوده</p>
</div>
<Body />
<Body setPage={this.setPage}/>
</> :
<>
<ChatInfo />
</>
}
</div>
);
}

@ -3,7 +3,6 @@
flex : 1;
background: rgb(139, 73, 186);
background: linear-gradient(180deg, rgb(144, 73, 186) 0%, rgb(111,108,255) 22%);
border-radius: 40px;
height: 100vh;
overflow-y: hidden;
width: 100vw;
@ -11,13 +10,13 @@
&__status{
border-top-left-radius: 40px;
border-top-right-radius: 40px;
height: 70px;
height: 140px;
background : rgb(106, 103, 250);
position: relative;
align-items: center;
justify-content:center;
justify-content:flex-start;
h1{
font-size: 21px;
font-size: 18px;
margin: 0;
letter-spacing:-1px;
font-family: IRANSansNumeralLight;
@ -25,7 +24,7 @@
font-weight: 100;
}
p{
font-size: 14px;
font-size: 12px;
color: white;
margin : 0px;
}

@ -10,9 +10,14 @@ export default class Header extends Component {
render(){
const {page, setPage} = this.props;
return (
<div className="header d-flex">
<div className="chat-header d-flex">
<div onClick={() => page === 'chatroom' ? this.back() : setPage('chatroom')}>
<ArrowBackIosIcon style={{color : "white" , width : 32, height : 32}} />
<ArrowBackIosIcon style={{color : "white" , width : 32, height : 32,marginTop:4}} />
</div>
<div className="chat-header__title d-flex">
<h1 style={{fontFamily : 'IRANSansNumeralBold'}}>ایما</h1>
<span></span>
<h1 style={{fontSize :17}}>داستانبازی</h1>
</div>
<MoreVertIcon style={{color : "white" , width : 38, height : 38}} />
</div>

@ -1,11 +1,31 @@
@media screen and (max-width: 450px){
.header{
border-top-right-radius: 40px;
border-top-left-radius: 40px;
height: 80px;
.chat-header{
height: 70px;
width: 100%;
justify-content : space-between;
align-items: flex-start;
padding : 30px 22px 0px;
padding : 10px 18px 10px;
position: relative;
&__title{
direction:rtl;
position: absolute;
right: 10px;
margin-top: 8px;
align-items:center;
right: 60px;
& h1{
font-size: 23px;
color: white;
}
& span{
margin : 0px 5px;
width: 2px;
height:22px;
background-color:white;
position: relative;
bottom: 5px;
font-size: 18px;
}
}
}
}

@ -1,10 +1,12 @@
@media screen and (max-width: 450px){
.body{
background-color: rgb(255, 255, 255);
background-color: rgb(228, 227, 227);
flex : 1;
border-radius: 40px;
border-top-right-radius: 40px;
border-top-left-radius: 40px;
z-index: 10;
overflow-y : scroll;
border : 5px solid white;
}
}

@ -5,7 +5,7 @@
align-items:center;
margin-bottom: 20px;
position: relative;
border-bottom : 1px solid rgb(45, 173, 242);
border-bottom : 2px solid rgb(255, 255, 255);
padding : 0px 0px 20px;
img {
width: 70px;
@ -22,6 +22,7 @@
h1{
font-size: 15px;
margin: 0;
font-weight: 600;
}
p{
font-size: 12px;
@ -29,7 +30,7 @@
max-width: calc(100vw - 100px);
}
span{
background-color: blue;
background-color: rgb(139, 73, 186);
width: 20px;
height: 20px;
display: flex;
@ -37,6 +38,7 @@
align-items:center;
border-radius: 13px;
position: absolute;
padding-top: 1px;
left : 20px;
top : 37px;
color: white;

@ -1,12 +1,114 @@
import React, { Component } from 'react';
import { MapContainer, TileLayer, Marker, Popup, Tooltip,Circle } from "react-leaflet";
import L from 'leaflet';
import NavigationIcon from '@material-ui/icons/Navigation';
import DirectionsWalkIcon from '@material-ui/icons/DirectionsWalk';
import MyLocationIcon from '@material-ui/icons/MyLocation';
import blueM from '../../../../assets/icons/marker-blue.png';
import greenM from '../../../../assets/icons/marker-green.png';
import './Location.scss';
const items = [{lat :35.73366050852552, lng : 51.414611756817976}];
const selected = {};
const green = new L.Icon({
iconUrl: greenM,
iconRetinaUrl: greenM,
popupAnchor: [-0, -0],
iconSize: [25,38],
});
const blue = new L.Icon({
iconUrl: blueM,
iconRetinaUrl: blueM,
popupAnchor: [-0, -0],
iconSize: [25,38],
});
export default class Location extends Component {
state = {};
render(){
return (
<div className="location d-flex">
<div className="location" style={{display: 'block !important' , height:"100%", }}>
<MapContainer
whenCreated={(map) =>{
this.map=map;
map.locate({setView:true})
map.on('locationfound',(e)=>{
this.setState({lat:e.latitude,lng:e.longitude,accuracy:e.accuracy})
})
} }
ref={this.myRef}
center={[35.73366050852552, 51.414611756817976]}
zoom={14}
scrollWheelZoom={true}
style={{ height: "100%", direction: "ltr" }}
>
{/* <LocateControlC > </LocateControlC> */}
{/* {this.state.c ? <LocateControl options={locateOptions} startDirectly/>:null} */}
<TileLayer
attribution=""
url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png"
// https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
/>
<Marker position={[35.73366050852552, 51.414611756817976]}
icon={blue}
eventHandlers={{
// click: () => {
// this.seter("value",e.id)
// },
}}
onClick={e=>console.log("sss")}>
<Tooltip direction="top" opacity={1} >
{'map'}
</Tooltip>
</Marker>
{/* {
items.map((e) => (
<Marker position={[e.lat, e.lon]}
icon={selected && e.id==selected.id?green:blue}
eventHandlers={{
click: () => {
this.seter("value",e.id)
},
}}
onClick={e=>console.log("sss")}>
<Tooltip direction="top" opacity={1} >
{e.name}
</Tooltip>
</Marker>
))} */}
{this.state.lat && this.state.lng && <>
<Circle center={[this.state.lat, this.state.lng]} pathOptions={{ fillColor: 'blue' }} radius={this.state.accuracy} />
<Marker position={[this.state.lat, this.state.lng]}
icon={blue}
eventHandlers={{
// click: () => {
// this.seter("value",e.id)
// },
}}
onClick={e=>console.log("sss")}>
<Tooltip direction="top" opacity={1} >
{'map'}
</Tooltip>
</Marker>
</>
}
</MapContainer>
<div className="location__footer d-flex flex-row-reverse">
<div className="location__footer--icon">
<NavigationIcon style={{color : "white" , width : 35, height : 35}} />
</div>
<span>10 کیلومتر</span>
<div className="location__footer--time d-flex flex-row-reverse align-items-center">
<div>10 دقیقه</div>
<DirectionsWalkIcon style={{color : "white" , width : 30, height : 30, marginRight :5,marginLeft :10}} />
</div>
</div>
<div className="location__current d-flex justify-content-center align-items-center">
<MyLocationIcon style={{color : "white" , width : 35, height : 35}} />
</div>
</div>
);
}

@ -0,0 +1,49 @@
@media screen and (max-width: 450px){
.location{
width: 100%;
height: 100%;
// filter : hue-rotate(360deg);
position: relative;
&__footer{
position: fixed;
bottom: 10px;
left: 5px;
width: calc(100% - 10px);
border-radius: 40px;
background: linear-gradient(90deg, rgb(102, 99, 245) 20%, rgb(186, 85, 204) 140%);
height: 66px;
align-items: center;
padding : 0px 7px;
justify-content: space-between;
color: white;
z-index: 1000;
&--icon{
padding : 10px;
background-color: rgb(102, 33, 170);
border-radius: 100px;
}
&--time{
font-size: 18px;
div{
direction: rtl;
}
}
span{
position: relative;
right:15px;
direction: rtl;
font-size: 20px;
}
}
&__current{
position: fixed;
bottom: 84px;
width: 70px;
right: 5px;
background : rgb(220, 220, 220);
height:70px;
border-radius: 100px;
z-index: 1000;
}
}
}

@ -1,15 +1,105 @@
import React, { Component } from 'react';
import React, { Component,useEffect,useState,useRef } from 'react';
import MenuIcon from '@material-ui/icons/Menu';
import SearchIcon from '@material-ui/icons/Search';
import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt';
import { makeStyles } from '@material-ui/core/styles';
import { SwipeableDrawer } from '@material-ui/core';
import NavbarDrawer from './NavbarDrawer/NavbarDrawer.js';
import clsx from 'clsx';
import './Header.scss';
export default class Header extends Component {
render(){
const useStyles = makeStyles({
list: {
width: window.innerWidth * 0.8,
},
fullList: {
width: 'auto',
direction: 'rtl',
textAlign: 'right'
},
});
export default function Header(props) {
const classes = useStyles();
const [state, setState] = useState({
top: false,
left: false,
bottom: false,
right: false,
searchFlag : false,
});
const inputRef5 = useRef();
useEffect(() =>{
if(state['searchFlag'] === true){
inputRef5.current.focus();
}
});
const list = (props, anchor) => (
<div
className={clsx(classes.list, {
[classes.fullList]: anchor === 'top' || anchor === 'bottom',
})}
role="presentation"
onClick={toggleDrawer(anchor, false)}
onKeyDown={toggleDrawer(anchor, false)}
>
<NavbarDrawer setShare={props.setShare} user={props.user} logout={props.logout} needUpdate={props.needUpdate} />
</div>
);
const toggleDrawer = (anchor, open) => (event) => {
if (event && event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
return;
}
setState({ [anchor]: open });
};
return (
<div className="header d-flex">
{
state['searchFlag'] === true ?
<div className="header__search d-flex">
<div onClick={() => setState({ ...state, ['searchFlag']: !state['searchFlag']})}>
<ArrowRightAltIcon style={{color : "rgb(111,108,255)" , width : 38, height : 38}} />
</div>
<input
type="search"
ref={inputRef5}
placeholder="بنویس ..."
/>
</div> :
<>
<div onClick={() => setState({ ...state, ['searchFlag']: !state['searchFlag']})}>
<SearchIcon style={{color : "white" , width : 38, height : 38}} />
<MenuIcon style={{color : "white" , width : 38, height : 38}} />
</div>
);
<div className="chat-header__title d-flex">
<h1 style={{fontFamily : 'IRANSansNumeralBold'}}>ایما</h1>
<span style={{position : "relative", top : -3}}></span>
<h1 style={{fontSize :17,position : "relative", top : 2}}>داستانبازی</h1>
</div>
<div onClick={toggleDrawer('right', true)}>
<MenuIcon style={{color : "white" , width : 38, height : 38,position : "relative", top : 0}} />
</div>
<SwipeableDrawer
anchor='right'
open={state['right']}
onClose={toggleDrawer('right', false)}
onOpen={toggleDrawer('right', true)}
>
{list(props,'right')}
</SwipeableDrawer>
</>
}
</div>
);
}

@ -1,11 +1,39 @@
@media screen and (max-width: 450px){
.header{
border-top-right-radius: 40px;
border-top-left-radius: 40px;
height: 70px;
height: 60px;
width: 100%;
justify-content : space-between;
align-items: flex-end;
align-items: center;
padding : 0px 15px;
position: relative;
&__search{
width: 100vw;
background-color: rgb(255, 255, 255);
direction : rtl;
align-items : center;
position: fixed;
top : 0px;
left : 0px;
height : 60px;
z-index: 550;
input{
width: 100%;
position: relative;
padding : 8px 10px 8px 10px;
border : 0px;
border-radius: 2px;
color : black;
font-size: 18px;
text-align: right;
background-color: inherit;
&:focus{
outline:none;
}
&::placeholder{
color: grey;
font-size: 16px;
}
}
}
}
}

@ -0,0 +1,68 @@
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import {toast} from 'react-toastify';
import HomeIcon from '@material-ui/icons/Home';
import CloseIcon from '@material-ui/icons/Close';
// import {connect} from 'react-redux';
import './NavbarDrawer.scss';
import home from '../../../../assets/icons/home.png';
import exit from '../../../../assets/icons/exit.png';
class NavbarDrawer extends Component {
constructor(props) {
super(props);
this.state = {
links: [
{
name: 'صفحه اصلی',
link: '/',
icon: <HomeIcon style={{color : "white" , width : 35, height : 35,marginLeft : 10}} />,
toast : '',
},
],
}
}
render() {
return (
<div className="navbar-drawer d-flex flex-column">
<div className="navbar-drawer__header d-flex">
<div className="navbar-drawer__header--right d-fex flex-column">
<h1>رضا</h1>
<div>منوی دسترسی سریع</div>
</div>
<CloseIcon style={{color : "white" , width : 40, height : 40}} />
</div>
<div className="navbar-drawer__bottom mt-1">
{
this.state.links.map(item => (
<Link to={item.link} key={item.name} onClick={item.onClick || (() => item.link === "" ? toast.error(item.toast) : null)}>
<div className="navbar-drawer__bottom--link d-flex">
{item.icon}
<div>{item.name}</div>
{item.badge && <div class="badge" >{item.badge}</div>}
</div>
</Link>
))
}
{/* <div className="navbar-drawer__bottom--version d-flex">
<span>نسخه نرمافزار 3.1</span>
</div> */}
</div>
</div>
);
}
}
// const mapStateToProps = state => ({
// status: state.user.status,
// });
// export default connect(mapStateToProps,{})(NavbarDrawer);
export default NavbarDrawer;

@ -0,0 +1,98 @@
.navbar-drawer{
// background: linear-gradient(180deg, rgb(144, 73, 186) 0%, rgb(111,108,255) 22%) !important;
text-align: right !important;
direction: rtl;
padding : 30px 10px 10px 10px;
&__header{
height: 80px;
width: 100%;
align-items: center;
justify-content: space-between;
padding : 0px 8px;
&--right{
& h1{
margin-bottom: 0px;
font-size: 24px;
color : white;
letter-spacing: -1px;
}
& div{
color : white;
font-size: 12px;
letter-spacing: -1px;
}
}
& img{
width : 22px;
height : 22px;
position: relative;
bottom :35px;
}
}
&__bottom{
width:100%;
&--link{
width:100%;
align-items: center;
padding : 15px 10px;
& img{
width: 20px;
height: 20px;
margin-left: 20px;
}
& .badge{
background-color: rgb(160, 60, 209);
margin:5px;
}
}
&--button{
width: 100%;
height: 100px;
color: white;
padding : 15px 10px;
cursor: pointer;
& img{
width: 20px;
height: 20px;
margin-left: 20px;
}
}
&--version{
position: absolute;
bottom : 5px;
left : 0px;
width :100%;
height : 32px;
font-size: 14px;
justify-content:center;
align-items:center;
& span{
color : #cfcfcf;
font-size: 14px;
}
}
}
}
.MuiPaper-root{
background: linear-gradient(180deg, rgb(144, 73, 186) 20%, rgb(111,108,255) 72%) !important;
&::-webkit-scrollbar{
display: none;
width: 0px;
}
}
.navbar-drawer__bottom a{
width: 100%;
height: 100px;
color : white;
}
.navbar-drawer__bottom--link
.navbar-drawer__bottom--link div{
font-size: 16px;
}

@ -3,7 +3,6 @@
flex : 1;
background: rgb(139, 73, 186);
background: linear-gradient(180deg, rgb(144, 73, 186) 0%, rgb(111,108,255) 22%);
border-radius: 40px;
height: 100vh;
box-shadow: 0px 0px 40px rgba(145, 145, 145, 0.8);
}

@ -10,7 +10,7 @@ export default class TabBar extends Component {
return (
<div className="tabBar d-flex">
<div className="tabBar__item d-flex flex-column" onClick={() => this.props.setTabBar('info')}>
<InfoIcon style={{color : this.props.tabBar === "info" ? "white" : "#afafaf" , width : 60, height : 60}} />
<InfoIcon style={{color : this.props.tabBar === "info" ? "white" : "#afafaf" , width : 40, height : 40}} />
{
this.props.tabBar === 'info' ?
<div className="tabBar__item--active">
@ -18,7 +18,7 @@ export default class TabBar extends Component {
}
</div>
<div className="tabBar__item d-flex flex-column" onClick={() => this.props.setTabBar('location')}>
<LocationOnIcon style={{color : this.props.tabBar === "location" ? "white" : "#afafaf" , width : 60, height : 60}} />
<LocationOnIcon style={{color : this.props.tabBar === "location" ? "white" : "#afafaf" , width : 40, height : 40}} />
{
this.props.tabBar === 'location' ?
<div className="tabBar__item--active">
@ -26,7 +26,7 @@ export default class TabBar extends Component {
}
</div>
<div className="tabBar__item d-flex flex-column" onClick={() => this.props.setTabBar('chat')}>
<ChatIcon style={{color : this.props.tabBar === "chat" ? "white" : "#afafaf" , width : 60, height : 60}} />
<ChatIcon style={{color : this.props.tabBar === "chat" ? "white" : "#afafaf" , width : 40, height : 40}} />
{
this.props.tabBar === 'chat' ?
<div className="tabBar__item--active">

@ -1,7 +1,6 @@
@media screen and (max-width: 450px){
.tabBar{
margin-top: 30px;
height: 80px;
height: 50px;
width: 100%;
justify-content : space-around;
align-items: center;
@ -13,8 +12,8 @@
height: 60px;
border-radius: 30px;
position: absolute;
top : 58px;
left: 0px;
top : 38px;
left: -9px;
z-index: 0px;
background-color: rgb(255, 255, 255)
}

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save