reza added background images

front
Reza_ashrafi 4 years ago
parent f10611c651
commit d8e92cf1bd
  1. 3
      src/Router.js
  2. BIN
      src/assets/icons/bioFirst.png
  3. BIN
      src/assets/icons/bioSecond.png
  4. BIN
      src/assets/icons/bioThird.png
  5. BIN
      src/assets/icons/chat.png
  6. BIN
      src/assets/icons/phonenumber.png
  7. 8
      src/views/Auth/Bio/Bio.scss
  8. 5
      src/views/Auth/Bio/FirstBio/FirstBio.js
  9. 2
      src/views/Auth/Bio/SecondBio/SecondBio.js
  10. 2
      src/views/Auth/Bio/ThirdBio/ThirdBio.js
  11. 17
      src/views/Auth/Login/Login.scss
  12. 2
      src/views/Auth/Login/Mobile/Mobile.js
  13. 5
      src/views/ChatRoom/Body/Body.js
  14. 4
      src/views/ChatRoom/Body/Body.scss

@ -28,6 +28,9 @@ export default class AppRouter extends Component {
</Switch>
<Route exact path={`/chatroom/:id`}>
<ChatRoom />
</Route>
<Route exact path={'/auth'}>
<Auth />
</Route>
</Router>
</Provider>

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 268 KiB

@ -19,6 +19,8 @@
max-width: 200px;
text-align: justify;
font-family: IRANSansNumeralLight;
position: relative;
top : 20px;
}
.three-dots{
align-items: center;
@ -30,6 +32,12 @@
background-color : #afafaf;
}
}
& img{
position: absolute;
top : 0px;
width : 100%;
height: 30%;
}
}
& button{

@ -1,11 +1,14 @@
import React, { Component } from 'react';
import NavigateNextIcon from '@material-ui/icons/NavigateNext';
import { Divider } from '@material-ui/core';
import bioFirst from '../../../../assets/icons/bioFirst.png';
export default class FirstBio extends Component {
render() {
return(
<>
<img src={bioFirst}
style={{left : '-5%'}} />
<p>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی میباشد.
</p>

@ -1,11 +1,13 @@
import React, { Component } from 'react';
import NavigateNextIcon from '@material-ui/icons/NavigateNext';
import NavigateBeforeIcon from '@material-ui/icons/NavigateBefore';
import bioSecond from '../../../../assets/icons/bioSecond.png';
export default class SecondBio extends Component {
render() {
return(
<>
<img src={bioSecond} style={{left : '-3%'}} />
<p>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی میباشد.
</p>

@ -1,11 +1,13 @@
import React, { Component } from 'react';
import NavigateNextIcon from '@material-ui/icons/NavigateNext';
import NavigateBeforeIcon from '@material-ui/icons/NavigateBefore';
import bioThird from '../../../../assets/icons/bioThird.png';
export default class SecondBio extends Component {
render() {
return(
<>
<img src={bioThird} style={{left : '-2%',top : 10}} />
<p>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی میباشد.
</p>

@ -18,30 +18,41 @@
}
&-mobile__top{
width: 100%;
height: 40%;
height: 30%;
flex-direction: column;
align-items: center;
justify-content: flex-end;
background-color: rgba(111,108,255,1);
text-align: right;
color: white;
box-shadow: 0 0 80px rgba(77, 75, 75, 0.8);
position: relative;
& div{
width: 200px;
text-align: right;
position: relative;
left : 30px;
z-index: 150;
}
& p{
width: 200px;
position: relative;
left : 30px;
z-index: 150;
}
& img{
width : 300%;
height : 300%;
position: absolute;
top : -140%;
left: -105%;
z-index: 100;
}
}
&-mobile__input{
width:280px;
margin : 30px auto 0px;
margin : 30% auto 0px;
position: relative;
z-index: 200;
input{
width: 100%;
border-radius: 20px;

@ -1,4 +1,5 @@
import React, { Component } from 'react';
import phonenumber from '../../../../assets/icons/phonenumber.png';
export default class Mobile extends Component {
render() {
@ -7,6 +8,7 @@ export default class Mobile extends Component {
<div className="login-mobile__top d-flex">
<div>منتظرت بودیم</div>
<p>شمارهتو بده تا کد تأیید رو برات بفرستم. دست دست نکن</p>
<img src={phonenumber} />
</div>
<div className="login-mobile__input d-flex">
<input type="text" maxLength={9} />

@ -208,6 +208,11 @@ export default class Body extends Component {
id: 'm8',
text: prevState.message,
voice : null,
image : null,
file : null,
video : null,
music : null,
document : null,
createdAt: now.toString(),
user: {
id: 'u1',

@ -1,6 +1,8 @@
@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);
@ -73,6 +75,8 @@
border-bottom-right-radius: 40px;
z-index: 200;
background-color: rgb(210, 196, 214);
background: url(../../../assets/icons/chat.png);
background-size: cover;
}
}
}
Loading…
Cancel
Save