reza added last version1

master
RezaAshrafi77 3 years ago
parent 9368cfcf96
commit 1e2ab85cdc
  1. 99
      src/AppRouter.js
  2. 72
      src/Redux/actions/user.js
  3. 70
      src/Redux/proxy.js
  4. BIN
      src/assets/icons/danger_lg.png
  5. BIN
      src/assets/icons/home_ar(2).png
  6. BIN
      src/assets/icons/home_ar.png
  7. BIN
      src/assets/icons/home_chat.png
  8. BIN
      src/assets/icons/ppt.png
  9. 4
      src/views/Auth/Login/Cellphone/index.js
  10. 16
      src/views/Auth/Login/Cellphone/index.scss
  11. 13
      src/views/Auth/Login/Code/index.js
  12. 48
      src/views/Auth/Login/Code/index.scss
  13. 5
      src/views/Auth/Login/Timer/index.css
  14. 22
      src/views/Auth/Login/Timer/index.js
  15. 8
      src/views/Auth/Login/index.js
  16. 20
      src/views/Auth/Profile/GenderSwitch/index.js
  17. 0
      src/views/Auth/Profile/GenderSwitch/index.scss
  18. 45
      src/views/Auth/Profile/Input/index.js
  19. 51
      src/views/Auth/Profile/Select/index.js
  20. 34
      src/views/Auth/Profile/TextArea/index.js
  21. 79
      src/views/Auth/Profile/Upload/index.js
  22. 140
      src/views/Auth/Profile/index.js
  23. 119
      src/views/Auth/Profile/index.scss
  24. 6
      src/views/Auth/index.js
  25. 46
      src/views/Home/HomeStatic/index.scss
  26. 60
      src/views/Home/Membership/index.scss
  27. 6
      src/views/Home/index.js
  28. 9
      src/views/Home/index.scss
  29. 4
      src/views/Product/index.js
  30. 3
      src/views/Product/index.scss
  31. 81
      src/views/QR/Links/index.js
  32. 20
      src/views/QR/Links/index.scss
  33. 29
      src/views/QR/PDF/index.scss
  34. 27
      src/views/QR/PowerPoint/index.scss
  35. 30
      src/views/QR/index.scss

