reza added last version1

master
RezaAshrafi77 3 years ago
parent 9368cfcf96
commit 1e2ab85cdc
  1. 97
      src/AppRouter.js
  2. 60
      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. 12
      src/views/Auth/Login/Code/index.scss
  13. 3
      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. 35
      src/views/Auth/Profile/Input/index.js
  19. 23
      src/views/Auth/Profile/Select/index.js
  20. 16
      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. 71
      src/views/Auth/Profile/index.scss
  24. 4
      src/views/Auth/index.js
  25. 8
      src/views/Home/HomeStatic/index.scss
  26. 4
      src/views/Home/Membership/index.scss
  27. 6
      src/views/Home/index.js
  28. 3
      src/views/Home/index.scss
  29. 4
      src/views/Product/index.js
  30. 3
      src/views/Product/index.scss
  31. 53
      src/views/QR/Links/index.js
  32. 8
      src/views/QR/Links/index.scss
  33. 13
      src/views/QR/PDF/index.scss
  34. 11
      src/views/QR/PowerPoint/index.scss
  35. 14
      src/views/QR/index.scss

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

@ -1,36 +1,52 @@
import proxy from '../proxy'; import proxy from "../proxy";
const user = { const user = {
otp: (data, history) => async (dispatch) => 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) => 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) => 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) => 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) => 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) => getUserRole: (data) => async (dispatch) =>
await proxy.get('user/getUserRole', data, { dispatch }), await proxy.get("user/getUserRole", data, { dispatch }),
list: (data = {}) => async (dispatch) => list:
await proxy.get('user/list', data, { dispatch }), (data = {}) =>
domains: (data = {}) => async (dispatch) => async (dispatch) =>
await proxy.get('user/domains', data, { dispatch }), await proxy.get("user/list", data, { dispatch }),
getmothers: (data = {}) => async (dispatch) => domains:
await proxy.get2('mothers/list', data, { (data = {}) =>
async (dispatch) =>
await proxy.get("user/domains", data, { dispatch }),
getmothers:
(data = {}) =>
async (dispatch) =>
await proxy.get2("mothers/list", data, {
dispatch, dispatch,
}), }),
update: (data = {}, data2 = {}) => async (dispatch) => { getProfile:
await proxy.put('user/update', data); (data = {}) =>
await proxy.get('user/list', data2, { dispatch }); 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) => { add:
await proxy.post('user/add', data); (data = {}, data2 = {}) =>
await proxy.get('user/list', data2, { dispatch }); async (dispatch) => {
await proxy.post("user/add", data);
await proxy.get("user/list", data2, { dispatch });
}, },
del: (data = {}, data2 = {}) => async (dispatch) => { del:
await proxy.delete('user/delete', data); (data = {}, data2 = {}) =>
await proxy.get('user/list', data2, { dispatch }); async (dispatch) => {
await proxy.delete("user/delete", data);
await proxy.get("user/list", data2, { dispatch });
}, },
}; };

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

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

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

@ -16,8 +16,8 @@
width: 100%; width: 100%;
max-width: 300px; max-width: 300px;
border: 0px; border: 0px;
font-family: numeralMedium; font-family: numeralLight;
background-color: #6CBE44; background-color: #6cbe44;
color: white; color: white;
border-radius: 7px; border-radius: 7px;
padding: 8px; padding: 8px;
@ -30,17 +30,19 @@
background-color: #f2f2f2; background-color: #f2f2f2;
border: 0px; border: 0px;
margin: 0px 10px; margin: 0px 10px;
color: #6F7074; color: #6f7074;
text-align: center; text-align: center;
direction: ltr; direction: ltr;
border-radius: 5px; border-radius: 5px;
padding: 10px 15px; padding: 10px 15px;
font-family: numeralLight;
&:focus { &:focus {
outline: 0px; outline: 0px;
} }
} }
div { div {
letter-spacing: -1px; letter-spacing: -1px;
font-family: numeralLight;
} }
} }
} }
@ -81,7 +83,7 @@
max-width: 300px; max-width: 300px;
border: 0px; border: 0px;
font-family: numeralMedium; font-family: numeralMedium;
background-color: #6CBE44; background-color: #6cbe44;
color: white; color: white;
border-radius: 7px; border-radius: 7px;
padding: 8px; padding: 8px;
@ -95,7 +97,7 @@
background-color: #f2f2f2; background-color: #f2f2f2;
border: 0px; border: 0px;
margin: 0px 10px; margin: 0px 10px;
color: #6F7074; color: #6f7074;
text-align: center; text-align: center;
direction: ltr; direction: ltr;
font-size: calc(100vw / 15); font-size: calc(100vw / 15);