@ -1,21 +1,24 @@
import React, { Component } from 'react';
import './App.css';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
// import proxy from './Redux/proxy';
import Home from './views/Home/index';
import Faq from './views/Faq/index';
import Contact from './views/Contact/index';
import About from './views/About/index';
import Products from './views/Products/index';
import Product from './views/Product/index';
import QR from './views/QR/index';
import Auth from './views/Auth/index';
import QRScan from './views/QRScan/index';
import Activation from './views/Activation/index';
import ChatList from './views/ChatList/index';
import Chatroom from './views/ChatRoom/index';
import Cart from './views/Cart/index';
import MyBooks from './views/MyBooks/index';
import React, { Component } from "react";
import "./App.css";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import { connect } from "react-redux";
import proxy from "./Redux/proxy";
import Home from "./views/Home/index";
import Faq from "./views/Faq/index";
import Contact from "./views/Contact/index";
import About from "./views/About/index";
import Products from "./views/Products/index";
import Product from "./views/Product/index";
import QR from "./views/QR/index";
import Auth from "./views/Auth/index";
import QRScan from "./views/QRScan/index";
import Activation from "./views/Activation/index";
import ChatList from "./views/ChatList/index";
import Chatroom from "./views/ChatRoom/index";
import Cart from "./views/Cart/index";
import MyBooks from "./views/MyBooks/index";
class AppRouter extends Component {
constructor(props) {
@ -25,9 +28,16 @@ class AppRouter extends Component {
state = {};
render() {
let home = (
<Route exact path={'/'}>
<Home />
{/* {proxy.status() ? <Home /> : <Auth />} */}
<Route exact path={"/"}>
{proxy.status() ? (
this.props.profile.username ? (
<Home />
) : (
<Auth page={"profile"} />
)
) : (
<Auth />
)}
</Route>
);
@ -35,58 +45,59 @@ class AppRouter extends Component {
<Router>
<Switch>
{home}
{/* <Route path={'/list'}>
<List />
</Route> */}
<Route path={'/faq'}>
<Route path={"/faq"}>
<Faq />
</Route>
<Route path={'/contact'}>
<Route path={"/contact"}>
<Contact />
</Route>
<Route path={'/about'}>
<Route path={"/about"}>
<About />
</Route>
<Route exact path={'/products'}>
<Route exact path={"/products"}>
<Products />
</Route>
<Route exact path={'/products/:id'}>
<Route exact path={"/products/:id"}>
<Product />
</Route>
<Route exact path={'/qr'}>
<Route exact path={"/qr"}>
<QR />
</Route>
<Route exact path={'/auth'}>
<Route exact path={"/auth"}>
<Auth />
</Route>
<Route exact path={'/profile'}>
<Auth page={'profile'} />
<Route exact path={"/profile"}>
<Auth page={"profile"} />
</Route>
<Route exact path={'/qr-scan'}>
<Route exact path={"/qr-scan"}>
<QRScan />
</Route>
<Route exact path={'/activation'}>
<Route exact path={"/activation"}>
<Activation />
</Route>
<Route exact path={'/chatroom'}>
<Route exact path={"/chatroom"}>
<ChatList />
</Route>
<Route exact path={'/cart'}>
<Route exact path={"/cart"}>
<Cart />
</Route>
<Route exact path={'/mybooks'}>
<Route exact path={"/mybooks"}>
<MyBooks />
</Route>
{
window.innerWidth < 1000 ?
<Route exact path={'/chatroom/:id'}>
{window.innerWidth < 1000 ? (
<Route exact path={"/chatroom/:id"}>
<Chatroom />
</Route> : null
}
</Route>
) : null}
</Switch>
</Router>
);
}
}
export default AppRouter;
export default connect(
(state) => ({
profile: state.user.status.profile || {},
}),
{}
)(AppRouter);

@ -1,37 +1,53 @@
import proxy from '../proxy';
const user = {
import proxy from "../proxy";
const user = {
otp: (data, history) => async (dispatch) =>
await proxy.login('public/sendOTP', data, { history, dispatch }),
await proxy.login("public/sendOTP", data, { history, dispatch }),
otp_login: (data, history) => async (dispatch) =>
await proxy.login('user/otp/login', data, { history, dispatch }),
await proxy.login("user/otp/login", data, { history, dispatch }),
register: (data, history) => async (dispatch) =>
await proxy.login('user/register', data, { history, dispatch }),
await proxy.login("user/register", data, { history, dispatch }),
switchRole: (data, history) => async (dispatch) =>
await proxy.login('user/switchRole', data, { history, dispatch }),
await proxy.login("user/switchRole", data, { history, dispatch }),
logout: (data, history) => async (dispatch) =>
await proxy.logout('user/logout', data, { history, dispatch }),
await proxy.logout("user/logout", data, { history, dispatch }),
getUserRole: (data) => async (dispatch) =>
await proxy.get('user/getUserRole', data, { dispatch }),
list: (data = {}) => async (dispatch) =>
await proxy.get('user/list', data, { dispatch }),
domains: (data = {}) => async (dispatch) =>
await proxy.get('user/domains', data, { dispatch }),
getmothers: (data = {}) => async (dispatch) =>
await proxy.get2('mothers/list', data, {
dispatch,
}),
update: (data = {}, data2 = {}) => async (dispatch) => {
await proxy.put('user/update', data);
await proxy.get('user/list', data2, { dispatch });
},
add: (data = {}, data2 = {}) => async (dispatch) => {
await proxy.post('user/add', data);
await proxy.get('user/list', data2, { dispatch });
},
del: (data = {}, data2 = {}) => async (dispatch) => {
await proxy.delete('user/delete', data);
await proxy.get('user/list', data2, { dispatch });
},
await proxy.get("user/getUserRole", data, { dispatch }),
list:
(data = {}) =>
async (dispatch) =>
await proxy.get("user/list", data, { dispatch }),
domains:
(data = {}) =>
async (dispatch) =>
await proxy.get("user/domains", data, { dispatch }),
getmothers:
(data = {}) =>
async (dispatch) =>
await proxy.get2("mothers/list", data, {
dispatch,
}),
getProfile:
(data = {}) =>
async (dispatch) =>
await proxy.get("user/getProfile", data, { dispatch }),
setProfile:
(data = {}, data2 = {}) =>
async (dispatch) => {
await proxy.put("user/setProfile", data, { dispatch });
await proxy.get("user/getProfile", data2, { dispatch });
},
add:
(data = {}, data2 = {}) =>
async (dispatch) => {
await proxy.post("user/add", data);
await proxy.get("user/list", data2, { dispatch });
},
del:
(data = {}, data2 = {}) =>
async (dispatch) => {
await proxy.delete("user/delete", data);
await proxy.get("user/list", data2, { dispatch });
},
};
export default user;

@ -1,18 +1,15 @@
import { ApiConfig } from './../constants/defaultValues';
import axios from 'axios';
import { ApiConfig } from "./../constants/defaultValues";
import axios from "axios";
let { baseUrl, apiKey } = ApiConfig;
baseUrl = baseUrl + '/';
const baseUrl2 = 'https://dnvn.ir/api/v1';
let access = window.localStorage.getItem("access");
baseUrl = baseUrl + "/";
const baseUrl2 = "https://dnvn.ir/api/v1";
const Axios = axios.create({
withCredentials: true,
validateStatus: null,
baseURL: baseUrl,
});
const Axios2 = axios.create({
withCredentials: true,
validateStatus: null,
baseURL: baseUrl2,
headers: access ? { Authorization: `Bearer ${access}` } : {},
});
class Proxy {
get = async (url, params, opt = {}) =>
@ -21,12 +18,6 @@ class Proxy {
opt,
async () => await Axios.get(url, { params, ...opt })
);
get2 = async (url, params, opt = {}) =>
await this.check2(
url,
opt,
async () => await Axios2.get(url, { params, ...opt })
);
post = async (url, params, opt = {}) =>
await this.check(url, opt, async () => await Axios.post(url, params, opt));
put = async (url, params, opt = {}) =>
@ -41,7 +32,7 @@ class Proxy {
check = async (url, { dispatch }, fetch) => {
dispatch = dispatch || (() => {});
dispatch({ type: 'loading' });
dispatch({ type: "loading" });
let response = await fetch();
switch (response.status) {
case 200:
@ -55,32 +46,14 @@ class Proxy {
}
break;
default:
dispatch({ type: 'error', data: response.data });
}
return false;
};
check2 = async (url, { dispatch }, fetch) => {
dispatch({ type: 'loading' });
let response = await fetch();
switch (response.status) {
case 200:
dispatch({ type: url, data: response.data });
return response.data;
case 401:
if (await this.refresh()) {
let response = await fetch();
dispatch({ type: url, data: response.data });
return response.data;
}
break;
default:
dispatch({ type: 'error', data: response.data });
dispatch({ type: "error", data: response.data });
}
return false;
};
refresh = async () => {
let refresh = localStorage.getItem('refresh');
if (!refresh) window.location.href = '/';
let refresh = localStorage.getItem("refresh");
if (!refresh) window.location.href = "/";
let login = await this.login(
{},
{ headers: { Authorization: `Bearer ${refresh}` } }
@ -92,10 +65,11 @@ class Proxy {
dispatch: (obj) => {
let login = obj.data;
if (!login || !login.refreshToken) return false;
localStorage.setItem('refresh', login.refreshToken);
localStorage.setItem("refresh", login.refreshToken);
localStorage.setItem("access", login.accessToken);
delete login.refreshToken;
delete login.accessToken;
localStorage.setItem('userData', JSON.stringify(login));
localStorage.setItem("userData", JSON.stringify(login));
dispatch(obj);
},
});
@ -103,19 +77,21 @@ class Proxy {
logout = async (url, params, { dispatch }) => {
this.post(url, params, {
dispatch: (obj) => {
localStorage.removeItem('refresh');
localStorage.removeItem('userData');
localStorage.removeItem("refresh");
localStorage.removeItem("access");
localStorage.removeItem("userData");
dispatch(obj);
},
});
};
status = () => {
let refresh = localStorage.getItem('refresh');
let userData = localStorage.getItem('userData');
let refresh = localStorage.getItem("refresh");
let userData = localStorage.getItem("userData");
if (!refresh) return false;
if (refresh == 'undefined') {
localStorage.removeItem('refresh');
localStorage.removeItem('userData');
if (refresh == "undefined") {
localStorage.removeItem("refresh");
localStorage.removeItem("access");
localStorage.removeItem("userData");
return false;
}
return JSON.parse(userData);

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

@ -11,8 +11,8 @@ const maxMobileSize = 550;
const fontSize = {
desktop: {
span: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 85,
input: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 85,
span: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 80,
input: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 80,
button: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 85,
div: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 100,
},

@ -19,27 +19,29 @@
}
form {
width: 100%;
max-width: 400px;
position: relative;
padding: 10px 40px;
img {
position: absolute;
left: 10px;
top: 6px;
left: 50px;
top: 17px;
width: 45px;
}
span {
text-align: right;
position: absolute;
left: 65px;
top: 8px;
left: 108px;
top: 18px;
direction: ltr;
color: #a5a5a5;
font-family: numeralLight;
}
input {
font-family: numeralLight;
width: 100%;
max-width: 400px;
background-color: inherit;
color: #a5a5a5;
height: 43px;
direction: ltr;
text-align: left;
background-color: #f2f2f2;
@ -53,7 +55,6 @@
button {
margin-top: 20px;
width: 100%;
max-width: 400px;
border: 0px;
font-family: numeralLight;
background-color: #6cbe44;
@ -63,7 +64,6 @@
}
}
&--footer {
max-width: 400px;
div {
font-family: numeralLight;
color: #a5a5a5;

@ -10,9 +10,9 @@ const maxDesktopSize = 1250;
const fontSize = {
desktop: {
input: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 85,
button: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 85,
div: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 95,
input: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 85,
button: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 85,
div: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95,
},
};
export default class Code extends Component {
@ -164,7 +164,9 @@ export default class Code extends Component {
/>
</label>
</div>
<button style={{ fontSize: fontSize.desktop.button }}>ثبت</button>
<button style={{ fontSize: fontSize.desktop.button }}>
ثبت
</button>
{!this.state.resendStatus ? (
<Timer seconds={10} parent={this} />
) : (
@ -210,7 +212,8 @@ export default class Code extends Component {
<div style={{ maxHeight: 60 }} className="d-flex flex-column mb-3">
<h1>دانوین</h1>
<p>
یک کد تائیدیه به شماره <span>{this.props.parent.state.cellphone}</span> ارسال شد <br />
یک کد تائیدیه به شماره{" "}
<span>{this.props.parent.state.cellphone}</span> ارسال شد <br />
آن را در قسمت زیر وارد کنید.
</p>
</div>

@ -1,4 +1,4 @@
.auth-code{
.auth-code {
width: 100vw;
height: 100vh;
&__box {
@ -11,46 +11,48 @@
img {
margin-bottom: 30px;
}
button{
button {
margin-top: 20px;
width: 100%;
max-width: 300px;
border: 0px;
font-family: numeralMedium;
background-color: #6CBE44;
font-family: numeralLight;
background-color: #6cbe44;
color: white;
border-radius: 7px;
padding: 8px;
}
&--codes{
&--codes {
direction: ltr;
input {
max-width: 60px;
max-height: 60px;
background-color: #f2f2f2;
border : 0px;
margin : 0px 10px;
color: #6F7074;
border: 0px;
margin: 0px 10px;
color: #6f7074;
text-align: center;
direction : ltr;
direction: ltr;
border-radius: 5px;
padding: 10px 15px;
&:focus{
font-family: numeralLight;
&:focus {
outline: 0px;
}
}
div{
letter-spacing:-1px;
div {
letter-spacing: -1px;
font-family: numeralLight;
}
}
}
}
.mobile-auth-code{
.mobile-auth-code {
width: 100%;
height: 100%;
justify-content:center;
align-items:center;
justify-content: center;
align-items: center;
direction: ltr;
position: relative;
max-width: 360px;
@ -75,33 +77,33 @@
position: relative;
bottom: 40px;
}
button{
button {
margin-top: 20px;
width: 100%;
max-width: 300px;
border: 0px;
font-family: numeralMedium;
background-color: #6CBE44;
background-color: #6cbe44;
color: white;
border-radius: 7px;
padding: 8px;
font-size: calc(100vw / 20);
}
&__codes{
&__codes {
direction: ltr;
input {
max-width: 60px;
max-height: 60px;
background-color: #f2f2f2;
border : 0px;
margin : 0px 10px;
color: #6F7074;
border: 0px;
margin: 0px 10px;
color: #6f7074;
text-align: center;
direction : ltr;
direction: ltr;
font-size: calc(100vw / 15);
border-radius: 5px;
padding: 10px 15px;
&:focus{
&:focus {
outline: 0px;
}
}

@ -1,6 +1,7 @@
.timer{
.timer {
flex-direction: row;
direction: rtl !important;
margin-right: 10px;
color: #6CBE44;
color: #6cbe44;
font-family: numeralLight;
}

@ -5,7 +5,7 @@ const maxDesktopSize = 1250;
const fontSize = {
desktop: {
div: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 95,
div: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95,
},
};
export default class Timer extends Component {
@ -66,17 +66,29 @@ export default class Timer extends Component {
<>
{window.innerWidth > 1000 ? (
<div className="timer d-flex mt-4">
<div style={{ color: "#a5a5a5", marginLeft: 5, fontSize: fontSize.desktop.div, fontFamily:'numeralMedium' }}>
<div
style={{
color: "#a5a5a5",
marginLeft: 5,
fontSize: fontSize.desktop.div,
fontFamily: "numeralLight",
}}
>
زمان باقیمانده تا انقضای کد:
</div>
<div style={{ fontSize: fontSize.desktop.div }}>{this.state.time.s}</div>:
<div style={{ fontSize: fontSize.desktop.div }}>{this.state.time.m + this.state.time.h * 60}</div>
<div style={{ fontSize: fontSize.desktop.div }}>
{this.state.time.s}
</div>
:
<div style={{ fontSize: fontSize.desktop.div }}>
{this.state.time.m + this.state.time.h * 60}
</div>
</div>
) : null}
{window.innerWidth < 1000 ? (
<div className="timer d-flex mt-4">
<div style={{ color: "#a5a5a5", marginLeft: 5 }}>
زمان باقیمانده تا انقضای کد:
زمان باقیمانده تا انقضای کد
</div>
<div>{this.state.time.s}</div>:
<div>{this.state.time.m + this.state.time.h * 60}</div>

@ -19,7 +19,13 @@ class Login extends Component {
async componentDidUpdate() {
const { cellphone, otp, page } = this.state;
if (cellphone && !otp) this.props.otp({ cellphone });
if (page && cellphone && otp) this.props.otp_login({ cellphone, otp });
if (page && cellphone && otp)
this.props.otp_login({
cellphone,
otp,
userToken: "1",
applicationToken: "11",
});
}
resend = () => {

@ -0,0 +1,20 @@
import React from "react";
export default function GenderSwitch(props) {
return (
<>
{window.innerWidth > 1000 ? (
<div className="gender d-flex">
<button onClick={}>پسر</button>
<button>دختر</button>
</div>
) : null}
{window.innerWidth < 1000 ? (
<div className="mobile-gender d-flex">
<button>پسر</button>
<button>دختر</button>
</div>
) : null}
</>
);
}

@ -1,27 +1,40 @@
import React from 'react';
import TextField from '@material-ui/core/TextField';
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles((theme) => ({
root: {
'& .MuiTextField-root': {
width: '100%',
position : 'relative',
marginRight : 10,
import React from "react";
import TextField from "@material-ui/core/TextField";
import { makeStyles } from "@material-ui/core/styles";
export default function FormPropsTextFields(props) {
const useStyles = makeStyles((theme) => ({
root: {
"& .MuiTextField-root": {
width: "100%",
position: "relative",
marginRight: 10,
"& input": {
textAlign: props.align,
direction: props.align === "right" ? "rtl" : "ltr",
},
},
},
},
}));
}));
export default function FormPropsTextFields(props) {
const classes = useStyles();
const { parent, defaultValue } = props;
return (
<form className={classes.root} noValidate autoComplete="off">
<div>
<TextField id="outlined-basic" name={props.name} label={props.label} variant="outlined" />
<TextField
id="outlined-basic"
name={props.name}
label={props.label}
variant="outlined"
onChange={(e) => parent.onChange(e.target.name, e.target.value)}
defaultValue={defaultValue}
/>
</div>
</form>
);
}
FormPropsTextFields.defaultProps = {
align: "right",
};

@ -1,32 +1,31 @@
import React from "react";
import { makeStyles, withStyles } from "@material-ui/core/styles";
import FormControl from "@material-ui/core/FormControl";
import Select from '@material-ui/core/Select';
import Select from "@material-ui/core/Select";
import InputBase from "@material-ui/core/InputBase";
import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
import InputLabel from '@material-ui/core/InputLabel';
import InputLabel from "@material-ui/core/InputLabel";
const BootstrapInput = withStyles((theme) => ({
root: {
"label + &": {
marginTop: theme.spacing(3),
},
},
input: {
borderRadius: 4,
position: "relative",
// backgroundColor: theme.palette.background.paper,
border: "1px solid #a5a5a5",
fontSize: window.innerWidth > 1000 ? 16 : "calc(100vw / 30)",
color: "#a5a5a5",
// maxWidth : 70,
minWidth: '100%',
padding: "0px",
transition: theme.transitions.create(["border-color", "box-shadow"]),
// Use the system font instead of the default Roboto font.
fontFamily: "numeralLight",
"&:focus": {
input: {
borderRadius: 4,
position: "relative",
// backgroundColor: theme.palette.background.paper,
border: "1px solid #a5a5a5",
fontSize: window.innerWidth > 1000 ? 16 : "calc(100vw / 30)",
color: "#a5a5a5",
// maxWidth : 70,
minWidth: "100%",
padding: "0px",
// Use the system font instead of the default Roboto font.
fontFamily: "numeralLight",
"&:focus": {
borderRadius: 4,
},
},
},
}))(InputBase);
@ -40,21 +39,21 @@ const useStyles = makeStyles((theme) => ({
export default function CustomizedSelects(props) {
const classes = useStyles();
console.log(props);
const { parent } = props;
return (
<div style={{ position: "relative"}}>
<div style={{ position: "relative" }}>
<FormControl variant="outlined" className={classes.marginLeft}>
<InputLabel id="demo-simple-select-outlined-label">{props.label}</InputLabel>
<InputLabel id="demo-simple-select-outlined-label">
{props.label}
</InputLabel>
<Select
labelId="demo-simple-select-outlined-label"
id="demo-simple-select-outlined"
value={props.parent.state[props.name]}
onChange={(e) =>
props.parent.setState({ [props.name]: e.target.value })
} label="Age"
// value={props.parent.state[props.name]}
onChange={(e) => parent.onChange(props.name, e.target.value)}
>
{props.options.map((item,i) => (
{/* 09366858119 */}
{props.options.map((item, i) => (
<option key={i} value={item}>
{item}
</option>

@ -1,32 +1,32 @@
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
const useStyles = makeStyles((theme) => ({
root: {
'& .MuiTextField-root': {
"& .MuiTextField-root": {
margin: theme.spacing(0),
width: '100%',
width: "100%",
},
},
}));
export default function MultilineTextFields(props) {
const classes = useStyles();
const [value, setValue] = React.useState('Controlled');
const [value, setValue] = React.useState("Controlled");
const { parent } = props;
return (
<form className={classes.root} noValidate autoComplete="off">
<TextField
id="outlined-multiline-static"
label={props.label}
multiline
rows={4}
onChange={(e) => props.parent.setState({[props.name] : e.target.value})}
name={props.name}
defaultValue=""
variant="outlined"
/>
<TextField
id="outlined-multiline-static"
label={props.label}
multiline
rows={4}
onChange={(e) => parent.onChange(e.target.name, e.target.value)}
name={props.name}
defaultValue=""
variant="outlined"
/>
</form>
);
}

@ -0,0 +1,79 @@
import React from "react";
import AddAPhotoIcon from "@material-ui/icons/AddAPhoto";
const maxDesktopSize = 1250;
const maxMobileSize = 550;
const fontSize = {
desktop: {
span: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80,
},
};
export default function Upload(props) {
const { parent } = props;
return (
<>
{window.innerWidth < 1000 ? (
<div className="mobile-auth-profile__upload d-flex justify-content-center align-items-center mb-3">
{parent.state.file === null ? (
<>
<input
type="file"
name="file"
onChange={(e) => parent.onChange(e.target.name, e.target.value)}
/>
<AddAPhotoIcon
style={{ width: 40, height: 40, color: "white" }}
/>
</>
) : (
<>
<input
type="file"
name="file"
onChange={(e) => parent.onChange(e.target.name, e.target.value)}
/>
<img src={this.props.user.icon} alt={"کاربر"} />
</>
)}
</div>
) : null}
{window.innerWidth > 1000 ? (
<div className="auth-profile__upload d-flex justify-content-center-align-items-center">
{parent.state.file === null ? (
<>
<input
label={props.label}
onChange={(e) => parent.onChange(e.target.name, e.target.value)}
name={props.name}
defaultValue=""
type="file"
/>
<AddAPhotoIcon
style={{
width: 40,
height: 40,
color: "grey",
position: "absolute",
left: "calc(50% - 20px)",
top: "calc(50% - 20px)",
}}
/>
</>
) : (
<>
<input
label={props.label}
onChange={(e) => parent.onChange(e.target.name, e.target.value)}
name={props.name}
defaultValue=""
type="file"
/>
</>
)}
</div>
) : null}
</>
);
}

@ -1,11 +1,14 @@
import React, { Component } from "react";
import { user } from "~/Redux/actions";
import { connect } from "react-redux";
import Select from "./Select/index";
import Input from "./Input/index";
import TextArea from "./TextArea/index";
import Upload from "./Upload/index";
import logo from "../../../assets/icons/logo.png";
import pic from "../../../assets/images/pic.png";
import AddAPhotoIcon from "@material-ui/icons/AddAPhoto";
import "./index.scss";
@ -14,20 +17,54 @@ const maxDesktopSize = 1250;
const fontSize = {
desktop: {
h1: window.innerWidth > maxDesktopSize ? 25 : window.innerWidth / 55,
p: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 85,
p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 90,
},
};
export default class Profile extends Component {
class Profile extends Component {
state = {
file: null,
firstName: "",
lastName: "",
password: "",
username: "",
address: "",
gender: "",
userRoleId: "",
validation: {
firstName: { name: "نام", status: "" },
lastName: { name: "نام خانوادگی", status: "" },
username: { name: "نام کاربری", status: "" },
},
};
onChange = (e) => {
onChange = (name, value) => {
this.setState({
[e.target.name]: e.target.value,
[name]: value,
});
};
componentDidMount() {
const { getProfile, profile } = this.props;
// if (!profile) {
// getProfile();
// }
}
onSubmit = (e) => {
e.preventDefault();
const { firstName, lastName, username, cellphone } = this.state;
const { profile, setProfile } = this.props;
const data = {
firstName: firstName || profile.firstName,
lastName: lastName || profile.lastName,
username: username || profile.username,
cellphone: profile.cellphone,
};
setProfile(data);
};
render() {
const { user } = this.props;
const { user, profile } = this.props;
return (
<>
{window.innerWidth > 1000 ? (
@ -37,19 +74,60 @@ export default class Profile extends Component {
<p style={{ fontSize: fontSize.desktop.p }}>
لطفا مشخصات خود را به صورت کامل نمایید.
</p>
<form className="auth-profile__box--form d-flex">
<form
className="auth-profile__box--form d-flex"
onSubmit={(e) => this.onSubmit(e)}
>
<div style={{ width: "48%" }}>
<div className="mb-2 d-flex justify-content-center">
<Upload name="file" parent={this} />
</div>
<div className="mb-2">
<Input name="name" label="نام و نام خانوادگی" />
<Input
name="firstName"
label="نام"
parent={this}
defaultValue={profile.firstName}
/>
</div>
<div className="mb-2">
<Input name="username" label="نام کاربری" />
<Input
name="lastName"
label="نام و نام خانوادگی"
parent={this}
defaultValue={profile.lastName}
/>
</div>
<div className="mb-2">
<Input name="password" label="رمز عبور" />
<Input
name="username"
label="نام کاربری"
parent={this}
defaultValue={profile.username}
align="left"
/>
</div>
{/* <div className="mb-2">
<Input name="password" label="رمز عبور" parent={this} />
</div> */}
</div>
<div style={{ width: "48%" }}>
<div className="mb-2" style={{ minWidth: "100%" }}>
<Select
parent={this}
options={["معلم", "دانش آموز"]}
name="userRoleId"
label={"عنوان"}
/>
</div>
{this.state.userRoleId === "دانش آموز" ? (
<Select
parent={this}
options={["دختر", "پسر"]}
name="gender"
label={"جنسیت"}
/>
) : null}
<div className="mb-2" style={{ minWidth: "100%" }}>
<Select
parent={this}
@ -66,13 +144,6 @@ export default class Profile extends Component {
label={"شهرستان"}
/>
</div>
<div className="mb-2">
<TextArea
parent={this}
label={"آدرس محل سکونت"}
name="address"
/>
</div>
<div className="auth-profile__box--form__footer d-flex justify-content-center">
<button>ذخیره</button>
</div>
@ -86,29 +157,7 @@ export default class Profile extends Component {
<img src={logo} alt="دانوین" />
<h1>حساب کاربری</h1>
<p>لطفا مشحصات خود را به صورت کامل وارد نمایید</p>
<div className="mobile-auth-profile__upload d-flex justify-content-center align-items-center mb-3">
{this.state.file === null ? (
<>
<input
type="file"
name="file"
onChange={(e) => this.onChange(e)}
/>
<AddAPhotoIcon
style={{ width: 40, height: 40, color: "white" }}
/>
</>
) : (
<>
<input
type="file"
name="file"
onChange={(e) => this.onChange(e)}
/>
<img src={this.props.user.icon} alt={"کاربر"} />
</>
)}
</div>
<Upload name="file" />
<Input name="name" label="نام و نام خانوادگی" />
<Input name="username" label="نام کاربری" />
<Input name="password" label="رمز عبور" />
@ -126,7 +175,7 @@ export default class Profile extends Component {
/>
<TextArea parent={this} label={"آدرس محل سکونت"} name="address" />
<div className="mobile-auth-profile__footer d-flex justify-content-center">
<button>ذخیره</button>
<button onClick={() => this.onSubmit()}>ذخیره</button>
</div>
</div>
) : null}
@ -135,9 +184,16 @@ export default class Profile extends Component {
}
}
export default connect(
(state) => ({
profile: state.user.status.profile || {},
}),
{ getProfile: user.getProfile, setProfile: user.setProfile }
)(Profile);
Profile.defaultProps = {
user: {
name: "باربی",
name: "اکبر",
icon: pic,
description: "",
},

@ -1,20 +1,20 @@
.mobile-auth-profile{
width : 100%;
height : 100%;
.mobile-auth-profile {
width: 100%;
height: 100%;
overflow-y: scroll;
position: relative;
padding: 15px;
img{
img {
width: calc(100% / 2.5);
}
h1{
h1 {
margin-top: 15px;
font-family: numeralBold;
font-size: calc(100vw / 15);
color: #6F7074;
color: #6f7074;
letter-spacing: -1px;
}
p{
p {
font-family: numeralLight;
font-size: calc(100vw / 22);
color: #6f7074;
@ -36,7 +36,7 @@
top: 0px;
opacity: 0;
}
img{
img {
width: 100%;
height: 100%;
object-fit: cover;
@ -62,13 +62,13 @@
// }
// }
.MuiFormControl-root{
.MuiFormControl-root {
width: 100%;
margin: 10px auto !important;
.MuiSelect-iconOutlined{
.MuiSelect-iconOutlined {
display: none;
}
.MuiSelect-outlined.MuiSelect-outlined{
.MuiSelect-outlined.MuiSelect-outlined {
padding-right: 15px;
}
color: #797979 !important;
@ -110,7 +110,7 @@
label {
background-color: white;
max-width: 120px;
width: fit-content;
text-align: center;
font-size: calc(100vw / 25) !important;
color: #797979 !important;
@ -119,10 +119,10 @@
.Mui-focused {
color: rgba(0, 0, 0, 0.54) !important;
border-color: #c4c4c5 !important;
background-color:white;
background-color: white;
}
.MuiInputBase-input{
.MuiInputBase-input {
height: auto !important;
}
@ -144,38 +144,71 @@
}
}
.auth-profile{
width : 100vw;
.auth-profile {
width: 100vw;
height: 100vh;
&__box{
&__box {
width: 100%;
max-width: 1000px;
border: 1px solid #ddd;
border-radius: 20px;
h1{
h1 {
margin-top: 15px;
font-family: numeralBold;
color: #6F7074;
color: #6f7074;
letter-spacing: -1px;
}
p{
p {
font-family: numeralLight;
color: #6f7074;
letter-spacing: -1px;
text-align: justify;
}
&--form{
&--form {
margin-top: 20px;
width: 100%;
justify-content:space-between;
.MuiFormControl-root{
justify-content: space-between;
.auth-profile__upload {
width: 150px;
height: 150px;
border-radius: 50%;
margin-top: 15px auto 0px;
// border: 2px dotted #ccc;
position: relative;
background-color: #eee;
input {
width: 100%;
height: 100%;
opacity: 0;
position: absolute;
left: 0px;
top: 0px;
z-index: 50;
}
span {
color: #505a82;
font-family: numeralLight;
height: 20px;
position: absolute;
left: 0px;
top: calc(50% - 10px);
width: 100%;
text-align: center;
z-index: 10;
}
}
.MuiMenu-list,
.MuiFormControl-root {
width: 100%;
margin: 10px auto !important;
.MuiSelect-iconOutlined{
option {
font-family: numeralLight !important;
}
.MuiSelect-iconOutlined {
display: none;
}
.MuiSelect-outlined.MuiSelect-outlined{
.MuiSelect-outlined.MuiSelect-outlined {
padding-right: 15px;
}
color: #797979 !important;
@ -187,20 +220,18 @@
border-color: #cecece !important;
border-width: 1px !important;
color: green !important;
font-size: calc(100vw / 80) !important;
border-radius: 10px !important;
}
.MuiOutlinedInput-input {
padding: 20px 14px !important;
font-size: calc(100vw / 85) !important;
}
.MuiInputLabel-outlined {
font-family: numeralLight !important;
display: inline !important;
position: absolute;
text-align: right !important;
right: 7px;
right: 10px;
top: 20px;
padding: 0px !important;
transform: translate(0px, 0px) scale(1) !important;
@ -209,27 +240,28 @@
text-align: center !important;
display: inline;
position: absolute;
right: 0px;
right: 10px;
top: -8px;
transform: translate(0px, 0px) scale(0.85) !important;
padding-right: 0px !important;
padding: 0px 5px !important;
}
label {
background-color: white;
max-width: 120px;
width: fit-content !important;
text-align: center;
font-size: calc(100vw / 85) !important;
color: #797979 !important;
color: #797979;
letter-spacing: -1px;
padding: 0px 5px !important;
// transform: translateX(-20px);
}
.Mui-focused {
color: rgba(0, 0, 0, 0.54) !important;
border-color: #c4c4c5 !important;
background-color:white;
background-color: white;
}
.MuiInputBase-input{
.MuiInputBase-input {
height: auto !important;
}
&__footer {
@ -239,10 +271,9 @@
button {
font-family: numeralLight;
border: 0px;
background-color: #00CC69;
background-color: #00cc69;
border-radius: 7px;
font-size: 18px;
font-weight: 600;
color: white;
padding: 12px 0px;
width: 100%;
@ -251,3 +282,13 @@
}
}
}
.MuiMenu-list {
option {
font-family: numeralLight !important;
padding: 5px 5px !important;
}
}
.MuiSelect-root {
font-family: numeralLight !important;
}

@ -1,5 +1,5 @@
import React, { Component } from "react";
import {ToastContainer} from "react-toastify";
import { ToastContainer } from "react-toastify";
import Profile from "./Profile/index";
import Login from "./Login/index";
@ -34,5 +34,5 @@ export default class Auth extends Component {
}
Auth.defaultProps = {
page: 'login'
}
page: "login",
};

@ -1,18 +1,18 @@
.home-static{
.home-static {
margin: 20px 0px;
width: 100%;
&__list{
&__list {
justify-content: space-between;
width: 100%;
&--item{
box-shadow: 0px 0px 5px rgb(200,200,200);
&--item {
box-shadow: 0px 0px 5px rgb(200, 200, 200);
font-family: numeralBold;
align-items: center;
border-radius: 10px;
padding: 0px 10px;
justify-content: space-around;
div{
h2{
div {
h2 {
font-size: calc(100vw / 95);
letter-spacing: -1px;
}
@ -26,47 +26,46 @@
}
}
.mobile-home-static{
&__flex{
.mobile-home-static {
&__flex {
padding: 20px 10px;
justify-content: space-around;
text-decoration: none;
img {
// margin-right: 20px;
max-height: 55px;
max-width: 55px;
width: 40%;
width: 30%;
height: 70%;
transform: scale(1.3);
}
&--right{
&--right {
margin-left: 10px;
h1{
h1 {
font-family: numeralBold;
text-align: justify;
}
span{
span {
letter-spacing: -1px;
font-family: numeralLight;
}
}
}
&__vitrin{
&__vitrin {
padding: 15px 5px;
h1{
h1 {
font-family: numeralBold;
text-align: justify;
}
&--product{
&--product {
width: 24%;
margin: 3px;
border-radius: 10px;
img{
img {
width: 100%;
height: 70px;
border-radius: 10px;
}
}
a{
a {
text-decoration: none;
font-family: numeralLight;
align-items: flex-end;
@ -76,20 +75,19 @@
color: white;
}
}
&__simple{
&__simple {
// padding: 0px 10px;
text-decoration: none;
min-height: 50px;
div{
div {
width: 100%;
height: 100%;
padding: 0px 3px;
h1{
h1 {
font-family: numeralBold;
text-align: justify;
margin: 0px;
}
}
}
}

@ -4,22 +4,22 @@
box-shadow: 0px 0px 5px rgb(200, 200, 200);
border-radius: 7px;
justify-content: space-between;
align-items:center;
align-items: center;
flex: 1;
margin-top: 20px;
margin-bottom: 20px;
h1{
h1 {
font-family: numeralBold;
font-size: calc(100vw / 50);
margin-bottom: 0px;
color: #1bbc6e;
strong{
strong {
color: white;
background-color: #1bbc6e;
padding:0px 2px;
padding: 0px 2px;
}
}
p{
p {
margin-top: 10px;
font-family: numeralMedium;
margin-bottom: 0px;
@ -27,32 +27,33 @@
color: #6f7074;
}
.MuiOutlinedInput-notchedOutline{
.MuiOutlinedInput-notchedOutline {
top: 0px !important;
}
.MuiOutlinedInput-input{
padding : 20px 14px !important;
.MuiOutlinedInput-input {
padding: 20px 14px !important;
}
.MuiInputLabel-outlined{
.MuiInputLabel-outlined {
font-family: numeralLight !important;
display : inline;
display: inline;
position: absolute;
right: 4px;
top: 12px;
transform: translate(0px, 0px) scale(1) !important;
}
.MuiInputLabel-shrink{
display : inline;
.MuiInputLabel-shrink {
display: inline;
position: absolute;
right: -23px;
top: -8px;
transform: translate(0px, 0px) scale(0.75) !important;
width: fit-content !important;
padding: 0px 5px !important;
}
label{
label {
background-color: white;
max-width: 120px;
text-align: center;
font-size: 14px !important;
}
@ -64,34 +65,33 @@
background-color: #1bbc6e;
color: white;
border-radius: 5px;
padding : 7px 50px;
padding: 7px 50px;
margin-right: 20px;
}
}
.mobile-membership {
width: 100%;
padding: 15px 20px;
box-shadow: 0px 0px 5px rgb(200, 200, 200);
border-radius: 7px;
justify-content: space-between;
align-items:center;
align-items: center;
flex: 1;
margin-top: 20px;
margin-bottom: 20px;
h1{
h1 {
font-family: numeralBold;
font-size: calc(100vw / 20);
margin-bottom: 0px;
color: #1bbc6e;
strong{
strong {
color: white;
background-color: #1bbc6e;
padding:0px 2px;
padding: 0px 2px;
}
}
p{
p {
margin-top: 10px;
font-family: numeralMedium;
margin-bottom: 0px;
@ -99,30 +99,30 @@
color: #6f7074;
}
.MuiOutlinedInput-notchedOutline{
.MuiOutlinedInput-notchedOutline {
top: 0px !important;
}
.MuiOutlinedInput-input{
padding : 15px 14px !important;
.MuiOutlinedInput-input {
padding: 15px 14px !important;
}
.MuiInputLabel-outlined{
.MuiInputLabel-outlined {
font-family: numeralLight !important;
display : inline;
display: inline;
position: absolute;
right: 4px;
top: 12px;
transform: translate(0px, 0px) scale(1) !important;
}
.MuiInputLabel-shrink{
display : inline;
.MuiInputLabel-shrink {
display: inline;
position: absolute;
right: -23px;
top: -8px;
transform: translate(0px, 0px) scale(0.75) !important;
}
label{
label {
background-color: white;
max-width: 120px;
text-align: center;
@ -136,7 +136,7 @@
background-color: #1bbc6e;
color: white;
border-radius: 5px;
padding : 7px 50px;
padding: 7px 50px;
margin-right: 20px;
}
}

@ -29,6 +29,8 @@ import qr from "~/assets/icons/qr.svg";
import myBook from "~/assets/images/myBook.png";
import homeBlog from "~/assets/images/homeBlog.png";
import bookActivation from "~/assets/images/bookActivating.png";
import home_chat from "~/assets/icons/home_chat.png";
import home_ar from "~/assets/icons/home_ar(2).png";
import "./index.scss";
export default class Home extends Component {
@ -185,7 +187,7 @@ Home.defaultProps = {
},
{
id: 1,
imageUrl: ar,
imageUrl: home_ar,
backgroundColor: {
first: "#09DA76",
second: "#056D3B",
@ -209,7 +211,7 @@ Home.defaultProps = {
data: [
{
id: 0,
imageUrl: qr,
imageUrl: home_chat,
backgroundColor: {
first: "#0AB81B",
second: "#6CFF61",

@ -1,19 +1,18 @@
.home{
.home {
width: 100vw;
max-width: 1250px;
margin: 0px auto;
padding : 0px 10px;
padding: 0px 10px;
direction: rtl;
padding-top: 100px;
}
.mobile-home{
.mobile-home {
width: 100vw;
max-width: 600px;
margin: 0px auto;
padding: 0px 10px;
direction: rtl;
overflow-x: hidden;
padding-top: 70px;
padding-top: 90px;
}

@ -34,10 +34,10 @@ const fontSize = {
mobile: {
h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 18,
h2: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 24,
h3: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 22,
h3: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 26,
a: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 26,
p: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 30,
li: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 26,
li: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 29,
},
};
export default class Product extends Component {

@ -99,6 +99,9 @@
padding: 20px 10px;
background-color: #1f6fb528;
border-radius: 10px;
background: url(../../assets/icons/danger_lg.png) no-repeat #1f6fb528;
background-size: 60px;
background-position: 18px 50%;
h3 {
font-family: numeralBold;
color: #074f8b;

@ -1,32 +1,57 @@
import React from 'react';
import React from "react";
import './index.scss';
export default function Links(props){
return(
<>
{
window.innerWidth > 1000 ?
<div className="links-box d-flex flex-column" id="links">
<h2>{props.data.title}</h2>
</div> : null
}
{
window.innerWidth < 1000 ?
<div className="mobile-links-box d-flex flex-column" id="links">
<h2><span></span>لینکها</h2>
<ul>
{props.data.links.map((item,i) => (
<Item data={item} key={i} />
) )}
</ul>
</div> : null
}
</>
);
import "./index.scss";
const maxDesktopSize = 1250;
const maxMobileSize = 550;
const fontSize = {
mobile: {
h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 25,
a: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 32,
},
desktop: {
h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 75,
a: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 95,
},
};
export default function Links(props) {
return (
<>
{window.innerWidth > 1000 ? (
<div className="links-box d-flex flex-column" id="links">
<h2 style={{ fontSize: fontSize.desktop.h2 }}>{props.data.title}</h2>
</div>
) : null}
{window.innerWidth < 1000 ? (
<div className="mobile-links-box d-flex flex-column" id="links">
<h2 style={{ fontSize: fontSize.mobile.h2 }}>
<span></span>لینکها
</h2>
<ul>
{props.data.links.map((item, i) => (
<Item data={item} key={i} />
))}
</ul>
</div>
) : null}
</>
);
}
const Item = (props) => {
return(
<li><a href={props.data.link}>{props.data.title}</a></li>
);
}
return (
<li>
<a
style={{
fontSize:
window.innerWidth > 1000 ? fontSize.desktop.a : fontSize.mobile.a,
}}
href={props.data.link}
>
{props.data.title}
</a>
</li>
);
};

@ -1,16 +1,18 @@
.mobile-links-box{
.mobile-links-box {
width: 100%;
border-radius: 10px;
background-color: #fffac948;
margin: 15px 0px;
background-color: #fffac948;
text-decoration: none;
padding: 20px 10px;
h2{
background: url(../../../assets/icons/attachment.svg) no-repeat #fffac948;
background-size: 50px 50px;
background-position: 10px 50%;
h2 {
font-family: numeralMedium;
font-size: calc(100vw / 32);
color: #72891edc;
padding: 5px;
span{
span {
width: 10px;
height: 10px;
border-radius: 50%;
@ -18,15 +20,15 @@
margin-left: 5px;
}
}
ul{
ul {
padding: 0px;
margin: 0px;
list-style: none;
padding-right: 15px;
li{
font-size: calc(100vw / 30);
a{
li {
a {
text-decoration: none;
font-family: numeralLight;
color: #72891e;
}
}

@ -1,32 +1,34 @@
.mobile-pdf-box{
.mobile-pdf-box {
width: 100%;
border-radius: 10px;
background-color:#ffa9a91e;
background-color: #ffa9a91e;
margin: 15px 0px;
text-decoration: none;
height: calc(100vh / 9);
padding: 20px 10px;
h2{
background: url(../../../assets/icons/pdf.svg) no-repeat #ffa9a91e;
background-size: 50px;
background-position: 18px 50%;
h2 {
font-family: numeralMedium;
font-size: calc(100vw / 32);
color: #FF0808;
color: #ff0808;
padding: 5px;
span{
span {
width: 7px;
height: 7px;
border-radius: 50%;
background-color: #ffa9a925;
background-color: #ff0808;
margin-left: 5px;
}
}
}
.pdf-box{
.pdf-box {
width: 100%;
border-radius: 10px;
max-width: 400px;
background-color:#ffa9a91e;
background-color: #ffa9a91e;
margin: 15px auto;
text-decoration: none;
height: calc(100vh / 9);
@ -34,17 +36,16 @@
background: url(../../../assets/icons/pdf.svg) no-repeat #ffa9a91e;
background-size: 45px;
background-position: 18px 50%;
h2{
h2 {
font-family: numeralMedium;
color: #FF0808;
color: #ff0808;
padding: 5px;
span{
span {
width: 7px;
height: 7px;
border-radius: 50%;
background-color: #FF0808;
background-color: #ff0808;
margin-left: 5px;
}
}
}

@ -1,31 +1,34 @@
.mobile-ppt-box{
.mobile-ppt-box {
width: 100%;
border-radius: 10px;
background-color : #8dfaf61f;
background-color: #8dfaf61f;
margin: 15px 0px;
text-decoration: none;
height: calc(100vh / 9);
padding: 20px 10px;
h2{
background: url(../../../assets/icons/ppt.png) no-repeat #8dfaf61f;
background-size: 50px;
background-position: 18px 50%;
h2 {
font-family: numeralMedium;
font-size: calc(100vw / 32);
color: #0D9189;
color: #0d9189;
padding: 5px;
span{
span {
width: 7px;
height: 7px;
border-radius: 50%;
background-color: #0D9189;
background-color: #0d9189;
margin-left: 5px;
}
}
}
.ppt-box{
.ppt-box {
width: 100%;
max-width: 400px;
border-radius: 10px;
background-color : #8dfaf61f;
background-color: #8dfaf61f;
margin: 15px auto;
text-decoration: none;
height: calc(100vh / 9);
@ -33,15 +36,15 @@
background: url(../../../assets/icons/ppt.svg) no-repeat #8dfaf61f;
background-size: 45px;
background-position: 18px 50%;
h2{
h2 {
font-family: numeralMedium;
color: #0D9189;
color: #0d9189;
padding: 5px;
span{
span {
width: 7px;
height: 7px;
border-radius: 50%;
background-color: #0D9189;
background-color: #0d9189;
margin-left: 5px;
}
}

@ -55,7 +55,7 @@
position: fixed;
top: 100px;
right: 0px;
&--media{
&--media {
width: 100%;
height: 50px;
border-top-left-radius: 8px;
@ -63,35 +63,35 @@
transform: translateY(120px);
margin-top: 10px;
}
&--voice{
background: url(../../assets/icons/play.svg) no-repeat #A2FFC1;
&--voice {
background: url(../../assets/icons/play.svg) no-repeat #a2ffc1;
background-size: 21px;
background-position: center center;
}
&--video{
background: url(../../assets/icons/video-player.svg) no-repeat #88A7FF;
&--video {
background: url(../../assets/icons/video-player.svg) no-repeat #88a7ff;
background-size: 21px;
background-position: center center;
}
&--ppt{
background: url(../../assets/icons/ppt.svg) no-repeat #BCFFEF;
&--ppt {
background: url(../../assets/icons/ppt.png) no-repeat #bcffef;
background-size: 21px;
background-position: center center;
}
&--pdf{
background: url(../../assets/icons/pdf.svg) no-repeat #FFA9A9;
&--pdf {
background: url(../../assets/icons/pdf.svg) no-repeat #ffa9a9;
background-size: 21px;
background-position: center center;
}
&--attachment{
background: url(../../assets/icons/attachment.svg) no-repeat #FBFF7C;
&--attachment {
background: url(../../assets/icons/attachment.svg) no-repeat #fbff7c;
background-size: 21px;
background-position: center center;
}
& button{
& button {
font-family: numeralLight;
color: #82791E;
background-color: #FCFFA2;
color: #82791e;
background-color: #fcffa2;
border: 0px;
padding: 10px 10px;
font-size: 14px;
@ -183,7 +183,7 @@
width: 130px;
justify-content: space-between;
span {
cursor: pointer;
cursor: pointer;
width: 30px;
height: 30px;
background-color: #ddd;

Loading…
Cancel
Save