@ -2,5 +2,6 @@
flex-direction: row; flex-direction: row;
direction: rtl !important; direction: rtl !important;
margin-right: 10px; margin-right: 10px;
color: #6CBE44; color: #6cbe44;
font-family: numeralLight;
} }

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

@ -19,7 +19,13 @@ class Login extends Component {
async componentDidUpdate() { async componentDidUpdate() {
const { cellphone, otp, page } = this.state; const { cellphone, otp, page } = this.state;
if (cellphone && !otp) this.props.otp({ cellphone }); 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 = () => { 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 React from "react";
import TextField from '@material-ui/core/TextField'; import TextField from "@material-ui/core/TextField";
import { makeStyles } from '@material-ui/core/styles'; import { makeStyles } from "@material-ui/core/styles";
export default function FormPropsTextFields(props) {
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
root: { root: {
'& .MuiTextField-root': { "& .MuiTextField-root": {
width: "100%",
width: '100%', position: "relative",
position : 'relative',
marginRight: 10, marginRight: 10,
"& input": {
textAlign: props.align,
direction: props.align === "right" ? "rtl" : "ltr",
},
}, },
}, },
})); }));
export default function FormPropsTextFields(props) {
const classes = useStyles(); const classes = useStyles();
const { parent, defaultValue } = props;
return ( return (
<form className={classes.root} noValidate autoComplete="off"> <form className={classes.root} noValidate autoComplete="off">
<div> <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> </div>
</form> </form>
); );
} }
FormPropsTextFields.defaultProps = {
align: "right",
};

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

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

@ -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 React, { Component } from "react";
import { user } from "~/Redux/actions";
import { connect } from "react-redux";
import Select from "./Select/index"; import Select from "./Select/index";
import Input from "./Input/index"; import Input from "./Input/index";
import TextArea from "./TextArea/index"; import TextArea from "./TextArea/index";
import Upload from "./Upload/index";
import logo from "../../../assets/icons/logo.png"; import logo from "../../../assets/icons/logo.png";
import pic from "../../../assets/images/pic.png"; import pic from "../../../assets/images/pic.png";
import AddAPhotoIcon from "@material-ui/icons/AddAPhoto";
import "./index.scss"; import "./index.scss";
@ -14,20 +17,54 @@ const maxDesktopSize = 1250;
const fontSize = { const fontSize = {
desktop: { desktop: {
h1: window.innerWidth > maxDesktopSize ? 25 : window.innerWidth / 55, 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 = { state = {
file: null, 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({ 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() { render() {
const { user } = this.props; const { user, profile } = this.props;
return ( return (
<> <>
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
@ -37,19 +74,60 @@ export default class Profile extends Component {
<p style={{ fontSize: fontSize.desktop.p }}> <p style={{ fontSize: fontSize.desktop.p }}>
لطفا مشخصات خود را به صورت کامل نمایید. لطفا مشخصات خود را به صورت کامل نمایید.
</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 style={{ width: "48%" }}>
<div className="mb-2 d-flex justify-content-center">
<Upload name="file" parent={this} />
</div>
<div className="mb-2"> <div className="mb-2">
<Input name="name" label="نام و نام خانوادگی" /> <Input
name="firstName"
label="نام"
parent={this}
defaultValue={profile.firstName}
/>
</div> </div>
<div className="mb-2"> <div className="mb-2">
<Input name="username" label="نام کاربری" /> <Input
name="lastName"
label="نام و نام خانوادگی"
parent={this}
defaultValue={profile.lastName}
/>
</div> </div>
<div className="mb-2"> <div className="mb-2">
<Input name="password" label="رمز عبور" /> <Input
name="username"
label="نام کاربری"
parent={this}
defaultValue={profile.username}
align="left"
/>
</div> </div>
{/* <div className="mb-2">
<Input name="password" label="رمز عبور" parent={this} />
</div> */}
</div> </div>
<div style={{ width: "48%" }}> <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%" }}> <div className="mb-2" style={{ minWidth: "100%" }}>
<Select <Select
parent={this} parent={this}
@ -66,13 +144,6 @@ export default class Profile extends Component {
label={"شهرستان"} label={"شهرستان"}
/> />
</div> </div>
<div className="mb-2">
<TextArea
parent={this}
label={"آدرس محل سکونت"}
name="address"
/>
</div>
<div className="auth-profile__box--form__footer d-flex justify-content-center"> <div className="auth-profile__box--form__footer d-flex justify-content-center">
<button>ذخیره</button> <button>ذخیره</button>
</div> </div>
@ -86,29 +157,7 @@ export default class Profile extends Component {
<img src={logo} alt="دانوین" /> <img src={logo} alt="دانوین" />
<h1>حساب کاربری</h1> <h1>حساب کاربری</h1>
<p>لطفا مشحصات خود را به صورت کامل وارد نمایید</p> <p>لطفا مشحصات خود را به صورت کامل وارد نمایید</p>
<div className="mobile-auth-profile__upload d-flex justify-content-center align-items-center mb-3"> <Upload name="file" />
{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>
<Input name="name" label="نام و نام خانوادگی" /> <Input name="name" label="نام و نام خانوادگی" />
<Input name="username" label="نام کاربری" /> <Input name="username" label="نام کاربری" />
<Input name="password" label="رمز عبور" /> <Input name="password" label="رمز عبور" />
@ -126,7 +175,7 @@ export default class Profile extends Component {
/> />
<TextArea parent={this} label={"آدرس محل سکونت"} name="address" /> <TextArea parent={this} label={"آدرس محل سکونت"} name="address" />
<div className="mobile-auth-profile__footer d-flex justify-content-center"> <div className="mobile-auth-profile__footer d-flex justify-content-center">
<button>ذخیره</button> <button onClick={() => this.onSubmit()}>ذخیره</button>
</div> </div>
</div> </div>
) : null} ) : 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 = { Profile.defaultProps = {
user: { user: {
name: "باربی", name: "اکبر",
icon: pic, icon: pic,
description: "", description: "",
}, },

@ -11,7 +11,7 @@
margin-top: 15px; margin-top: 15px;
font-family: numeralBold; font-family: numeralBold;
font-size: calc(100vw / 15); font-size: calc(100vw / 15);
color: #6F7074; color: #6f7074;
letter-spacing: -1px; letter-spacing: -1px;
} }
p { p {
@ -110,7 +110,7 @@
label { label {
background-color: white; background-color: white;
max-width: 120px; width: fit-content;
text-align: center; text-align: center;
font-size: calc(100vw / 25) !important; font-size: calc(100vw / 25) !important;
color: #797979 !important; color: #797979 !important;
@ -144,7 +144,6 @@
} }
} }
.auth-profile { .auth-profile {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
@ -156,22 +155,56 @@
h1 { h1 {
margin-top: 15px; margin-top: 15px;
font-family: numeralBold; font-family: numeralBold;
color: #6F7074; color: #6f7074;
letter-spacing: -1px; letter-spacing: -1px;
} }
p { p {
font-family: numeralLight; font-family: numeralLight;
color: #6f7074; color: #6f7074;
letter-spacing: -1px;
text-align: justify; text-align: justify;
} }
&--form { &--form {
margin-top: 20px; margin-top: 20px;
width: 100%; width: 100%;
justify-content: space-between; 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 { .MuiFormControl-root {
width: 100%; width: 100%;
margin: 10px auto !important; margin: 10px auto !important;
option {
font-family: numeralLight !important;
}
.MuiSelect-iconOutlined { .MuiSelect-iconOutlined {
display: none; display: none;
} }
@ -187,20 +220,18 @@
border-color: #cecece !important; border-color: #cecece !important;
border-width: 1px !important; border-width: 1px !important;
color: green !important; color: green !important;
font-size: calc(100vw / 80) !important;
border-radius: 10px !important; border-radius: 10px !important;
} }
.MuiOutlinedInput-input { .MuiOutlinedInput-input {
padding: 20px 14px !important; padding: 20px 14px !important;
font-size: calc(100vw / 85) !important;
} }
.MuiInputLabel-outlined { .MuiInputLabel-outlined {
font-family: numeralLight !important; font-family: numeralLight !important;
display: inline !important; display: inline !important;
position: absolute; position: absolute;
text-align: right !important; text-align: right !important;
right: 7px; right: 10px;
top: 20px; top: 20px;
padding: 0px !important; padding: 0px !important;
transform: translate(0px, 0px) scale(1) !important; transform: translate(0px, 0px) scale(1) !important;
@ -209,19 +240,20 @@
text-align: center !important; text-align: center !important;
display: inline; display: inline;
position: absolute; position: absolute;
right: 0px; right: 10px;
top: -8px; top: -8px;
transform: translate(0px, 0px) scale(0.85) !important; transform: translate(0px, 0px) scale(0.85) !important;
padding-right: 0px !important; padding: 0px 5px !important;
} }
label { label {
background-color: white; background-color: white;
max-width: 120px; width: fit-content !important;
text-align: center; text-align: center;
font-size: calc(100vw / 85) !important; color: #797979;
color: #797979 !important;
letter-spacing: -1px; letter-spacing: -1px;
padding: 0px 5px !important;
// transform: translateX(-20px);
} }
.Mui-focused { .Mui-focused {
color: rgba(0, 0, 0, 0.54) !important; color: rgba(0, 0, 0, 0.54) !important;
@ -239,10 +271,9 @@
button { button {
font-family: numeralLight; font-family: numeralLight;
border: 0px; border: 0px;
background-color: #00CC69; background-color: #00cc69;
border-radius: 7px; border-radius: 7px;
font-size: 18px; font-size: 18px;
font-weight: 600;
color: white; color: white;
padding: 12px 0px; padding: 12px 0px;
width: 100%; width: 100%;
@ -251,3 +282,13 @@
} }
} }
} }
.MuiMenu-list {
option {
font-family: numeralLight !important;
padding: 5px 5px !important;
}
}
.MuiSelect-root {
font-family: numeralLight !important;
}

@ -34,5 +34,5 @@ export default class Auth extends Component {
} }
Auth.defaultProps = { Auth.defaultProps = {
page: 'login' page: "login",
} };

@ -26,7 +26,6 @@
} }
} }
.mobile-home-static { .mobile-home-static {
&__flex { &__flex {
padding: 20px 10px; padding: 20px 10px;
@ -34,10 +33,9 @@
text-decoration: none; text-decoration: none;
img { img {
// margin-right: 20px; // margin-right: 20px;
max-height: 55px; width: 30%;
max-width: 55px;
width: 40%;
height: 70%; height: 70%;
transform: scale(1.3);
} }
&--right { &--right {
margin-left: 10px; margin-left: 10px;
@ -47,6 +45,7 @@
} }
span { span {
letter-spacing: -1px; letter-spacing: -1px;
font-family: numeralLight;
} }
} }
} }
@ -90,6 +89,5 @@
margin: 0px; margin: 0px;
} }
} }
} }
} }

@ -48,11 +48,12 @@
right: -23px; right: -23px;
top: -8px; top: -8px;
transform: translate(0px, 0px) scale(0.75) !important; transform: translate(0px, 0px) scale(0.75) !important;
width: fit-content !important;
padding: 0px 5px !important;
} }
label { label {
background-color: white; background-color: white;
max-width: 120px;
text-align: center; text-align: center;
font-size: 14px !important; font-size: 14px !important;
} }
@ -69,7 +70,6 @@
} }
} }
.mobile-membership { .mobile-membership {
width: 100%; width: 100%;
padding: 15px 20px; padding: 15px 20px;

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

@ -7,7 +7,6 @@
padding-top: 100px; padding-top: 100px;
} }
.mobile-home { .mobile-home {
width: 100vw; width: 100vw;
max-width: 600px; max-width: 600px;
@ -15,5 +14,5 @@
padding: 0px 10px; padding: 0px 10px;
direction: rtl; direction: rtl;
overflow-x: hidden; overflow-x: hidden;
padding-top: 70px; padding-top: 90px;
} }

@ -34,10 +34,10 @@ const fontSize = {
mobile: { mobile: {
h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 18, h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 18,
h2: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 24, 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, a: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 26,
p: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 30, 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 { export default class Product extends Component {

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

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

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

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

@ -6,16 +6,19 @@
text-decoration: none; text-decoration: none;
height: calc(100vh / 9); height: calc(100vh / 9);
padding: 20px 10px; padding: 20px 10px;
background: url(../../../assets/icons/ppt.png) no-repeat #8dfaf61f;
background-size: 50px;
background-position: 18px 50%;
h2 { h2 {
font-family: numeralMedium; font-family: numeralMedium;
font-size: calc(100vw / 32); font-size: calc(100vw / 32);
color: #0D9189; color: #0d9189;
padding: 5px; padding: 5px;
span { span {
width: 7px; width: 7px;
height: 7px; height: 7px;
border-radius: 50%; border-radius: 50%;
background-color: #0D9189; background-color: #0d9189;
margin-left: 5px; margin-left: 5px;
} }
} }
@ -35,13 +38,13 @@
background-position: 18px 50%; background-position: 18px 50%;
h2 { h2 {
font-family: numeralMedium; font-family: numeralMedium;
color: #0D9189; color: #0d9189;
padding: 5px; padding: 5px;
span { span {
width: 7px; width: 7px;
height: 7px; height: 7px;
border-radius: 50%; border-radius: 50%;
background-color: #0D9189; background-color: #0d9189;
margin-left: 5px; margin-left: 5px;
} }
} }

@ -64,34 +64,34 @@
margin-top: 10px; margin-top: 10px;
} }
&--voice { &--voice {
background: url(../../assets/icons/play.svg) no-repeat #A2FFC1; background: url(../../assets/icons/play.svg) no-repeat #a2ffc1;
background-size: 21px; background-size: 21px;
background-position: center center; background-position: center center;
} }
&--video { &--video {
background: url(../../assets/icons/video-player.svg) no-repeat #88A7FF; background: url(../../assets/icons/video-player.svg) no-repeat #88a7ff;
background-size: 21px; background-size: 21px;
background-position: center center; background-position: center center;
} }
&--ppt { &--ppt {
background: url(../../assets/icons/ppt.svg) no-repeat #BCFFEF; background: url(../../assets/icons/ppt.png) no-repeat #bcffef;
background-size: 21px; background-size: 21px;
background-position: center center; background-position: center center;
} }
&--pdf { &--pdf {
background: url(../../assets/icons/pdf.svg) no-repeat #FFA9A9; background: url(../../assets/icons/pdf.svg) no-repeat #ffa9a9;
background-size: 21px; background-size: 21px;
background-position: center center; background-position: center center;
} }
&--attachment { &--attachment {
background: url(../../assets/icons/attachment.svg) no-repeat #FBFF7C; background: url(../../assets/icons/attachment.svg) no-repeat #fbff7c;
background-size: 21px; background-size: 21px;
background-position: center center; background-position: center center;
} }
& button { & button {
font-family: numeralLight; font-family: numeralLight;
color: #82791E; color: #82791e;
background-color: #FCFFA2; background-color: #fcffa2;
border: 0px; border: 0px;
padding: 10px 10px; padding: 10px 10px;
font-size: 14px; font-size: 14px;

Loading…
Cancel
Save