eslint

4 years ago · c4c16adeb3
parent ab8c506dd5
commit c4c16adeb3
77 changed files with 3040 additions and 2449 deletions
--- a/.eslintignore
+++ b/.eslintignore
@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
--- a/.eslintrc
+++ b/.eslintrc
@ -0,0 +1,19 @@
+{
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "experimentalDecorators": true,
+      "jsx": true
+    },
+    "sourceType": "module"
+  },
+  "ecmaFeatures": {
+    "es6": true,
+    "airbnb": true
+  },
+  "rules": {
+    "semi": 2
+  }
+  // more configuration options here!
+}
--- a/.prettierignore
+++ b/.prettierignore
@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
--- a/.prettierrc
+++ b/.prettierrc
@ -0,0 +1,16 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "overrides": [
+    {
+      "files": ["*.html", "*.css", "*.scss"]
+    }
+  ],
+  "no-multiple-empty-lines": [
+    {
+      "max": 1
+    }
+  ]
+}
--- a/package.json
+++ b/package.json
@ -12,10 +12,12 @@
    "array-move": "^3.0.1",
    "audio-react-recorder": "^1.0.4",
    "axios": "^0.21.1",
+    "babel-eslint": "^10.1.0",
    "bootstrap": "^4.6.0",
    "jalali-moment": "^3.3.10",
    "leaflet": "^1.7.1",
    "node-sass": "^5.0.0",
+    "prettier": "^2.3.0",
    "react": "^17.0.2",
    "react-audio-player": "^0.17.0",
    "react-dom": "^17.0.2",
@ -37,17 +39,27 @@
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+    "eject": "react-scripts eject",
+    "prettier": "prettier --write \"**/*\"",
+    "eslint": "eslint \"**/*.js\""
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not op_mini all"
-  ]
+  ],
+  "devDependencies": {
+    "@imaginary-cloud/eslint-config-react": "1.0.1",
+    "eslint": "^7.15.0",
+    "eslint-config-airbnb": "18.1.0",
+    "eslint-config-airbnb-base": "^14.2.1",
+    "eslint-config-prettier": "^7.0.0",
+    "eslint-import-resolver-babel-module": "^5.2.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "6.2.3",
+    "eslint-plugin-prettier": "^3.3.0",
+    "eslint-plugin-react": "7.19.0",
+    "eslint-plugin-react-hooks": "2.5.1",
+    "prettier": "^2.2.1"
+  }
 }
--- a/public/index.html
+++ b/public/index.html
@ -5,10 +5,7 @@
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
+    <meta name="description" content="Web site created using create-react-app" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
@ -25,9 +22,12 @@
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
-    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
-    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
-    crossorigin="" />
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
+      integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
+      crossorigin=""
+    />
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
--- a/src/App.css
+++ b/src/App.css
@ -1,11 +1,10 @@
-@import "assets/IRANSans/WebFonts/css/fontiran.css";
+@import 'assets/IRANSans/WebFonts/css/fontiran.css';

 .App {
  text-align: center;
 }

-#root{
-
+#root {
 }

 .App-logo {
@ -43,12 +42,11 @@
  }
 }

-a{
-  color:  black  !important;
+a {
+  color: black !important;
 }

-
-*{
+* {
  font-family: IRANSansNumeral !important;
  box-sizing: border-box !important;
 }
@ -56,5 +54,4 @@ a{
@font-face {
  font-family: IRANSansNumeral;
  src: url(assets/IRANSans/Farsi_numerals/IRANSans\(FaNum\)_Light.ttf);
-} 
-
+}
--- a/src/App.js
+++ b/src/App.js
@ -1,12 +1,10 @@
-import React,{Component} from 'react';
-import AppRouter from "./Router";
+import React, { Component } from 'react';
+import AppRouter from './Router';

 class App extends Component {
-  render(){
-    return (
-      <AppRouter />
-    );
+  render() {
+    return <AppRouter />;
  }
 }

-export default App;
+export default App;
--- a/src/Redux/Reducers/Reduce.js
+++ b/src/Redux/Reducers/Reduce.js
@ -1,6 +1,3 @@
-import { combineReducers } from "redux";
+import { combineReducers } from 'redux';

-
-export default combineReducers({
-  
-});
+export default combineReducers({});
--- a/src/Redux/proxy.js
+++ b/src/Redux/proxy.js
@ -1,50 +1,51 @@
-import axios from 'axios'
+import axios from 'axios';
+import { toast } from 'react-toastify';
+const baseURL = 'http://localhost:4040/api/v1'; //"https://chatstory.ir/api/v1";
+const token = '';
+const loginURL = 'user/otp/login';
+const logoutURL = 'user/logout';
 const Axios = axios.create({
-    withCredentials: true,
-    validateStatus:null,
-    baseURL: "https://chatstory.ir/api/v1"
-   // baseURL: "http://localhost:4040/api/v1"
- })
- class Proxy{
-     constructor({alert,loginUrl}={}){
-         this.alert = alert || window.alert;
-         this.loginUrl = loginUrl || "user/otp/login";
-     }
-    get = (url,params,opt={})=> this.check(()=>Axios.get(url,{params,...opt}));
-    post = (url,params,opt={})=>  this.check(()=>Axios.post(url,params,opt));
-    put = (url,params,opt={})=>  this.check(()=> Axios.put(url,params,opt));
-    delete = (url,params,opt={})=>  this.check(()=> Axios.delete(url,params,opt));
-    check = async (fetch)=>{
-        let response = await fetch()
-        switch(response.status){
-            case 200: return response.data.data; 
-            case 401: 
-                console.log("refreshing")
-                if(await this.refresh()) return (await fetch()).data.data;
-                break;
-            default:  window.alert(response.data.message);
-        }
-        return false;
+  withCredentials: true,
+  validateStatus: null,
+  baseURL,
+});
+class Proxy {
+  get = (url, params, opt = {}) => this.check(() => Axios.get(url, { params, ...opt }));
+  post = (url, params, opt = {}) => this.check(() => Axios.post(url, params, opt));
+  put = (url, params, opt = {}) => this.check(() => Axios.put(url, params, opt));
+  delete = (url, params, opt = {}) => this.check(() => Axios.delete(url, params, opt));
+  check = async (fetch) => {
+    let response = await fetch();
+    switch (response.status) {
+      case 200:
+        return response.data.data;
+      case 401:
+        if (await this.refresh()) return (await fetch()).data.data;
+        break;
+      default:
+        toast(response.data.message);
    }
-    refresh = async()=>{
-        let refresh = localStorage.getItem('refresh')
-        if(!refresh) window.location.href = "/"
-        let login = await this.login({},{headers: { "Authorization": `Bearer ${refresh}`}})
-        return login ? true : false 
-    }
-    login = async(data,opt={})=>{
-      const login = await this.post(this.loginUrl,data,opt)
-      if(!login) return false;
-      localStorage.setItem("refresh",login.refreshToken)
-      delete login.refreshToken
-      return login
-    }
-    logout = async()=>{
-        localStorage.removeItem("refresh");
-        window.location.href = "/"
-    }
-    status = ()=>localStorage.getItem("refresh")?true:false;
-    
- }
- const _proxy = new Proxy()
- export default _proxy;
+    return false;
+  };
+  refresh = async () => {
+    let refresh = localStorage.getItem('refresh');
+    if (!refresh) window.location.href = '/';
+    let login = await this.login({}, { headers: { Authorization: `Bearer ${refresh}` } });
+    return login ? true : false;
+  };
+  login = async (data, opt = { headers: { Authorization: `Bearer ${token}` } }) => {
+    const login = await this.post(loginURL, data, opt);
+    if (!login) return false;
+    localStorage.setItem('refresh', login.refreshToken);
+    delete login.refreshToken;
+    return login;
+  };
+  logout = async () => {
+    this.post(logoutURL);
+    localStorage.removeItem('refresh');
+    window.location.href = '/';
+  };
+  status = () => (localStorage.getItem('refresh') ? true : false);
+}
+const _proxy = new Proxy();
+export default _proxy;
--- a/src/Redux/store.js
+++ b/src/Redux/store.js
@ -1,7 +1,7 @@
-import { createStore, applyMiddleware } from "redux";
-import { composeWithDevTools } from "redux-devtools-extension";
-import rootReducer from "./Reducers/Reduce";
-import thunk from "redux-thunk";
+import { createStore, applyMiddleware } from 'redux';
+import { composeWithDevTools } from 'redux-devtools-extension';
+import rootReducer from './Reducers/Reduce';
+import thunk from 'redux-thunk';

 const initialState = {};

@ -13,4 +13,4 @@ const store = createStore(
  composeWithDevTools(applyMiddleware(...middleware))
 );

-export default store;
+export default store;
--- a/src/Router.js
+++ b/src/Router.js
@ -1,38 +1,40 @@
 import React, { Component } from 'react';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
-import store from "./Redux/store";
-import { Provider } from "react-redux";
+import store from './Redux/store';
+import { Provider } from 'react-redux';

-import Home from "./views/Home/Home";
-import ChatRoom from "./views/ChatRoom/ChatRoom";
-import Auth from "./views/Auth/Auth";
-import proxy from "./Redux/proxy";
+import Home from './views/Home/Home';
+import ChatRoom from './views/ChatRoom/ChatRoom';
+import Auth from './views/Auth/Auth';
+import proxy from './Redux/proxy';
 export default class AppRouter extends Component {
-	render() {
-		let home;
-		if(proxy.status()){
-			home = <Route exact path={'/'}>			
-			<Home />	
-		</Route> 
-		}else{
-			home = <Route exact path={'/'}>			
-				<Auth />
-		</Route> 
-		}
-		return (
-			<Provider store={store} >
-						<Router>
-							<Switch>
-								{home}
-							</Switch>
-              <Route exact path={`/chatroom/:id`}>			
-                <ChatRoom />	
-              </Route> 
-							<Route exact path={'/auth'}>			
-									<Auth />
-							</Route> 
-						</Router> 
-			</Provider>
-		)
-	}
-}
+  render() {
+    let home;
+    if (proxy.status()) {
+      home = (
+        <Route exact path={'/'}>
+          <Home />
+        </Route>
+      );
+    } else {
+      home = (
+        <Route exact path={'/'}>
+          <Auth />
+        </Route>
+      );
+    }
+    return (
+      <Provider store={store}>
+        <Router>
+          <Switch>{home}</Switch>
+          <Route exact path={`/chatroom/:id`}>
+            <ChatRoom />
+          </Route>
+          <Route exact path={'/auth'}>
+            <Auth />
+          </Route>
+        </Router>
+      </Provider>
+    );
+  }
+}
--- a/src/assets/IRANSans/Farsi_numerals/webFonts/css/fontiran.css
+++ b/src/assets/IRANSans/Farsi_numerals/webFonts/css/fontiran.css
@ -17,62 +17,70 @@ This set of fonts are used in this project under the license: (.....)
 *	
 **/
@font-face {
-	font-family: IRANSans;
-	font-style: normal;
-	font-weight: 900;
-	src: url('../fonts/eot/IRANSansWeb(FaNum)_Black.eot');
-	src: url('../fonts/eot/IRANSansWeb(FaNum)_Black.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
-		 url('../fonts/woff2/IRANSansWeb(FaNum)_Black.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
-		 url('../fonts/woff/IRANSansWeb(FaNum)_Black.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
-		 url('../fonts/ttf/IRANSansWeb(FaNum)_Black.ttf') format('truetype');
+  font-family: IRANSans;
+  font-style: normal;
+  font-weight: 900;
+  src: url('../fonts/eot/IRANSansWeb(FaNum)_Black.eot');
+  src: url('../fonts/eot/IRANSansWeb(FaNum)_Black.eot?#iefix') format('embedded-opentype'),
+    /* IE6-8 */ url('../fonts/woff2/IRANSansWeb(FaNum)_Black.woff2') format('woff2'),
+    /* FF39+,Chrome36+, Opera24+*/ url('../fonts/woff/IRANSansWeb(FaNum)_Black.woff') format('woff'),
+    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('../fonts/ttf/IRANSansWeb(FaNum)_Black.ttf')
+      format('truetype');
 }
@font-face {
-	font-family: IRANSans;
-	font-style: normal;
-	font-weight: bold;
-	src: url('../fonts/eot/IRANSansWeb(FaNum)_Bold.eot');
-	src: url('../fonts/eot/IRANSansWeb(FaNum)_Bold.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
-		 url('../fonts/woff2/IRANSansWeb(FaNum)_Bold.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
-		 url('../fonts/woff/IRANSansWeb(FaNum)_Bold.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
-		 url('../fonts/ttf/IRANSansWeb(FaNum)_Bold.ttf') format('truetype');
+  font-family: IRANSans;
+  font-style: normal;
+  font-weight: bold;
+  src: url('../fonts/eot/IRANSansWeb(FaNum)_Bold.eot');
+  src: url('../fonts/eot/IRANSansWeb(FaNum)_Bold.eot?#iefix') format('embedded-opentype'),
+    /* IE6-8 */ url('../fonts/woff2/IRANSansWeb(FaNum)_Bold.woff2') format('woff2'),
+    /* FF39+,Chrome36+, Opera24+*/ url('../fonts/woff/IRANSansWeb(FaNum)_Bold.woff') format('woff'),
+    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('../fonts/ttf/IRANSansWeb(FaNum)_Bold.ttf')
+      format('truetype');
 }
@font-face {
-	font-family: IRANSans;
-	font-style: normal;
-	font-weight: 500;
-	src: url('../fonts/eot/IRANSansWeb(FaNum)_Medium.eot');
-	src: url('../fonts/eot/IRANSansWeb(FaNum)_Medium.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
-		 url('../fonts/woff2/IRANSansWeb(FaNum)_Medium.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
-		 url('../fonts/woff/IRANSansWeb(FaNum)_Medium.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
-		 url('../fonts/ttf/IRANSansWeb(FaNum)_Medium.ttf') format('truetype');
+  font-family: IRANSans;
+  font-style: normal;
+  font-weight: 500;
+  src: url('../fonts/eot/IRANSansWeb(FaNum)_Medium.eot');
+  src: url('../fonts/eot/IRANSansWeb(FaNum)_Medium.eot?#iefix') format('embedded-opentype'),
+    /* IE6-8 */ url('../fonts/woff2/IRANSansWeb(FaNum)_Medium.woff2') format('woff2'),
+    /* FF39+,Chrome36+, Opera24+*/ url('../fonts/woff/IRANSansWeb(FaNum)_Medium.woff')
+      format('woff'),
+    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('../fonts/ttf/IRANSansWeb(FaNum)_Medium.ttf')
+      format('truetype');
 }
@font-face {
-	font-family: IRANSans;
-	font-style: normal;
-	font-weight: 300;
-	src: url('../fonts/eot/IRANSansWeb(FaNum)_Light.eot');
-	src: url('../fonts/eot/IRANSansWeb(FaNum)_Light.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
-		 url('../fonts/woff2/IRANSansWeb(FaNum)_Light.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
-		 url('../fonts/woff/IRANSansWeb(FaNum)_Light.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
-		 url('../fonts/ttf/IRANSansWeb(FaNum)_Light.ttf') format('truetype');
+  font-family: IRANSans;
+  font-style: normal;
+  font-weight: 300;
+  src: url('../fonts/eot/IRANSansWeb(FaNum)_Light.eot');
+  src: url('../fonts/eot/IRANSansWeb(FaNum)_Light.eot?#iefix') format('embedded-opentype'),
+    /* IE6-8 */ url('../fonts/woff2/IRANSansWeb(FaNum)_Light.woff2') format('woff2'),
+    /* FF39+,Chrome36+, Opera24+*/ url('../fonts/woff/IRANSansWeb(FaNum)_Light.woff') format('woff'),
+    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('../fonts/ttf/IRANSansWeb(FaNum)_Light.ttf')
+      format('truetype');
 }
@font-face {
-	font-family: IRANSans;
-	font-style: normal;
-	font-weight: 200;
-	src: url('../fonts/eot/IRANSansWeb(FaNum)_UltraLight.eot');
-	src: url('../fonts/eot/IRANSansWeb(FaNum)_UltraLight.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
-		 url('../fonts/woff2/IRANSansWeb(FaNum)_UltraLight.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
-		 url('../fonts/woff/IRANSansWeb(FaNum)_UltraLight.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
-		 url('../fonts/ttf/IRANSansWeb(FaNum)_UltraLight.ttf') format('truetype');
+  font-family: IRANSans;
+  font-style: normal;
+  font-weight: 200;
+  src: url('../fonts/eot/IRANSansWeb(FaNum)_UltraLight.eot');
+  src: url('../fonts/eot/IRANSansWeb(FaNum)_UltraLight.eot?#iefix') format('embedded-opentype'),
+    /* IE6-8 */ url('../fonts/woff2/IRANSansWeb(FaNum)_UltraLight.woff2') format('woff2'),
+    /* FF39+,Chrome36+, Opera24+*/ url('../fonts/woff/IRANSansWeb(FaNum)_UltraLight.woff')
+      format('woff'),
+    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('../fonts/ttf/IRANSansWeb(FaNum)_UltraLight.ttf')
+      format('truetype');
 }
@font-face {
-	font-family: IRANSans;
-	font-style: normal;
-	font-weight: normal;
-	src: url('../fonts/eot/IRANSansWeb(FaNum).eot');
-	src: url('../fonts/eot/IRANSansWeb(FaNum).eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
-		 url('../fonts/woff2/IRANSansWeb(FaNum).woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
-		 url('../fonts/woff/IRANSansWeb(FaNum).woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
-		 url('../fonts/ttf/IRANSansWeb(FaNum).ttf') format('truetype');
+  font-family: IRANSans;
+  font-style: normal;
+  font-weight: normal;
+  src: url('../fonts/eot/IRANSansWeb(FaNum).eot');
+  src: url('../fonts/eot/IRANSansWeb(FaNum).eot?#iefix') format('embedded-opentype'),
+    /* IE6-8 */ url('../fonts/woff2/IRANSansWeb(FaNum).woff2') format('woff2'),
+    /* FF39+,Chrome36+, Opera24+*/ url('../fonts/woff/IRANSansWeb(FaNum).woff') format('woff'),
+    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('../fonts/ttf/IRANSansWeb(FaNum).ttf')
+      format('truetype');
 }
--- a/src/assets/IRANSans/Farsi_numerals/webFonts/css/style.css
+++ b/src/assets/IRANSans/Farsi_numerals/webFonts/css/style.css
@ -1,190 +1,191 @@
@import url(fontiran.css); /* لینک فایلی که وظیفه بارگذاری فونت ها را برعهده دارد */
 body {
-	font-family: IRANSans !important;
-	font-weight: 300;
-	direction: rtl;
-	background-color: #E2E2E2;
-	margin: 0;
-}
-h1, h2, h3, h4, h5, h6,input, textarea {
-	font-family: IRANSans !important;
+  font-family: IRANSans !important;
+  font-weight: 300;
+  direction: rtl;
+  background-color: #e2e2e2;
+  margin: 0;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+input,
+textarea {
+  font-family: IRANSans !important;
 }
 h1 {
-	font-weight: bold;
+  font-weight: bold;
 }
 .wrapper {
-	max-width: 900px;
-	margin: 0 auto;
+  max-width: 900px;
+  margin: 0 auto;
 }
 .ltr {
-	direction: ltr;
+  direction: ltr;
 }
 .text-right {
-	text-align: right;
+  text-align: right;
 }
 .text-center {
-	text-align: center;
+  text-align: center;
 }
 .text-left {
-	text-align: left;
+  text-align: left;
 }
 .text-small {
-	font-size: 0.8em;
+  font-size: 0.8em;
 }
 .text-xsmall {
-	font-size: 0.6em;
+  font-size: 0.6em;
 }
 .text-large {
-	font-size: 1.2em;
+  font-size: 1.2em;
 }
 .text-xlarge {
-	font-size: 1.4em;
+  font-size: 1.4em;
 }
 .text-underline {
-	text-decoration:underline;
+  text-decoration: underline;
 }
 .text-ultralight {
-	font-weight: 200;
+  font-weight: 200;
 }
 .text-light {
-	font-weight: 300;
+  font-weight: 300;
 }
 .text-regular {
-	font-weight: normal;
+  font-weight: normal;
 }
 .text-medium {
-	font-weight: 500;
+  font-weight: 500;
 }
 .text-bold {
-	font-weight: bold;
+  font-weight: bold;
 }
 .text-black {
-	font-weight: 900;
+  font-weight: 900;
 }
 blockquote {
-	font-weight: 500;
-	padding: 10px;
-	border: 1px dashed #666666;
+  font-weight: 500;
+  padding: 10px;
+  border: 1px dashed #666666;
 }

 .mainbox {
-	width: 100%;
-	background-color: #EFEFEF;
-	display: table;
-	margin-bottom: 30px;
-	border-right: 8px solid #FFFF33;
+  width: 100%;
+  background-color: #efefef;
+  display: table;
+  margin-bottom: 30px;
+  border-right: 8px solid #ffff33;
 }

 .mainboxnegativ {
-	width: 100%;
-	background-color: #000000;
-	display: table;
-	margin-bottom: 30px;
-	border-right: 8px solid #FFFF33;
-	color: #F9F9F9;
+  width: 100%;
+  background-color: #000000;
+  display: table;
+  margin-bottom: 30px;
+  border-right: 8px solid #ffff33;
+  color: #f9f9f9;
 }

 .mainbox2 {
-	font-size: 1em;
-	width: 90%;
-	padding-right: 20px;
-	padding-top: 10px;
-	padding-bottom: 10px;
+  font-size: 1em;
+  width: 90%;
+  padding-right: 20px;
+  padding-top: 10px;
+  padding-bottom: 10px;
 }

 .mainbox3 {
-	width: 100%;
-	background-color: #b8b8b8;
-	display: table;
-	margin-bottom: 30px;
-	border-right: 8px solid #bd70ff;
+  width: 100%;
+  background-color: #b8b8b8;
+  display: table;
+  margin-bottom: 30px;
+  border-right: 8px solid #bd70ff;
 }

 .mainbox2negativ {
-	font-size: 1em;
-	color: #F9F9F9;
-	background-color: #000000;
-	padding-right: 20px;
+  font-size: 1em;
+  color: #f9f9f9;
+  background-color: #000000;
+  padding-right: 20px;
 }

 .farsiparagraph {
-	font-size: 1em;
-	width: 47%;
-	float:right;
-	padding-right: 20px;
-	padding-top: 10px;
-	padding-bottom: 10px;
-
+  font-size: 1em;
+  width: 47%;
+  float: right;
+  padding-right: 20px;
+  padding-top: 10px;
+  padding-bottom: 10px;
 }
 .englishparagraph {
-	font-size: 1em;
-	width: 47%;
-	float: left;
-	direction:ltr;
-	padding-left: 20px;
-	padding-top: 10px;
-	padding-bottom: 10px;
-
-
+  font-size: 1em;
+  width: 47%;
+  float: left;
+  direction: ltr;
+  padding-left: 20px;
+  padding-top: 10px;
+  padding-bottom: 10px;
 }
 .rightbox {
-	width: 60%;
-	padding-right: 20px;
-	padding-left: 5px;
-	float: right;
-	margin-left: 10px;
-	margin-bottom: 0px;
-	min-width: 0px;
-	background-color: #F7F7F7;
-
+  width: 60%;
+  padding-right: 20px;
+  padding-left: 5px;
+  float: right;
+  margin-left: 10px;
+  margin-bottom: 0px;
+  min-width: 0px;
+  background-color: #f7f7f7;
 }

 .titelbox {
-	width: 60%;
-	padding-right: 25px;
-	padding-left: 0px;
-	float: right;
-	margin-left: 10px;
-	margin-bottom: 0px;
-	min-width: 0px;
-	background-color: #F2F2F2;
-	color: #4B4B4B;
+  width: 60%;
+  padding-right: 25px;
+  padding-left: 0px;
+  float: right;
+  margin-left: 10px;
+  margin-bottom: 0px;
+  min-width: 0px;
+  background-color: #f2f2f2;
+  color: #4b4b4b;
 }

-
 .lefttbox {
-	
-	padding-right: 20px;
-	padding-left: 4px;
-	float: right;
-	margin-bottom: 10px;
-	min-width: 0px;
+  padding-right: 20px;
+  padding-left: 4px;
+  float: right;
+  margin-bottom: 10px;
+  min-width: 0px;
 }

 .alphabet {
-	width: 35%;
-	float: left;
-	font-size: 21em;
-	text-align: center;
-	font-weight: 500;
-	color: #999999;
+  width: 35%;
+  float: left;
+  font-size: 21em;
+  text-align: center;
+  font-weight: 500;
+  color: #999999;
 }

 .alphabet2 {
-	width: 35%;
-	float: left;
-	direction: ltr;
-	font-size: 1.6em;
-	text-align: left;
-	font-weight: 500;
-	color: #333333;
-	margin-top: 100px;
+  width: 35%;
+  float: left;
+  direction: ltr;
+  font-size: 1.6em;
+  text-align: left;
+  font-weight: 500;
+  color: #333333;
+  margin-top: 100px;
 }
 .footer {
-	font-weight: 300;
-	font-size: 0.7em;
-	text-align: center;
-	direction: ltr;
-	margin-bottom: 0px;
-	padding-bottom: 0px;
+  font-weight: 300;
+  font-size: 0.7em;
+  text-align: center;
+  direction: ltr;
+  margin-bottom: 0px;
+  padding-bottom: 0px;
 }
--- a/src/assets/IRANSans/IRANSans5_5.html
+++ b/src/assets/IRANSans/IRANSans5_5.html
@ -1,76 +1,81 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="fa">
+  <head>
+    <meta charset="utf-8" />
+    <title>IRANSans Family Type face: خانواده فونت ایران سن سریف</title>

-<head>
-  <meta charset="utf-8">
-  <title>IRANSans Family Type face: خانواده فونت ایران سن سریف</title>
+    <meta name="fontiran.com:license" content="کد ۵ رقمی لایسنس" />

-  <meta name="fontiran.com:license" content="کد ۵ رقمی لایسنس">
+    <link href="WebFonts/css/style.css" rel="stylesheet" />
+    <style type="text/css">
+      a:link {
+        color: #9600f0;
+        text-decoration: none;
+      }

-  <link href="WebFonts/css/style.css" rel="stylesheet">
-  <style type="text/css">
-    a:link {
-      color: #9600F0;
-      text-decoration: none;
-    }
+      a:visited {
+        color: #9600f0;
+        text-decoration: none;
+      }

-    a:visited {
-      color: #9600F0;
-      text-decoration: none;
-    }
+      a:hover {
+        color: #ff0093;
+        text-decoration: none;
+      }

-    a:hover {
-      color: #FF0093;
-      text-decoration: none;
-    }
+      a:active {
+        color: #ff0033;
+        text-decoration: none;
+      }
+    </style>
+  </head>

-    a:active {
-      color: #FF0033;
-      text-decoration: none;
-    }
-  </style>
-</head>
+  <body dir="rtl">
+    <div class="wrapper">
+      <p></p>
+      <br /><br /><br />
+      <div class="mainbox3">
+        <div class="titelbox">
+          <h1>اگر از خدمات فونت ایران رضایت دارید:</h1>
+        </div>
+        <div style="float: left">
+          <br />
+          <br />
+          <img alt="" src="IRANSans5.jpg" width="324" height="366" />
+        </div>
+        <div class="rightbox">
+          <p>
+            <br />
+            <span class="text-xlarge" style="padding-right: 22px">لطفاً:</span>
+            <br />
+            <span class="text-xlarge"> ۱) فایل‌های درون این بسته را به اشتراک نگذارید.</span>
+            <br />
+            <span class="text-xlarge"> ۲) همکاران خود را به خرید این محصول ترغیب کنید.</span>
+            <br />
+            <span class="text-xlarge"> ۳) برای محصولات خود اجازه‌نامه تهیه کنید.</span>
+            <br />
+            <span class="text-xlarge"
+              >۴) طبق راهنما، کد ۵ رقمی اجازه‌نامه را در محصول خود درج کنید و کاربران خود را از
+              کپی‌رایت این محصول آگاه کنید.</span
+            ><br />
+          </p>

-<body dir="rtl">
-  <div class="wrapper">
+          <p>
+            <a href="http://fontiran.com/licenses"
+              >کدامیک از محصولات و شرکت‌ها با خرید اجازه‌نامه از حقوق ما حمایت کرده‌اند؟</a
+            >
+          </p>
+          <p>
+            <a href="http://fontiran.com/?p=1039"
+              >کدام سایت‌ها و نرم افزارها بدون اجازه‌نامه از فونت ایران استفاده می‌کنند؟</a
+            >
+          </p>

-    <p></p>
-    <br><br><br>
-    <div class="mainbox3">
-      <div class="titelbox">
-        <h1>اگر از خدمات فونت ایران رضایت دارید:</h1>
+          <br />
+        </div>
      </div>
-      <div style="float:left">
-        <br> <br>
-        <img alt="" src="IRANSans5.jpg" width="324" height="366" />
-      </div>
-      <div class="rightbox">
-        <p><br>
-          <span class="text-xlarge" style="padding-right:22px">لطفاً:</span>
-          <br>
-          <span class="text-xlarge"> ۱) فایل‌های درون این بسته را به اشتراک نگذارید.</span>
-          <br>
-          <span class="text-xlarge"> ۲) همکاران خود را به خرید این محصول ترغیب کنید.</span>
-          <br>
-          <span class="text-xlarge"> ۳) برای محصولات خود اجازه‌نامه تهیه کنید.</span>
-          <br>
-          <span class="text-xlarge">۴) طبق راهنما، کد ۵ رقمی اجازه‌نامه را در محصول خود درج کنید و کاربران خود را از
-            کپی‌رایت این محصول آگاه کنید.</span><br>
-        <p> <a href="http://fontiran.com/licenses">کدامیک از محصولات و شرکت‌ها با خرید اجازه‌نامه از حقوق ما حمایت
-            کرده‌اند؟</a></p>
-        <p> <a href="http://fontiran.com/?p=1039">کدام سایت‌ها و نرم افزارها بدون اجازه‌نامه از فونت ایران استفاده
-            می‌کنند؟</a></p>

-        <br>
-      </div>
+      <br />
    </div>
-
-
-
-
-    <br>
-
-  </div>
-</body>
-
-</html>
+  </body>
+</html>
--- a/src/assets/IRANSans/Non_English/WebFonts/css/fontiran.css
+++ b/src/assets/IRANSans/Non_English/WebFonts/css/fontiran.css
@ -17,62 +17,68 @@ This set of fonts are used in this project under the license: (.....)
 *	
 **/
@font-face {
-	font-family: IRANSans;
-	font-style: normal;
-	font-weight: 900;
-	src: url('../fonts/eot/IRANSansWeb(NoEn)_Black.eot');
-	src: url('../fonts/eot/IRANSansWeb(NoEn)_Black.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
-		 url('../fonts/woff2/IRANSansWeb(NoEn)_Black.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
-		 url('../fonts/woff/IRANSansWeb(NoEn)_Black.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
-		 url('../fonts/ttf/IRANSansWeb(NoEn)_Black.ttf') format('truetype');
+  font-family: IRANSans;
+  font-style: normal;
+  font-weight: 900;
+  src: url('../fonts/eot/IRANSansWeb(NoEn)_Black.eot');
+  src: url('../fonts/eot/IRANSansWeb(NoEn)_Black.eot?#iefix') format('embedded-opentype'),
+    /* IE6-8 */ url('../fonts/woff2/IRANSansWeb(NoEn)_Black.woff2') format('woff2'),
+    /* FF39+,Chrome36+, Opera24+*/ url('../fonts/woff/IRANSansWeb(NoEn)_Black.woff') format('woff'),
+    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('../fonts/ttf/IRANSansWeb(NoEn)_Black.ttf')
+      format('truetype');
 }
@font-face {
-	font-family: IRANSans;
-	font-style: normal;
-	font-weight: bold;
-	src: url('../fonts/eot/IRANSansWeb(NoEn)_Bold.eot');
-	src: url('../fonts/eot/IRANSansWeb(NoEn)_Bold.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
-		 url('../fonts/woff2/IRANSansWeb(NoEn)_Bold.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
-		 url('../fonts/woff/IRANSansWeb(NoEn)_Bold.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
-		 url('../fonts/ttf/IRANSansWeb(NoEn)_Bold.ttf') format('truetype');
+  font-family: IRANSans;
+  font-style: normal;
+  font-weight: bold;
+  src: url('../fonts/eot/IRANSansWeb(NoEn)_Bold.eot');
+  src: url('../fonts/eot/IRANSansWeb(NoEn)_Bold.eot?#iefix') format('embedded-opentype'),
+    /* IE6-8 */ url('../fonts/woff2/IRANSansWeb(NoEn)_Bold.woff2') format('woff2'),
+    /* FF39+,Chrome36+, Opera24+*/ url('../fonts/woff/IRANSansWeb(NoEn)_Bold.woff') format('woff'),
+    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('../fonts/ttf/IRANSansWeb(NoEn)_Bold.ttf')
+      format('truetype');
 }
@font-face {
-	font-family: IRANSans;
-	font-style: normal;
-	font-weight: 500;
-	src: url('../fonts/eot/IRANSansWeb(NoEn)_Medium.eot');
-	src: url('../fonts/eot/IRANSansWeb(NoEn)_Medium.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
-		 url('../fonts/woff2/IRANSansWeb(NoEn)_Medium.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
-		 url('../fonts/woff/IRANSansWeb(NoEn)_Medium.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
-		 url('../fonts/ttf/IRANSansWeb(NoEn)_Medium.ttf') format('truetype');
+  font-family: IRANSans;
+  font-style: normal;
+  font-weight: 500;
+  src: url('../fonts/eot/IRANSansWeb(NoEn)_Medium.eot');
+  src: url('../fonts/eot/IRANSansWeb(NoEn)_Medium.eot?#iefix') format('embedded-opentype'),
+    /* IE6-8 */ url('../fonts/woff2/IRANSansWeb(NoEn)_Medium.woff2') format('woff2'),
+    /* FF39+,Chrome36+, Opera24+*/ url('../fonts/woff/IRANSansWeb(NoEn)_Medium.woff') format('woff'),
+    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('../fonts/ttf/IRANSansWeb(NoEn)_Medium.ttf')
+      format('truetype');
 }
@font-face {
-	font-family: IRANSans;
-	font-style: normal;
-	font-weight: 300;
-	src: url('../fonts/eot/IRANSansWeb(NoEn)_Light.eot');
-	src: url('../fonts/eot/IRANSansWeb(NoEn)_Light.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
-		 url('../fonts/woff2/IRANSansWeb(NoEn)_Light.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
-		 url('../fonts/woff/IRANSansWeb(NoEn)_Light.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
-		 url('../fonts/ttf/IRANSansWeb(NoEn)_Light.ttf') format('truetype');
+  font-family: IRANSans;
+  font-style: normal;
+  font-weight: 300;
+  src: url('../fonts/eot/IRANSansWeb(NoEn)_Light.eot');
+  src: url('../fonts/eot/IRANSansWeb(NoEn)_Light.eot?#iefix') format('embedded-opentype'),
+    /* IE6-8 */ url('../fonts/woff2/IRANSansWeb(NoEn)_Light.woff2') format('woff2'),
+    /* FF39+,Chrome36+, Opera24+*/ url('../fonts/woff/IRANSansWeb(NoEn)_Light.woff') format('woff'),
+    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('../fonts/ttf/IRANSansWeb(NoEn)_Light.ttf')
+      format('truetype');
 }
@font-face {
-	font-family: IRANSans;
-	font-style: normal;
-	font-weight: 200;
-	src: url('../fonts/eot/IRANSansWeb(NoEn)_UltraLight.eot');
-	src: url('../fonts/eot/IRANSansWeb(NoEn)_UltraLight.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
-		 url('../fonts/woff2/IRANSansWeb(NoEn)_UltraLight.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
-		 url('../fonts/woff/IRANSansWeb(NoEn)_UltraLight.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
-		 url('../fonts/ttf/IRANSansWeb(NoEn)_UltraLight.ttf') format('truetype');
+  font-family: IRANSans;
+  font-style: normal;
+  font-weight: 200;
+  src: url('../fonts/eot/IRANSansWeb(NoEn)_UltraLight.eot');
+  src: url('../fonts/eot/IRANSansWeb(NoEn)_UltraLight.eot?#iefix') format('embedded-opentype'),
+    /* IE6-8 */ url('../fonts/woff2/IRANSansWeb(NoEn)_UltraLight.woff2') format('woff2'),
+    /* FF39+,Chrome36+, Opera24+*/ url('../fonts/woff/IRANSansWeb(NoEn)_UltraLight.woff')
+      format('woff'),
+    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('../fonts/ttf/IRANSansWeb(NoEn)_UltraLight.ttf')
+      format('truetype');
 }
@font-face {
-	font-family: IRANSans;
-	font-style: normal;
-	font-weight: normal;
-	src: url('../fonts/eot/IRANSansWeb(NoEn).eot');
-	src: url('../fonts/eot/IRANSansWeb(NoEn).eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
-		 url('../fonts/woff2/IRANSansWeb(NoEn).woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
-		 url('../fonts/woff/IRANSansWeb(NoEn).woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
-		 url('../fonts/ttf/IRANSansWeb(NoEn).ttf') format('truetype');
+  font-family: IRANSans;
+  font-style: normal;
+  font-weight: normal;
+  src: url('../fonts/eot/IRANSansWeb(NoEn).eot');
+  src: url('../fonts/eot/IRANSansWeb(NoEn).eot?#iefix') format('embedded-opentype'),
+    /* IE6-8 */ url('../fonts/woff2/IRANSansWeb(NoEn).woff2') format('woff2'),
+    /* FF39+,Chrome36+, Opera24+*/ url('../fonts/woff/IRANSansWeb(NoEn).woff') format('woff'),
+    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('../fonts/ttf/IRANSansWeb(NoEn).ttf') format('truetype');
 }
--- a/src/assets/IRANSans/Non_English/WebFonts/css/style.css
+++ b/src/assets/IRANSans/Non_English/WebFonts/css/style.css
@ -1,190 +1,191 @@
@import url(fontiran.css); /* لینک فایلی که وظیفه بارگذاری فونت ها را برعهده دارد */
 body {
-	font-family: IRANSans, Roboto, Arial !important;
-	font-weight: 300;
-	direction: rtl;
-	background-color: #E2E2E2;
-	margin: 0;
-}
-h1, h2, h3, h4, h5, h6,input, textarea {
-	font-family: IRANSans, Roboto, Arial !important;
+  font-family: IRANSans, Roboto, Arial !important;
+  font-weight: 300;
+  direction: rtl;
+  background-color: #e2e2e2;
+  margin: 0;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+input,
+textarea {
+  font-family: IRANSans, Roboto, Arial !important;
 }
 h1 {
-	font-weight: bold;
+  font-weight: bold;
 }
 .wrapper {
-	max-width: 900px;
-	margin: 0 auto;
+  max-width: 900px;
+  margin: 0 auto;
 }
 .ltr {
-	direction: ltr;
+  direction: ltr;
 }
 .text-right {
-	text-align: right;
+  text-align: right;
 }
 .text-center {
-	text-align: center;
+  text-align: center;
 }
 .text-left {
-	text-align: left;
+  text-align: left;
 }
 .text-small {
-	font-size: 0.8em;
+  font-size: 0.8em;
 }
 .text-xsmall {
-	font-size: 0.6em;
+  font-size: 0.6em;
 }
 .text-large {
-	font-size: 1.2em;
+  font-size: 1.2em;
 }
 .text-xlarge {
-	font-size: 1.4em;
+  font-size: 1.4em;
 }
 .text-underline {
-	text-decoration:underline;
+  text-decoration: underline;
 }
 .text-ultralight {
-	font-weight: 200;
+  font-weight: 200;
 }
 .text-light {
-	font-weight: 300;
+  font-weight: 300;
 }
 .text-regular {
-	font-weight: normal;
+  font-weight: normal;
 }
 .text-medium {
-	font-weight: 500;
+  font-weight: 500;
 }
 .text-bold {
-	font-weight: bold;
+  font-weight: bold;
 }
 .text-black {
-	font-weight: 900;
+  font-weight: 900;
 }
 blockquote {
-	font-weight: 500;
-	padding: 10px;
-	border: 1px dashed #666666;
+  font-weight: 500;
+  padding: 10px;
+  border: 1px dashed #666666;
 }

 .mainbox {
-	width: 100%;
-	background-color: #EFEFEF;
-	display: table;
-	margin-bottom: 30px;
-	border-right: 8px solid #FFFF33;
+  width: 100%;
+  background-color: #efefef;
+  display: table;
+  margin-bottom: 30px;
+  border-right: 8px solid #ffff33;
 }

 .mainboxnegativ {
-	width: 100%;
-	background-color: #000000;
-	display: table;
-	margin-bottom: 30px;
-	border-right: 8px solid #FFFF33;
-	color: #F9F9F9;
+  width: 100%;
+  background-color: #000000;
+  display: table;
+  margin-bottom: 30px;
+  border-right: 8px solid #ffff33;
+  color: #f9f9f9;
 }

 .mainbox2 {
-	font-size: 1em;
-	width: 90%;
-	padding-right: 20px;
-	padding-top: 10px;
-	padding-bottom: 10px;
+  font-size: 1em;
+  width: 90%;
+  padding-right: 20px;
+  padding-top: 10px;
+  padding-bottom: 10px;
 }

 .mainbox3 {
-	width: 100%;
-	background-color: #b8b8b8;
-	display: table;
-	margin-bottom: 30px;
-	border-right: 8px solid #bd70ff;
+  width: 100%;
+  background-color: #b8b8b8;
+  display: table;
+  margin-bottom: 30px;
+  border-right: 8px solid #bd70ff;
 }

 .mainbox2negativ {
-	font-size: 1em;
-	color: #F9F9F9;
-	background-color: #000000;
-	padding-right: 20px;
+  font-size: 1em;
+  color: #f9f9f9;
+  background-color: #000000;
+  padding-right: 20px;
 }

 .farsiparagraph {
-	font-size: 1em;
-	width: 47%;
-	float:right;
-	padding-right: 20px;
-	padding-top: 10px;
-	padding-bottom: 10px;
-
+  font-size: 1em;
+  width: 47%;
+  float: right;
+  padding-right: 20px;
+  padding-top: 10px;
+  padding-bottom: 10px;
 }
 .englishparagraph {
-	font-size: 1em;
-	width: 47%;
-	float: left;
-	direction:ltr;
-	padding-left: 20px;
-	padding-top: 10px;
-	padding-bottom: 10px;
-
-
+  font-size: 1em;
+  width: 47%;
+  float: left;
+  direction: ltr;
+  padding-left: 20px;
+  padding-top: 10px;
+  padding-bottom: 10px;
 }
 .rightbox {
-	width: 60%;
-	padding-right: 20px;
-	padding-left: 5px;
-	float: right;
-	margin-left: 10px;
-	margin-bottom: 0px;
-	min-width: 0px;
-	background-color: #F7F7F7;
-
+  width: 60%;
+  padding-right: 20px;
+  padding-left: 5px;
+  float: right;
+  margin-left: 10px;
+  margin-bottom: 0px;
+  min-width: 0px;
+  background-color: #f7f7f7;
 }

 .titelbox {
-	width: 60%;
-	padding-right: 25px;
-	padding-left: 0px;
-	float: right;
-	margin-left: 10px;
-	margin-bottom: 0px;
-	min-width: 0px;
-	background-color: #F2F2F2;
-	color: #4B4B4B;
+  width: 60%;
+  padding-right: 25px;
+  padding-left: 0px;
+  float: right;
+  margin-left: 10px;
+  margin-bottom: 0px;
+  min-width: 0px;
+  background-color: #f2f2f2;
+  color: #4b4b4b;
 }

-
 .lefttbox {
-	
-	padding-right: 20px;
-	padding-left: 4px;
-	float: right;
-	margin-bottom: 10px;
-	min-width: 0px;
+  padding-right: 20px;
+  padding-left: 4px;
+  float: right;
+  margin-bottom: 10px;
+  min-width: 0px;
 }

 .alphabet {
-	width: 35%;
-	float: left;
-	font-size: 21em;
-	text-align: center;
-	font-weight: 500;
-	color: #999999;
+  width: 35%;
+  float: left;
+  font-size: 21em;
+  text-align: center;
+  font-weight: 500;
+  color: #999999;
 }

 .alphabet2 {
-	width: 35%;
-	float: left;
-	direction: ltr;
-	font-size: 1.6em;
-	text-align: left;
-	font-weight: 500;
-	color: #333333;
-	margin-top: 100px;
+  width: 35%;
+  float: left;
+  direction: ltr;
+  font-size: 1.6em;
+  text-align: left;
+  font-weight: 500;
+  color: #333333;
+  margin-top: 100px;
 }
 .footer {
-	font-weight: 300;
-	font-size: 0.7em;
-	text-align: center;
-	direction: ltr;
-	margin-bottom: 0px;
-	padding-bottom: 0px;
+  font-weight: 300;
+  font-size: 0.7em;
+  text-align: center;
+  direction: ltr;
+  margin-bottom: 0px;
+  padding-bottom: 0px;
 }
--- a/src/assets/IRANSans/WebFonts/css/fontiran.css
+++ b/src/assets/IRANSans/WebFonts/css/fontiran.css
@ -17,62 +17,64 @@ This set of fonts are used in this project under the license: (.....)
 *	
 **/
@font-face {
-	font-family: IRANSans;
-	font-style: normal;
-	font-weight: 900;
-	src: url('../fonts/eot/IRANSansWeb_Black.eot');
-	src: url('../fonts/eot/IRANSansWeb_Black.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
-		 url('../fonts/woff2/IRANSansWeb_Black.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
-		 url('../fonts/woff/IRANSansWeb_Black.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
-		 url('../fonts/ttf/IRANSansWeb_Black.ttf') format('truetype');
+  font-family: IRANSans;
+  font-style: normal;
+  font-weight: 900;
+  src: url('../fonts/eot/IRANSansWeb_Black.eot');
+  src: url('../fonts/eot/IRANSansWeb_Black.eot?#iefix') format('embedded-opentype'),
+    /* IE6-8 */ url('../fonts/woff2/IRANSansWeb_Black.woff2') format('woff2'),
+    /* FF39+,Chrome36+, Opera24+*/ url('../fonts/woff/IRANSansWeb_Black.woff') format('woff'),
+    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('../fonts/ttf/IRANSansWeb_Black.ttf') format('truetype');
 }
@font-face {
-	font-family: IRANSans;
-	font-style: normal;
-	font-weight: bold;
-	src: url('../fonts/eot/IRANSansWeb_Bold.eot');
-	src: url('../fonts/eot/IRANSansWeb_Bold.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
-		 url('../fonts/woff2/IRANSansWeb_Bold.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
-		 url('../fonts/woff/IRANSansWeb_Bold.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
-		 url('../fonts/ttf/IRANSansWeb_Bold.ttf') format('truetype');
+  font-family: IRANSans;
+  font-style: normal;
+  font-weight: bold;
+  src: url('../fonts/eot/IRANSansWeb_Bold.eot');
+  src: url('../fonts/eot/IRANSansWeb_Bold.eot?#iefix') format('embedded-opentype'),
+    /* IE6-8 */ url('../fonts/woff2/IRANSansWeb_Bold.woff2') format('woff2'),
+    /* FF39+,Chrome36+, Opera24+*/ url('../fonts/woff/IRANSansWeb_Bold.woff') format('woff'),
+    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('../fonts/ttf/IRANSansWeb_Bold.ttf') format('truetype');
 }
@font-face {
-	font-family: IRANSans;
-	font-style: normal;
-	font-weight: 500;
-	src: url('../fonts/eot/IRANSansWeb_Medium.eot');
-	src: url('../fonts/eot/IRANSansWeb_Medium.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
-		 url('../fonts/woff2/IRANSansWeb_Medium.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
-		 url('../fonts/woff/IRANSansWeb_Medium.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
-		 url('../fonts/ttf/IRANSansWeb_Medium.ttf') format('truetype');
+  font-family: IRANSans;
+  font-style: normal;
+  font-weight: 500;
+  src: url('../fonts/eot/IRANSansWeb_Medium.eot');
+  src: url('../fonts/eot/IRANSansWeb_Medium.eot?#iefix') format('embedded-opentype'),
+    /* IE6-8 */ url('../fonts/woff2/IRANSansWeb_Medium.woff2') format('woff2'),
+    /* FF39+,Chrome36+, Opera24+*/ url('../fonts/woff/IRANSansWeb_Medium.woff') format('woff'),
+    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('../fonts/ttf/IRANSansWeb_Medium.ttf')
+      format('truetype');
 }
@font-face {
-	font-family: IRANSans;
-	font-style: normal;
-	font-weight: 300;
-	src: url('../fonts/eot/IRANSansWeb_Light.eot');
-	src: url('../fonts/eot/IRANSansWeb_Light.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
-		 url('../fonts/woff2/IRANSansWeb_Light.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
-		 url('../fonts/woff/IRANSansWeb_Light.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
-		 url('../fonts/ttf/IRANSansWeb_Light.ttf') format('truetype');
+  font-family: IRANSans;
+  font-style: normal;
+  font-weight: 300;
+  src: url('../fonts/eot/IRANSansWeb_Light.eot');
+  src: url('../fonts/eot/IRANSansWeb_Light.eot?#iefix') format('embedded-opentype'),
+    /* IE6-8 */ url('../fonts/woff2/IRANSansWeb_Light.woff2') format('woff2'),
+    /* FF39+,Chrome36+, Opera24+*/ url('../fonts/woff/IRANSansWeb_Light.woff') format('woff'),
+    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('../fonts/ttf/IRANSansWeb_Light.ttf') format('truetype');
 }
@font-face {
-	font-family: IRANSans;
-	font-style: normal;
-	font-weight: 200;
-	src: url('../fonts/eot/IRANSansWeb_UltraLight.eot');
-	src: url('../fonts/eot/IRANSansWeb_UltraLight.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
-		 url('../fonts/woff2/IRANSansWeb_UltraLight.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
-		 url('../fonts/woff/IRANSansWeb_UltraLight.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
-		 url('../fonts/ttf/IRANSansWeb_UltraLight.ttf') format('truetype');
+  font-family: IRANSans;
+  font-style: normal;
+  font-weight: 200;
+  src: url('../fonts/eot/IRANSansWeb_UltraLight.eot');
+  src: url('../fonts/eot/IRANSansWeb_UltraLight.eot?#iefix') format('embedded-opentype'),
+    /* IE6-8 */ url('../fonts/woff2/IRANSansWeb_UltraLight.woff2') format('woff2'),
+    /* FF39+,Chrome36+, Opera24+*/ url('../fonts/woff/IRANSansWeb_UltraLight.woff') format('woff'),
+    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('../fonts/ttf/IRANSansWeb_UltraLight.ttf')
+      format('truetype');
 }
@font-face {
-	font-family: IRANSans;
-	font-style: normal;
-	font-weight: normal;
-	src: url('../fonts/eot/IRANSansWeb.eot');
-	src: url('../fonts/eot/IRANSansWeb.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
-		 url('../fonts/woff2/IRANSansWeb.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
-		 url('../fonts/woff/IRANSansWeb.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
-		 url('../fonts/ttf/IRANSansWeb.ttf') format('truetype');
+  font-family: IRANSans;
+  font-style: normal;
+  font-weight: normal;
+  src: url('../fonts/eot/IRANSansWeb.eot');
+  src: url('../fonts/eot/IRANSansWeb.eot?#iefix') format('embedded-opentype'),
+    /* IE6-8 */ url('../fonts/woff2/IRANSansWeb.woff2') format('woff2'),
+    /* FF39+,Chrome36+, Opera24+*/ url('../fonts/woff/IRANSansWeb.woff') format('woff'),
+    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('../fonts/ttf/IRANSansWeb.ttf') format('truetype');
 }
--- a/src/assets/IRANSans/WebFonts/css/style.css
+++ b/src/assets/IRANSans/WebFonts/css/style.css
@ -1,190 +1,191 @@
@import url(fontiran.css); /* لینک فایلی که وظیفه بارگذاری فونت ها را برعهده دارد */
 body {
-	font-family: IRANSans !important;
-	font-weight: 300;
-	direction: rtl;
-	background-color: #E2E2E2;
-	margin: 0;
-}
-h1, h2, h3, h4, h5, h6,input, textarea {
-	font-family: IRANSans !important;
+  font-family: IRANSans !important;
+  font-weight: 300;
+  direction: rtl;
+  background-color: #e2e2e2;
+  margin: 0;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+input,
+textarea {
+  font-family: IRANSans !important;
 }
 h1 {
-	font-weight: bold;
+  font-weight: bold;
 }
 .wrapper {
-	max-width: 900px;
-	margin: 0 auto;
+  max-width: 900px;
+  margin: 0 auto;
 }
 .ltr {
-	direction: ltr;
+  direction: ltr;
 }
 .text-right {
-	text-align: right;
+  text-align: right;
 }
 .text-center {
-	text-align: center;
+  text-align: center;
 }
 .text-left {
-	text-align: left;
+  text-align: left;
 }
 .text-small {
-	font-size: 0.8em;
+  font-size: 0.8em;
 }
 .text-xsmall {
-	font-size: 0.6em;
+  font-size: 0.6em;
 }
 .text-large {
-	font-size: 1.2em;
+  font-size: 1.2em;
 }
 .text-xlarge {
-	font-size: 1.4em;
+  font-size: 1.4em;
 }
 .text-underline {
-	text-decoration:underline;
+  text-decoration: underline;
 }
 .text-ultralight {
-	font-weight: 200;
+  font-weight: 200;
 }
 .text-light {
-	font-weight: 300;
+  font-weight: 300;
 }
 .text-regular {
-	font-weight: normal;
+  font-weight: normal;
 }
 .text-medium {
-	font-weight: 500;
+  font-weight: 500;
 }
 .text-bold {
-	font-weight: bold;
+  font-weight: bold;
 }
 .text-black {
-	font-weight: 900;
+  font-weight: 900;
 }
 blockquote {
-	font-weight: 500;
-	padding: 10px;
-	border: 1px dashed #666666;
+  font-weight: 500;
+  padding: 10px;
+  border: 1px dashed #666666;
 }

 .mainbox {
-	width: 100%;
-	background-color: #EFEFEF;
-	display: table;
-	margin-bottom: 30px;
-	border-right: 8px solid #FFFF33;
+  width: 100%;
+  background-color: #efefef;
+  display: table;
+  margin-bottom: 30px;
+  border-right: 8px solid #ffff33;
 }

 .mainboxnegativ {
-	width: 100%;
-	background-color: #000000;
-	display: table;
-	margin-bottom: 30px;
-	border-right: 8px solid #FFFF33;
-	color: #F9F9F9;
+  width: 100%;
+  background-color: #000000;
+  display: table;
+  margin-bottom: 30px;
+  border-right: 8px solid #ffff33;
+  color: #f9f9f9;
 }

 .mainbox2 {
-	font-size: 1em;
-	width: 90%;
-	padding-right: 20px;
-	padding-top: 10px;
-	padding-bottom: 10px;
+  font-size: 1em;
+  width: 90%;
+  padding-right: 20px;
+  padding-top: 10px;
+  padding-bottom: 10px;
 }

 .mainbox3 {
-	width: 100%;
-	background-color: #b8b8b8;
-	display: table;
-	margin-bottom: 30px;
-	border-right: 8px solid #bd70ff;
+  width: 100%;
+  background-color: #b8b8b8;
+  display: table;
+  margin-bottom: 30px;
+  border-right: 8px solid #bd70ff;
 }

 .mainbox2negativ {
-	font-size: 1em;
-	color: #F9F9F9;
-	background-color: #000000;
-	padding-right: 20px;
+  font-size: 1em;
+  color: #f9f9f9;
+  background-color: #000000;
+  padding-right: 20px;
 }

 .farsiparagraph {
-	font-size: 1em;
-	width: 47%;
-	float:right;
-	padding-right: 20px;
-	padding-top: 10px;
-	padding-bottom: 10px;
-
+  font-size: 1em;
+  width: 47%;
+  float: right;
+  padding-right: 20px;
+  padding-top: 10px;
+  padding-bottom: 10px;
 }
 .englishparagraph {
-	font-size: 1em;
-	width: 47%;
-	float: left;
-	direction:ltr;
-	padding-left: 20px;
-	padding-top: 10px;
-	padding-bottom: 10px;
-
-
+  font-size: 1em;
+  width: 47%;
+  float: left;
+  direction: ltr;
+  padding-left: 20px;
+  padding-top: 10px;
+  padding-bottom: 10px;
 }
 .rightbox {
-	width: 60%;
-	padding-right: 20px;
-	padding-left: 5px;
-	float: right;
-	margin-left: 10px;
-	margin-bottom: 0px;
-	min-width: 0px;
-	background-color: #F7F7F7;
-
+  width: 60%;
+  padding-right: 20px;
+  padding-left: 5px;
+  float: right;
+  margin-left: 10px;
+  margin-bottom: 0px;
+  min-width: 0px;
+  background-color: #f7f7f7;
 }

 .titelbox {
-	width: 60%;
-	padding-right: 25px;
-	padding-left: 0px;
-	float: right;
-	margin-left: 10px;
-	margin-bottom: 0px;
-	min-width: 0px;
-	background-color: #F2F2F2;
-	color: #4B4B4B;
+  width: 60%;
+  padding-right: 25px;
+  padding-left: 0px;
+  float: right;
+  margin-left: 10px;
+  margin-bottom: 0px;
+  min-width: 0px;
+  background-color: #f2f2f2;
+  color: #4b4b4b;
 }

-
 .lefttbox {
-	
-	padding-right: 20px;
-	padding-left: 4px;
-	float: right;
-	margin-bottom: 10px;
-	min-width: 0px;
+  padding-right: 20px;
+  padding-left: 4px;
+  float: right;
+  margin-bottom: 10px;
+  min-width: 0px;
 }

 .alphabet {
-	width: 35%;
-	float: left;
-	font-size: 21em;
-	text-align: center;
-	font-weight: 500;
-	color: #999999;
+  width: 35%;
+  float: left;
+  font-size: 21em;
+  text-align: center;
+  font-weight: 500;
+  color: #999999;
 }

 .alphabet2 {
-	width: 35%;
-	float: left;
-	direction: ltr;
-	font-size: 1.6em;
-	text-align: left;
-	font-weight: 500;
-	color: #333333;
-	margin-top: 100px;
+  width: 35%;
+  float: left;
+  direction: ltr;
+  font-size: 1.6em;
+  text-align: left;
+  font-weight: 500;
+  color: #333333;
+  margin-top: 100px;
 }
 .footer {
-	font-weight: 300;
-	font-size: 0.7em;
-	text-align: center;
-	direction: ltr;
-	margin-bottom: 0px;
-	padding-bottom: 0px;
+  font-weight: 300;
+  font-size: 0.7em;
+  text-align: center;
+  direction: ltr;
+  margin-bottom: 0px;
+  padding-bottom: 0px;
 }
--- a/src/index.js
+++ b/src/index.js
@ -10,5 +10,3 @@ ReactDOM.render(
  </React.StrictMode>,
  document.getElementById('root')
 );
-
-
--- a/src/index.scss
+++ b/src/index.scss
@ -1,26 +1,23 @@
-
-@import "assets/IRANSans/WebFonts/css/fontiran.css";
+@import 'assets/IRANSans/WebFonts/css/fontiran.css';

 body {
  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }

-body::-webkit-scrollbar{
+body::-webkit-scrollbar {
  display: none;
  width: 0px;
 }

 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }

-*{
+* {
  font-family: IRANSansNumeralLight;
  box-sizing: border-box !important;
 }
@ -28,13 +25,13 @@ code {
@font-face {
  font-family: IRANSansNumeralLight;
  src: url(assets/IRANSans/Farsi_numerals/light.ttf);
-} 
+}

@font-face {
  font-family: IRANSansNumeralBold;
  src: url(assets/IRANSans/Farsi_numerals/Bold.ttf);
-} 
-.MuiInputBase-input{
+}
+.MuiInputBase-input {
  font-family: IRANSansNumeralLight !important;
 }
 input::-webkit-outer-spin-button,
@ -44,10 +41,10 @@ input::-webkit-inner-spin-button {
 }

 /* Firefox */
-input[type=number] {
+input[type='number'] {
  -moz-appearance: textfield;
 }

 a {
-  color : black;
-}
+  color: black;
+}
--- a/src/views/Auth/Auth.js
+++ b/src/views/Auth/Auth.js
@ -9,28 +9,22 @@ export default class Auth extends Component {
  constructor(props) {
    super(props);
    this.state = {
-      page : 'logo',
-    }
+      page: 'logo',
+    };
  }

  setPage = (val) => {
-    this.setState({ 
-      page : val,
-    })
-  }
+    this.setState({
+      page: val,
+    });
+  };
  render() {
-    return(
+    return (
      <div className="auth">
-        {
-          this.state.page === 'logo' ? <Logo setPage={this.setPage} /> : null
-        }
-        {
-          this.state.page === 'bio' ? <Bio setPage={this.setPage} /> : null
-        }
-        {
-          this.state.page === 'login' ? <Login/> : null
-        }
+        {this.state.page === 'logo' ? <Logo setPage={this.setPage} /> : null}
+        {this.state.page === 'bio' ? <Bio setPage={this.setPage} /> : null}
+        {this.state.page === 'login' ? <Login /> : null}
      </div>
    );
  }
-}
+}
--- a/src/views/Auth/Auth.scss
+++ b/src/views/Auth/Auth.scss
@ -1,9 +1,9 @@
-@media screen and (max-width: 4500px){
-  .auth{
+@media screen and (max-width: 4500px) {
+  .auth {
    width: 100vw;
    height: 100vh;
    direction: rtl;
    overflow-x: hidden;
    position: relative;
  }
-}
+}
--- a/src/views/Auth/Bio/Bio.js
+++ b/src/views/Auth/Bio/Bio.js
@ -9,38 +9,28 @@ export default class Bio extends Component {
  constructor(props) {
    super(props);
    this.state = {
-      section : 0,
-    }
+      section: 0,
+    };
  }
  setSection = (val) => {
    this.setState({
-      section : val,
-    })
-  }
+      section: val,
+    });
+  };
  render() {
-    return(
+    return (
      <div className="bio d-flex flex-column">
        <div className="bio__box d-flex flex-column justify-content-center align-items-center">
-          {
-            this.state.section === 0 ? <FirstBio setSection={this.setSection} /> : null
-          }
-          {
-            this.state.section === 1 ? <SecondBio setSection={this.setSection} /> : null
-          }
-          {
-            this.state.section === 2 ? <ThirdBio setSection={this.setSection} /> : null
-          }
+          {this.state.section === 0 ? <FirstBio setSection={this.setSection} /> : null}
+          {this.state.section === 1 ? <SecondBio setSection={this.setSection} /> : null}
+          {this.state.section === 2 ? <ThirdBio setSection={this.setSection} /> : null}
        </div>
-        {
-          this.state.section === 2 ? 
-          <button onClick={() => this.props.setPage('login')}>
-            شروع
-          </button> : 
-          <button onClick={() => this.props.setPage('login')}>
-           رد کردن
-          </button>
-        }
+        {this.state.section === 2 ? (
+          <button onClick={() => this.props.setPage('login')}>شروع</button>
+        ) : (
+          <button onClick={() => this.props.setPage('login')}>رد کردن</button>
+        )}
      </div>
    );
  }
-}
+}
--- a/src/views/Auth/Bio/Bio.scss
+++ b/src/views/Auth/Bio/Bio.scss
@ -1,56 +1,55 @@
-@media screen and (max-width: 4500px){
-  .bio{
+@media screen and (max-width: 4500px) {
+  .bio {
    width: 100%;
    height: 100%;
    background-color: #efefef;
-    &__box{
-      direction : rtl;
+    &__box {
+      direction: rtl;
      width: 100%;
      height: 75%;
-      background: rgb(111,108,255);
-      background: linear-gradient(180deg, rgba(111,108,255,1) 0%, rgba(105,73,186,1) 52%);
+      background: rgb(111, 108, 255);
+      background: linear-gradient(180deg, rgba(111, 108, 255, 1) 0%, rgba(105, 73, 186, 1) 52%);
      border-bottom-right-radius: 40px;
      border-bottom-left-radius: 40px;
-      box-shadow: 0 0 80px rgba(0,0,0,1);
+      box-shadow: 0 0 80px rgba(0, 0, 0, 1);
      position: relative;
-      p{
+      p {
        font-size: 16px;
        color: white;
        max-width: 200px;
        text-align: justify;
        font-family: IRANSansNumeralLight;
        position: relative;
-        top : 20px;
+        top: 20px;
      }
-      .three-dots{
+      .three-dots {
        align-items: center;
        justify-content: space-around;
-        & div{
-          width : 9px;
-          height : 9px;
+        & div {
+          width: 9px;
+          height: 9px;
          border-radius: 8px;
-          background-color : #afafaf;
+          background-color: #afafaf;
        }
      }
-      & img{
+      & img {
        position: absolute;
-        top : 0px;
-        width : 100%;
+        top: 0px;
+        width: 100%;
        height: 30%;
      }
-      
    }
-    & button{
+    & button {
      background: rgb(176, 73, 186);
-      background: linear-gradient(180deg,rgb(163, 73, 186)  0%, rgb(108, 72, 191) 52%);
+      background: linear-gradient(180deg, rgb(163, 73, 186) 0%, rgb(108, 72, 191) 52%);
      min-width: 200px;
-      margin : 50px auto 0px; 
-      border : none;
-      padding : 10px 0px;
+      margin: 50px auto 0px;
+      border: none;
+      padding: 10px 0px;
      font-size: 22px;
      border-radius: 15px;
-      color : white;
-      box-shadow: 0 0 30px rgba(0,0,0,1);
+      color: white;
+      box-shadow: 0 0 30px rgba(0, 0, 0, 1);
    }
  }
-}
+}
--- a/src/views/Auth/Bio/FirstBio/FirstBio.js
+++ b/src/views/Auth/Bio/FirstBio/FirstBio.js
@ -2,28 +2,28 @@ import React, { Component } from 'react';
 import NavigateNextIcon from '@material-ui/icons/NavigateNext';
 import bioFirst from '../../../../assets/icons/bioFirst.png';

-
 export default class FirstBio extends Component {
  render() {
-    return(
+    return (
      <>
-        <img src={bioFirst} 
-          style={{left : '-5%'}} alt="" />
+        <img src={bioFirst} style={{ left: '-5%' }} alt="" />
        <p>
-        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی میباشد. 
+          لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک
+          است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی
+          تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی میباشد.
        </p>
-        <div style={{position: 'absolute', right : -5 }} onClick={() => this.props.setSection(1)}>
-          <NavigateNextIcon style={{color : "#cfcfcf" , width : 50, height : 50, fontWeight : 900}} />
+        <div style={{ position: 'absolute', right: -5 }} onClick={() => this.props.setSection(1)}>
+          <NavigateNextIcon style={{ color: '#cfcfcf', width: 50, height: 50, fontWeight: 900 }} />
        </div>
-        <div className="three-dots d-flex"  style={{width: 60 , height: 20, position : 'absolute', bottom : 20}}>
-          <div> 
-          </div>
-          <div> 
-          </div>
-          <div  style={{backgroundColor : 'white', width : 11, height : 11}}> 
-          </div>
+        <div
+          className="three-dots d-flex"
+          style={{ width: 60, height: 20, position: 'absolute', bottom: 20 }}
+        >
+          <div></div>
+          <div></div>
+          <div style={{ backgroundColor: 'white', width: 11, height: 11 }}></div>
        </div>
      </>
    );
  }
-}
+}
--- a/src/views/Auth/Bio/SecondBio/SecondBio.js
+++ b/src/views/Auth/Bio/SecondBio/SecondBio.js
@ -5,27 +5,29 @@ import bioSecond from '../../../../assets/icons/bioSecond.png';

 export default class SecondBio extends Component {
  render() {
-    return(
+    return (
      <>
-        <img src={bioSecond} style={{left : '-3%'}} alt="" />
+        <img src={bioSecond} style={{ left: '-3%' }} alt="" />
        <p>
-        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی میباشد. 
+          لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک
+          است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی
+          تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی میباشد.
        </p>
-        <div style={{position: 'absolute', right : -5 }}  onClick={() => this.props.setSection(2)}>
-          <NavigateNextIcon style={{color : "#cfcfcf" , width : 50, height : 50}} />
+        <div style={{ position: 'absolute', right: -5 }} onClick={() => this.props.setSection(2)}>
+          <NavigateNextIcon style={{ color: '#cfcfcf', width: 50, height: 50 }} />
        </div>
-        <div style={{position: 'absolute', left : -5 }}  onClick={() => this.props.setSection(0)}>
-          <NavigateBeforeIcon style={{color : "#cfcfcf" , width : 50, height : 50}} />
+        <div style={{ position: 'absolute', left: -5 }} onClick={() => this.props.setSection(0)}>
+          <NavigateBeforeIcon style={{ color: '#cfcfcf', width: 50, height: 50 }} />
        </div>
-        <div className="three-dots d-flex"  style={{width: 60 , height: 20, position : 'absolute', bottom : 20}}>
-          <div> 
-          </div>
-          <div  style={{backgroundColor : 'white', width : 11, height : 11}}> 
-          </div>
-          <div> 
-          </div>
+        <div
+          className="three-dots d-flex"
+          style={{ width: 60, height: 20, position: 'absolute', bottom: 20 }}
+        >
+          <div></div>
+          <div style={{ backgroundColor: 'white', width: 11, height: 11 }}></div>
+          <div></div>
        </div>
      </>
    );
  }
-}
+}
--- a/src/views/Auth/Bio/ThirdBio/ThirdBio.js
+++ b/src/views/Auth/Bio/ThirdBio/ThirdBio.js
@ -5,24 +5,26 @@ import bioThird from '../../../../assets/icons/bioThird.png';

 export default class SecondBio extends Component {
  render() {
-    return(
+    return (
      <>
-        <img src={bioThird} style={{left : '-2%',top : 10}} alt="" />
+        <img src={bioThird} style={{ left: '-2%', top: 10 }} alt="" />
        <p>
-        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی میباشد. 
+          لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک
+          است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی
+          تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی میباشد.
        </p>
-        <div style={{position: 'absolute', left : -5 }}  onClick={() => this.props.setSection(1)}>
-          <NavigateBeforeIcon style={{color : "#cfcfcf" , width : 50, height : 50}} />
+        <div style={{ position: 'absolute', left: -5 }} onClick={() => this.props.setSection(1)}>
+          <NavigateBeforeIcon style={{ color: '#cfcfcf', width: 50, height: 50 }} />
        </div>
-        <div className="three-dots d-flex"  style={{width: 60 , height: 20, position : 'absolute', bottom : 20}}>
-          <div style={{backgroundColor : 'white', width : 11, height : 11}}> 
-          </div>
-          <div> 
-          </div>
-          <div> 
-          </div>
+        <div
+          className="three-dots d-flex"
+          style={{ width: 60, height: 20, position: 'absolute', bottom: 20 }}
+        >
+          <div style={{ backgroundColor: 'white', width: 11, height: 11 }}></div>
+          <div></div>
+          <div></div>
        </div>
      </>
    );
  }
-}
+}
--- a/src/views/Auth/Login/Code/Code.js
+++ b/src/views/Auth/Login/Code/Code.js
@ -9,67 +9,66 @@ export default class Code extends Component {
      auth_code3: '',
      auth_code4: '',
      flag: false,
-    }
+    };
  }

  flagSetter = () => {
    this.setState({
      flag: true,
-    })
-  }
+    });
+  };

  changeValue = (e) => {
-    if (e.target.value.match("^[0-9]{1}$")) {
+    if (e.target.value.match('^[0-9]{1}$')) {
      this.setState({
        [e.target.name]: e.target.value,
-      })
-      if(e.target.name === 'auth_code1'){
-        this.setState({o1:e.target.value})
+      });
+      if (e.target.name === 'auth_code1') {
+        this.setState({ o1: e.target.value });
        this.inputRef2.focus();
-      }else if(e.target.name === 'auth_code2'){
-        this.setState({o2:e.target.value})
+      } else if (e.target.name === 'auth_code2') {
+        this.setState({ o2: e.target.value });
        this.inputRef3.focus();
-      }else if(e.target.name === 'auth_code3'){
-        this.setState({o3:e.target.value})
+      } else if (e.target.name === 'auth_code3') {
+        this.setState({ o3: e.target.value });
        this.inputRef4.focus();
-      }else if(e.target.name === 'auth_code4'){
+      } else if (e.target.name === 'auth_code4') {
        const o4 = e.target.value;
-        const {o1,o2,o3} = this.state
-        this.props.parent.setState({otp:`${o1}${o2}${o3}${o4}`})
+        const { o1, o2, o3 } = this.state;
+        this.props.parent.setState({ otp: `${o1}${o2}${o3}${o4}` });
        return;
-        
      }
-    } else{
+    } else {
      return;
    }
-  }
+  };

  keyboardEvent = (e) => {
    if (e.keyCode === 8) {
      this.setState({
        [e.target.name]: '',
      });
-      if(e.target.name === 'auth_code1'){
+      if (e.target.name === 'auth_code1') {
        return;
-      }else if(e.target.name === 'auth_code2'){
+      } else if (e.target.name === 'auth_code2') {
        this.inputRef1.focus();
        return;
-      }else if(e.target.name === 'auth_code3'){
+      } else if (e.target.name === 'auth_code3') {
        this.inputRef2.focus();
        return;
-      }else if(e.target.name === 'auth_code4'){
+      } else if (e.target.name === 'auth_code4') {
        this.inputRef3.focus();
        return;
      }
    }
-  }
+  };

  componentDidMount() {
    this.inputRef1.focus();
  }

  render() {
-    return(
+    return (
      <>
        <div className="login-code__top d-flex flex-column">
          <div>میخوام مطمئن شم که خودتی</div>
@ -81,47 +80,63 @@ export default class Code extends Component {
            type="number"
            onChange={(e) => this.changeValue(e)}
            maxLength="1"
-            ref={(input) => { this.inputRef1 = input }}
+            ref={(input) => {
+              this.inputRef1 = input;
+            }}
            autoComplete="false"
            value={this.state.auth_code1}
-            onKeyDown={e => this.keyboardEvent(e)}
+            onKeyDown={(e) => this.keyboardEvent(e)}
          />
          <input
            name="auth_code2"
            type="number"
            onChange={(e) => this.changeValue(e)}
            maxLength="1"
-            ref={(input) => { this.inputRef2 = input }}
+            ref={(input) => {
+              this.inputRef2 = input;
+            }}
            autoComplete="false"
            value={this.state.auth_code2}
-            onKeyDown={e => this.keyboardEvent(e)}
+            onKeyDown={(e) => this.keyboardEvent(e)}
          />
          <input
            name="auth_code3"
            type="number"
            onChange={(e) => this.changeValue(e)}
            maxLength="1"
-            ref={(input) => { this.inputRef3 = input }}
+            ref={(input) => {
+              this.inputRef3 = input;
+            }}
            autoComplete="false"
            value={this.state.auth_code3}
-            onKeyDown={e => this.keyboardEvent(e)}
+            onKeyDown={(e) => this.keyboardEvent(e)}
          />
          <input
            name="auth_code4"
            type="number"
            onChange={(e) => this.changeValue(e)}
            maxLength="1"
-            ref={(input) => { this.inputRef4 = input }}
+            ref={(input) => {
+              this.inputRef4 = input;
+            }}
            autoComplete="false"
            value={this.state.auth_code4}
-            onKeyDown={e => this.keyboardEvent(e)}
+            onKeyDown={(e) => this.keyboardEvent(e)}
          />
          <div className="logo__footer d-flex align-self-center">
-            <h2 style={{fontFamily : 'IRANSansNumeralBold',marginRight : 10, color : "rgb(108, 72, 191)"}}>Eema</h2>
-            <h2 style={{fontSize :17, color : "rgb(108, 72, 191)"}}>Entertainments</h2>
+            <h2
+              style={{
+                fontFamily: 'IRANSansNumeralBold',
+                marginRight: 10,
+                color: 'rgb(108, 72, 191)',
+              }}
+            >
+              Eema
+            </h2>
+            <h2 style={{ fontSize: 17, color: 'rgb(108, 72, 191)' }}>Entertainments</h2>
          </div>
        </div>
      </>
    );
  }
-}
+}
--- a/src/views/Auth/Login/Login.js
+++ b/src/views/Auth/Login/Login.js
@ -1,36 +1,41 @@
 import React, { Component } from 'react';
-
 import Mobile from './Mobile/Mobile';
 import Code from './Code/Code';
-import proxy from '../../../Redux/proxy'
+import proxy from '../../../Redux/proxy';
 import './Login.scss';
-
 export default class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
-      section : 0,
-    }
+      section: 0,
+    };
  }
-  async componentDidUpdate(){
-    const {cellphone,otp,section} = this.state
-    if(cellphone && !otp) proxy.get("public/otp",{cellphone})
-    if(section && cellphone && otp) if(await proxy.login({cellphone,otp})) window.location.href="/"
+  async componentDidUpdate() {
+    const { cellphone, otp, section } = this.state;
+    if (cellphone && !otp) proxy.get('public/otp', { cellphone });
+    if (section && cellphone && otp)
+      if (await proxy.login({ cellphone, otp })) window.location.href = '/';
  }
-  
+
  render() {
-    const {section} = this.state;
-    return(
+    const { section } = this.state;
+    return (
      <div className="login d-flex flex-column">
-        {
-          section  ? <Code parent={this}/> :<Mobile parent={this} /> 
-        }
-       
+        {section ? <Code parent={this} /> : <Mobile parent={this} />}
+
        <div className="logo__footer d-flex align-self-center">
-            <h2 style={{fontFamily : 'IRANSansNumeralBold',marginRight : 10, color : "rgb(108, 72, 191)"}}>Eema</h2>
-            <h2 style={{fontSize :17, color : "rgb(108, 72, 191)"}}>Entertainments</h2>
+          <h2
+            style={{
+              fontFamily: 'IRANSansNumeralBold',
+              marginRight: 10,
+              color: 'rgb(108, 72, 191)',
+            }}
+          >
+            Eema
+          </h2>
+          <h2 style={{ fontSize: 17, color: 'rgb(108, 72, 191)' }}>Entertainments</h2>
        </div>
      </div>
    );
  }
-}
+}
--- a/src/views/Auth/Login/Login.scss
+++ b/src/views/Auth/Login/Login.scss
@ -1,22 +1,22 @@
-@media screen and (max-width: 4500px){
-  .login{
+@media screen and (max-width: 4500px) {
+  .login {
    width: 100%;
    height: 100%;
    background-color: #efefef;
    position: relative;
-    & button{
+    & button {
      background: rgb(176, 73, 186);
-      background: linear-gradient(180deg,rgb(163, 73, 186)  0%, rgb(108, 72, 191) 52%);
+      background: linear-gradient(180deg, rgb(163, 73, 186) 0%, rgb(108, 72, 191) 52%);
      min-width: 200px;
-      margin : 50px auto 0px; 
-      border : none;
-      padding : 10px 0px;
+      margin: 50px auto 0px;
+      border: none;
+      padding: 10px 0px;
      font-size: 22px;
      border-radius: 15px;
-      color : white;
+      color: white;
      box-shadow: 0 0 30px rgb(119, 118, 118);
    }
-    &-mobile__top{
+    &-mobile__top {
      width: 100%;
      height: 30%;
      flex-direction: column;
@ -26,102 +26,102 @@
      color: white;
      box-shadow: 0 0 80px rgba(77, 75, 75, 0.8);
      position: relative;
-      & div{
+      & div {
        width: 200px;
        text-align: right;
        position: relative;
-        left : 30px;
+        left: 30px;
        z-index: 150;
      }
-      & p{
+      & p {
        width: 200px;
        position: relative;
-        left : 30px;
+        left: 30px;
        z-index: 150;
-      } 
-      &  img{
-        width :  300%;
-        height : 300%;
+      }
+      & img {
+        width: 300%;
+        height: 300%;
        position: absolute;
-        top : -140%;
+        top: -140%;
        left: -105%;
        z-index: 100;
      }
    }
-    &-mobile__input{
-      width:280px;
-      margin : 30% auto 0px;
+    &-mobile__input {
+      width: 280px;
+      margin: 30% auto 0px;
      position: relative;
      z-index: 200;
-      input{
+      input {
        width: 100%;
        border-radius: 20px;
-        border : 2px solid rgb(113, 88, 177);
-        background :rgb(194, 185, 220);
-        padding : 2px 0px 2px 85px;
+        border: 2px solid rgb(113, 88, 177);
+        background: rgb(194, 185, 220);
+        padding: 2px 0px 2px 85px;
        text-align: left;
-        direction :ltr;
+        direction: ltr;
        font-size: 25px;
        color: rgb(102, 102, 102);
-        &:focus{
-          outline : none;
+        &:focus {
+          outline: none;
        }
      }
-      div{
-        position : absolute;
-        left : 65px;
-        top :4px;
+      div {
+        position: absolute;
+        left: 65px;
+        top: 4px;
        font-size: 25px;
-        color : rgb(102, 102, 102);
+        color: rgb(102, 102, 102);
      }
    }
-    &-code__bottom{
+    &-code__bottom {
      position: absolute;
      bottom: 0px;
      left: 0px;
-      width : 100%;
-      height : 50%;
+      width: 100%;
+      height: 50%;
      background-color: rgb(233, 233, 233);
      border-top-left-radius: 40px;
      border-top-right-radius: 40px;
      justify-content: center;
      z-index: 200;
      direction: ltr;
-      input{
+      input {
        width: 40px;
-        border : 0px;
-        border-bottom : 2px solid rgb(113, 88, 177);
-        height : 40px;
-        margin : 60px 7px 0px;
+        border: 0px;
+        border-bottom: 2px solid rgb(113, 88, 177);
+        height: 40px;
+        margin: 60px 7px 0px;
        text-align: center;
-        direction : ltr;
+        direction: ltr;
        font-size: 24px;
-        color : rgb(101, 61, 196);
+        color: rgb(101, 61, 196);
        background-color: rgb(233, 233, 233);
-        &:focus{
-          outline : none;
+        &:focus {
+          outline: none;
        }
      }
    }
-    &-code__top{
+    &-code__top {
      position: relative;
      direction: rtl;
-      width : 100%;
-      height : 60%;
+      width: 100%;
+      height: 60%;
      justify-content: flex-end;
      align-items: center;
      background: rgb(176, 73, 186);
-      background: linear-gradient(180deg,rgb(163, 73, 186)  0%, rgb(108, 72, 191) 52%);
-      text-align:right;
+      background: linear-gradient(180deg, rgb(163, 73, 186) 0%, rgb(108, 72, 191) 52%);
+      text-align: right;
      font-size: 14px;
      color: white;
-      & div{
+      & div {
        width: 200px;
        position: relative;
        right: -10%;
        bottom: 20%;
      }
-      & p{
+      & p {
        width: 200px;
        position: relative;
        right: -10%;
@ -129,4 +129,4 @@
      }
    }
  }
-}
+}
--- a/src/views/Auth/Login/Mobile/Mobile.js
+++ b/src/views/Auth/Login/Mobile/Mobile.js
@ -3,25 +3,37 @@ import phonenumber from '../../../../assets/icons/phonenumber.png';

 export default class Mobile extends Component {
  render() {
-    return(
+    return (
      <>
        <div className="login-mobile__top d-flex">
          <div>منتظرت بودیم</div>
          <p>شماره‌تو بده تا کد تأیید رو برات بفرستم. دست دست نکن</p>
-          <img src={phonenumber}  alt=""/>
+          <img src={phonenumber} alt="" />
        </div>
        <div className="login-mobile__input d-flex">
-          <input type="text" maxLength={9}  inputMode="numeric"
-          onChange={e=>this.setState({cellphone:e.target.value})}
-           onInput={(e)=>e.target.value=e.target.value.replace(/[\u0660-\u0669\u06f0-\u06f9]/g, function (c) {
+          <input
+            type="text"
+            maxLength={9}
+            inputMode="numeric"
+            onChange={(e) => this.setState({ cellphone: e.target.value })}
+            onInput={(e) =>
+              (e.target.value = e.target.value
+                .replace(/[\u0660-\u0669\u06f0-\u06f9]/g, function (c) {
                  return c.charCodeAt(0) & 0xf;
-              }).replace(/[^\d]/,'')} />
+                })
+                .replace(/[^\d]/, ''))
+            }
+          />
          <div>09</div>
        </div>
-        <button onClick={() => this.props.parent.setState({section:1,cellphone:"09"+this.state.cellphone})}>
+        <button
+          onClick={() =>
+            this.props.parent.setState({ section: 1, cellphone: '09' + this.state.cellphone })
+          }
+        >
          ادامه
        </button>
      </>
    );
  }
-}
+}
--- a/src/views/Auth/Logo/Logo.js
+++ b/src/views/Auth/Logo/Logo.js
@ -1,35 +1,36 @@
 import React, { Component } from 'react';
 import Loader from '../loader/loader';

-
 import logo from '../../../assets/icons/logo.svg';

 import './Logo.scss';
 export default class Logo extends Component {
  componentDidMount() {
-    setTimeout(() =>{
+    setTimeout(() => {
      this.props.setPage('bio');
-    },1200);
+    }, 1200);
  }
  render() {
-    return(
+    return (
      <div className="logo d-flex flex-column">
-        <img src={logo} style={{width : 150, height :150}} alt=""/>
+        <img src={logo} style={{ width: 150, height: 150 }} alt="" />
        <div className="logo__title d-flex">
-          <h1 style={{fontFamily : 'IRANSansNumeralBold'}}>ایما</h1>
+          <h1 style={{ fontFamily: 'IRANSansNumeralBold' }}>ایما</h1>
          <span></span>
-          <h1 style={{fontSize :20}}>داستانبازی</h1>
+          <h1 style={{ fontSize: 20 }}>داستانبازی</h1>
        </div>
        <div className="logo__footer d-flex flex-column align-items-center">
          <div className="mb-4">
            <Loader />
          </div>
          <div className="d-flex">
-            <h2 style={{fontFamily : 'IRANSansNumeralBold',marginRight : 10,color: "white"}}>Eema</h2>
-            <h2 style={{fontSize :17,color: "white"}}>Entertainments</h2>
+            <h2 style={{ fontFamily: 'IRANSansNumeralBold', marginRight: 10, color: 'white' }}>
+              Eema
+            </h2>
+            <h2 style={{ fontSize: 17, color: 'white' }}>Entertainments</h2>
          </div>
        </div>
      </div>
    );
  }
-}
+}
--- a/src/views/Auth/Logo/Logo.scss
+++ b/src/views/Auth/Logo/Logo.scss
@ -1,37 +1,37 @@
-@media screen and (max-width: 4500px){
-  .logo{
+@media screen and (max-width: 4500px) {
+  .logo {
    width: 100%;
    height: 100%;
-    justify-content:center;
-    align-items:center;
-    background: rgb(111,108,255);
-    background: linear-gradient(180deg, rgba(111,108,255,1) 0%, rgba(105,73,186,1) 52%);
+    justify-content: center;
+    align-items: center;
+    background: rgb(111, 108, 255);
+    background: linear-gradient(180deg, rgba(111, 108, 255, 1) 0%, rgba(105, 73, 186, 1) 52%);
    position: relative;
-    &__title{
+    &__title {
      position: relative;
      right: 10px;
      margin-top: 25px;
-      align-items:center;
-      & h1{
+      align-items: center;
+      & h1 {
        font-size: 25px;
        color: white;
      }
-      & span{
-        margin : 0px 5px;
+      & span {
+        margin: 0px 5px;
        width: 2px;
-        height:22px;
-        background-color:white;
+        height: 22px;
+        background-color: white;
        position: relative;
        bottom: 5px;
      }
    }
-    &__footer{
+    &__footer {
      direction: ltr;
      position: absolute;
      bottom: 55px;
-      & h2{
+      & h2 {
        font-size: 16px;
      }
    }
  }
-}
+}
--- a/src/views/Auth/loader/loader.js
+++ b/src/views/Auth/loader/loader.js
@ -9,7 +9,6 @@ const useStylesFacebook = makeStyles((theme) => ({
    top: '2px',
    right: '2px',
    marginLeft: '6px',
-
  },
  bottom: {
    color: theme.palette.grey[theme.palette.type === 'light' ? 200 : 700],
--- a/src/views/ChatRoom/Body/Body.js
+++ b/src/views/ChatRoom/Body/Body.js
--- a/src/views/ChatRoom/Body/Body.scss
+++ b/src/views/ChatRoom/Body/Body.scss
@ -1,80 +1,80 @@
-@media screen and (max-width: 4500px){
-  .chat-body{
+@media screen and (max-width: 4500px) {
+  .chat-body {
    background-color: rgb(210, 196, 214);
-    justify-content:flex-start;
-    flex : 1;
-    height : 100%;
+    justify-content: flex-start;
+    flex: 1;
+    height: 100%;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
-    &__content{
+    &__content {
      background: url(../../../assets/images/chat.png);
      background-size: cover;
-      padding : 0px 10px 0px;
-      height : 100%;
+      padding: 0px 10px 0px;
+      height: 100%;
      min-height: 200px;
      position: relative;
      border-top-left-radius: 40px;
      border-top-right-radius: 40px;
      position: relative;
-      top : -75px;
-      &--preview{
+      top: -75px;
+      &--preview {
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
-        justify-content:center;
-        align-items:center;
+        justify-content: center;
+        align-items: center;
        background-color: rgb(210, 196, 214);
        z-index: 1000;
-        & img{
+        & img {
          width: 100%;
-          max-height :  400px;
-          object-fit:scale-down;
+          max-height: 400px;
+          object-fit: scale-down;
        }
      }
-      &--confirm{
+      &--confirm {
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0px;
        left: 0px;
-        justify-content:center;
-        align-items:center;
+        justify-content: center;
+        align-items: center;
        z-index: 300;
-        &___box{
+        &___box {
          position: relative;
          bottom: 50px;
          width: 100%;
          max-width: 250px;
          padding: 10px;
          background: rgb(139, 73, 186);
-          background: linear-gradient(180deg, rgb(144, 73, 186) 0%, rgb(111,108,255) 95%);
+          background: linear-gradient(180deg, rgb(144, 73, 186) 0%, rgb(111, 108, 255) 95%);
          text-align: right;
          direction: rtl;
          color: white;
          border-radius: 5px;
          box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
          font-size: 16px;
-          &---options{
+          &---options {
            justify-self: flex-end;
            align-self: flex-start;
            width: 110px;
-            height : 40px;
-            justify-content:space-between;
-            & button{
+            height: 40px;
+            justify-content: space-between;
+            & button {
              background-color: inherit;
-              border : none;
+              border: none;
              font-size: 14px;
-              &:focus{
-                outline : none;
+              &:focus {
+                outline: none;
              }
            }
          }
        }
      }
    }
-    &__footer{
+    &__footer {
      width: 100%;
      z-index: 1000;
      background-color: rgb(210, 196, 214);
@ -89,4 +89,4 @@
      padding-bottom: 5px;
    }
  }
-}
+}
--- a/src/views/ChatRoom/Body/ChatInputs/ChatInput.js
+++ b/src/views/ChatRoom/Body/ChatInputs/ChatInput.js
@ -9,8 +9,19 @@ import SendIcon from '@material-ui/icons/Send';

 import './ChatInputs.scss';
 export default class ChatInputs extends Component {
-  render(){
-    const {onStop,stop,start,recordState,cancel,typeText,message,sendMessage,addFile,file} = this.props;
+  render() {
+    const {
+      onStop,
+      stop,
+      start,
+      recordState,
+      cancel,
+      typeText,
+      message,
+      sendMessage,
+      addFile,
+      file,
+    } = this.props;
    return (
      <div className="chat-inputs d-flex">
        <AudioReactRecorder state={recordState} onStop={onStop} />
@ -24,45 +35,80 @@ export default class ChatInputs extends Component {
              controls
            /> : null
          } */}
-          {
-            recordState !== 'start' ?
-              <div className="chat-inputs__box d-flex">
-                <div className="chat-inputs__box--file">
-                  <input type="file" onChange={(e) => addFile(e)}/>
-                  <AttachmentIcon style={{color : "white", marginRight : 10, width : 30, height: 30, zIndex : 10,position :  "absolute", top: -4, left: 0}} />
-                </div>
-                <TextField  id="standard-textarea" label=""  value={message}  placeholder="یک پیام بنویسید..." rowsMax={4} onChange={(e)  => typeText(e)} multiline />
-              </div>
-              : null
-          }
+        {recordState !== 'start' ? (
+          <div className="chat-inputs__box d-flex">
+            <div className="chat-inputs__box--file">
+              <input type="file" onChange={(e) => addFile(e)} />
+              <AttachmentIcon
+                style={{
+                  color: 'white',
+                  marginRight: 10,
+                  width: 30,
+                  height: 30,
+                  zIndex: 10,
+                  position: 'absolute',
+                  top: -4,
+                  left: 0,
+                }}
+              />
+            </div>
+            <TextField
+              id="standard-textarea"
+              label=""
+              value={message}
+              placeholder="یک پیام بنویسید..."
+              rowsMax={4}
+              onChange={(e) => typeText(e)}
+              multiline
+            />
+          </div>
+        ) : null}
        <div className="chat-inputs__voice d-flex">
          <div className="chat-inputs__voice d-flex">
-            {
-              (recordState === null && message === '' && file === null) ||   (recordState && recordState.url && message === '' && file === null) ?
+            {(recordState === null && message === '' && file === null) ||
+            (recordState && recordState.url && message === '' && file === null) ? (
              <div className="chat-inputs__voice--icon d-flex" onClick={start}>
-                <MicIcon style={{color : "rgb(15, 93, 209)",backgroundColor : "white", width : 30, height: 30,borderRadius : 30}} />
-              </div> : null
-            }
-            {
-              message !== '' || file !== null?
+                <MicIcon
+                  style={{
+                    color: 'rgb(15, 93, 209)',
+                    backgroundColor: 'white',
+                    width: 30,
+                    height: 30,
+                    borderRadius: 30,
+                  }}
+                />
+              </div>
+            ) : null}
+            {message !== '' || file !== null ? (
              <div className="chat-inputs__voice--icon d-flex" onClick={() => sendMessage()}>
-                <SendIcon style={{color : "rgb(15, 93, 209)",backgroundColor : "white", width : 25, height: 25,borderRadius : 30}} />
-              </div> : null
-            }
-            {
-              recordState === 'start' ?
+                <SendIcon
+                  style={{
+                    color: 'rgb(15, 93, 209)',
+                    backgroundColor: 'white',
+                    width: 25,
+                    height: 25,
+                    borderRadius: 30,
+                  }}
+                />
+              </div>
+            ) : null}
+            {recordState === 'start' ? (
              <>
                <div className="chat-inputs__voice--icon d-flex mr-2" onClick={cancel}>
-                  <CloseIcon style={{color : "red", backgroundColor : "white", width : 30, height: 30}} />
+                  <CloseIcon
+                    style={{ color: 'red', backgroundColor: 'white', width: 30, height: 30 }}
+                  />
                </div>
                <div className="chat-inputs__voice--icon d-flex" onClick={stop}>
-                  <CheckIcon style={{color : "green", backgroundColor : "white", width : 30, height: 30}} />
+                  <CheckIcon
+                    style={{ color: 'green', backgroundColor: 'white', width: 30, height: 30 }}
+                  />
                </div>
-              </> : null
-            }
+              </>
+            ) : null}
          </div>
        </div>
      </div>
    );
  }
-}
+}
--- a/src/views/ChatRoom/Body/ChatInputs/ChatInputs.scss
+++ b/src/views/ChatRoom/Body/ChatInputs/ChatInputs.scss
@ -1,29 +1,29 @@
-@media screen and (max-width: 4500px){
-  .chat-inputs{
+@media screen and (max-width: 4500px) {
+  .chat-inputs {
    border-bottom-right-radius: 40px;
    border-bottom-left-radius: 40px;
    width: 100%;
-    padding : 2px 5px 0px;
-    align-items : flex-end;
-    justify-content : flex-end;
-    &__box{
+    padding: 2px 5px 0px;
+    align-items: flex-end;
+    justify-content: flex-end;
+    &__box {
      width: 100%;
      border-radius: 30px;
-      background: rgb(18,15,153);
-      background: linear-gradient(90deg, rgba(18,15,153,1) 0%, rgba(105,9,121,1) 60%);
+      background: rgb(18, 15, 153);
+      background: linear-gradient(90deg, rgba(18, 15, 153, 1) 0%, rgba(105, 9, 121, 1) 60%);
      min-height: 45px;
      margin-right: 10px;
      align-items: center;
-      padding : 8px 15px;
-      &--file{
+      padding: 8px 15px;
+      &--file {
        width: 30px;
        height: 30px;
        position: relative;
-        align-self : flex-end;
-        input[type=file]{
+        align-self: flex-end;
+        input[type='file'] {
          opacity: 0;
-          width :100%;
-          height : 100%;
+          width: 100%;
+          height: 100%;
          z-index: 100;
          position: relative;
        }
@ -43,54 +43,53 @@
      //     color : white;
      //   }
      // }
-      .MuiTextField-root{
-        flex :  1;
-        border : 0px  !important;
-        outline : none !important;
-        text-align : right;
-        textarea{
+      .MuiTextField-root {
+        flex: 1;
+        border: 0px !important;
+        outline: none !important;
+        text-align: right;
+        textarea {
          text-align: right;
          direction: rtl;
-          color : white;
+          color: white;
          font-size: 14px;
          font-family: IRANSansNumeralLight;
        }
      }
    }
-    &__voice{
-      &--icon{
+    &__voice {
+      &--icon {
        width: 50px;
        height: 50px;
        border-radius: 30px;
-        justify-content:center;
-        align-items:center;
+        justify-content: center;
+        align-items: center;
        background-color: white;
      }
    }
  }
 }

-
-.audio-react-recorder{
-  display:none;
+.audio-react-recorder {
+  display: none;
 }

 .MuiInput-underline:hover:not(.Mui-disabled):before {
-    border-bottom: 0px !important;
+  border-bottom: 0px !important;
 }

-.MuiInput-underline:hover:not(.Mui-disabled):before{
-  border-bottom : 0px !important;
+.MuiInput-underline:hover:not(.Mui-disabled):before {
+  border-bottom: 0px !important;
 }

-.MuiInput-underline:hover:not(.Mui-disabled):before{
-  border-bottom : 0px !important;
+.MuiInput-underline:hover:not(.Mui-disabled):before {
+  border-bottom: 0px !important;
 }

-.MuiInput-underline:after{
-  border-bottom : 0px !important;
+.MuiInput-underline:after {
+  border-bottom: 0px !important;
 }

-.MuiInput-underline:before{
+.MuiInput-underline:before {
  border-bottom: 0px !important;
-}
+}
--- a/src/views/ChatRoom/Body/ChatSuggest/ChatSuggest.js
+++ b/src/views/ChatRoom/Body/ChatSuggest/ChatSuggest.js
@ -1,34 +1,24 @@
 import React, { Component } from 'react';
 import Carousel from 'react-elastic-carousel';
-
 import './ChatSuggest.scss';
-
 export default class ChatSuggest extends Component {
-  render(){
-    const {suggest} = this.props;
+  render() {
+    const { suggest } = this.props;
    return (
      <div className="chat-suggest portrait-slider d-flex flex-column">
-        <Carousel itemsToShow={1} isRTL={true} enableTilt={true}  showArrows={false}>
-          {
-            suggest.map((item,i) => (
-              <Suggest item={item} key={i} />
-            ))
-          }
+        <Carousel itemsToShow={1} isRTL={true} enableTilt={true} showArrows={false}>
+          {suggest.map((item, i) => (
+            <Suggest item={item} key={i} />
+          ))}
        </Carousel>
-        
      </div>
    );
  }
 }

-
 class Suggest extends Component {
-  render(){
-    const {item} = this.props;
-    return(
-      <div className="chat-suggest__item d-flex">
-        {item.text}
-      </div>
-    );
+  render() {
+    const { item } = this.props;
+    return <div className="chat-suggest__item d-flex">{item.text}</div>;
  }
-}
+}
--- a/src/views/ChatRoom/Body/ChatSuggest/ChatSuggest.scss
+++ b/src/views/ChatRoom/Body/ChatSuggest/ChatSuggest.scss
@ -1,53 +1,51 @@
-@media screen and (max-width: 4500px){
-  .chat-suggest{
+@media screen and (max-width: 4500px) {
+  .chat-suggest {
    // border-bottom-right-radius: 40px;
    // border-bottom-left-radius: 40px;
-    width : 100%;
+    width: 100%;
    // height : 40px;
-    padding : 2px 0px 0px;
-    align-items : flex-end;
-    &__item{
-      padding : 8px 6px;
-      background-color : white;
+    padding: 2px 0px 0px;
+    align-items: flex-end;
+    &__item {
+      padding: 8px 6px;
+      background-color: white;
      border-radius: 5px;
-      margin : 5px;
-      width :100% !important;
-      justify-content : center;
-      color : black;
+      margin: 5px;
+      width: 100% !important;
+      justify-content: center;
+      color: black;
      min-height: 60px;
    }
  }
 }

-.portrait-slider{
-  width : 100% !important;
+.portrait-slider {
+  width: 100% !important;
  height: 100% !important;
  position: relative;
-  padding : 20px 12px 0px;
+  padding: 20px 12px 0px;
  margin-bottom: 10px;
  justify-content: center !important;
 }

-
-
-.rec-dot_active{
+.rec-dot_active {
  background-color: white !important;
  color: white !important;
  // box-shadow: 0 0 1px rgba(255, 255, 255, 1) !important;
 }

-.Carousel-button-10{
+.Carousel-button-10 {
  background-color: white !important;
 }
-.rec-pagination{
+.rec-pagination {
  z-index: 600;
  position: absolute;
  top: -12px;
  // left: calc(50% - 20px) !important;
-  & button{
+  & button {
    background-color: grey;
-    margin : 2px !important;
-    box-shadow: 0px 0px 0px rgba(255,255,255,1);
+    margin: 2px !important;
+    box-shadow: 0px 0px 0px rgba(255, 255, 255, 1);
  }
 }

@ -64,4 +62,4 @@
 //   cursor: pointer;
 //   box-shadow: 0px 0px 0px rgba(255,255,255,1) !important;
 //   background-color: white !important;
-// }
+// }
--- a/src/views/ChatRoom/Body/Message/DraggableMessage/DraggableMessage.js
+++ b/src/views/ChatRoom/Body/Message/DraggableMessage/DraggableMessage.js
@ -1,11 +1,13 @@
-import React, {Component} from 'react';
-import {SortableContainer, SortableElement} from 'react-sortable-hoc';
+import React, { Component } from 'react';
+import { SortableContainer, SortableElement } from 'react-sortable-hoc';
 import arrayMove from 'array-move';
 import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt';

-const SortableItem = SortableElement(({value}) => <div className="message-2d__options--draggable d-flex">{value}</div>);
+const SortableItem = SortableElement(({ value }) => (
+  <div className="message-2d__options--draggable d-flex">{value}</div>
+));

-const SortableList = SortableContainer(({items}) => {
+const SortableList = SortableContainer(({ items }) => {
  return (
    <div className="message-2d__options d-flex flex-column">
      {items.map((value, index) => (
@ -20,38 +22,39 @@ export default class DraggableMessage extends Component {
    items: ['استقلال', 'پرسپولیس', 'سپاهان'],
  };

-  onSortEnd = ({oldIndex, newIndex}) => {
-    this.setState(({items}) => ({
+  onSortEnd = ({ oldIndex, newIndex }) => {
+    this.setState(({ items }) => ({
      items: arrayMove(items, oldIndex, newIndex),
    }));
  };
  render() {
-    const {message, user1, user2} = this.props;
+    const { message, user1, user2 } = this.props;
    return (
-      <div 
+      <div
        className="message-2d d-flex flex-column d-flex"
-        style={{ 
+        style={{
          marginRight: message.user.id === user1.id ? 0 : 40,
          marginLeft: message.user.id === user1.id ? 40 : 0,
        }}
      >
-        <img  
-          src={message.user.id === user1.id ? user1.imageUri : user2.imageUri} 
-          style={{alignSelf: message.user.id === user1.id ? "flex-end" : "flex-start" }}
+        <img
+          src={message.user.id === user1.id ? user1.imageUri : user2.imageUri}
+          style={{ alignSelf: message.user.id === user1.id ? 'flex-end' : 'flex-start' }}
          alt={message.id}
        />
-        <div 
-          className='message-2d__text d-flex'
-        >
-          {
-
-            message.text !== null ?
-            <p id="3" style={{color: message.user.id === user1.id ? "white" : "black" }}>{message.text}</p> : null
-          }
+        <div className="message-2d__text d-flex">
+          {message.text !== null ? (
+            <p id="3" style={{ color: message.user.id === user1.id ? 'white' : 'black' }}>
+              {message.text}
+            </p>
+          ) : null}
        </div>
        <SortableList items={this.state.items} onSortEnd={this.onSortEnd} />
-        <button className="message-2d__submit">ثبت<ArrowRightAltIcon style={{color : "white" , width : 32, height : 32, marginLeft: 10}} /></button>
+        <button className="message-2d__submit">
+          ثبت
+          <ArrowRightAltIcon style={{ color: 'white', width: 32, height: 32, marginLeft: 10 }} />
+        </button>
      </div>
    );
  }
-}
+}
--- a/src/views/ChatRoom/Body/Message/Message.js
+++ b/src/views/ChatRoom/Body/Message/Message.js
@ -6,34 +6,31 @@ import DraggableMessage from './DraggableMessage/DraggableMessage';
 import SliderMessage from './SliderMessage/SliderMessage.js';
 import RadioMessage from './RadioMessage/RadioMessage.js';

-
 export default class Message extends Component {
-  
-  render(){
-    const {message, user1, user2,file,document} = this.props;
+  render() {
+    const { message, user1, user2, file, document } = this.props;
    return (
      <>
-        {
-          message.type === 'normal' ? 
-          <NormalMessage message={message} user1={user1} user2={user2} file={file} document={document} /> : null
-        }
-        {
-          message.type === '2d' ? 
-          <Message2D message={message} user1={user1} user2={user2} /> : null
-        }
-        {
-          message.type === 'draggable' ? 
-          <DraggableMessage message={message} user1={user1} user2={user2} /> : null
-        }
-        {
-          message.type === 'slider' ? 
-          <SliderMessage message={message} user1={user1} user2={user2} /> : null
-        }
-        {
-          message.type === 'radio' ? 
-          <RadioMessage message={message} user1={user1} user2={user2} /> : null
-        }
+        {message.type === 'normal' ? (
+          <NormalMessage
+            message={message}
+            user1={user1}
+            user2={user2}
+            file={file}
+            document={document}
+          />
+        ) : null}
+        {message.type === '2d' ? <Message2D message={message} user1={user1} user2={user2} /> : null}
+        {message.type === 'draggable' ? (
+          <DraggableMessage message={message} user1={user1} user2={user2} />
+        ) : null}
+        {message.type === 'slider' ? (
+          <SliderMessage message={message} user1={user1} user2={user2} />
+        ) : null}
+        {message.type === 'radio' ? (
+          <RadioMessage message={message} user1={user1} user2={user2} />
+        ) : null}
      </>
    );
  }
-}
+}
--- a/src/views/ChatRoom/Body/Message/Message2D/Message2D.js
+++ b/src/views/ChatRoom/Body/Message/Message2D/Message2D.js
@ -3,49 +3,45 @@ import React, { Component } from 'react';
 import './Message2D.scss';

 export default class Message2D extends Component {
-  
-  render(){
-    const {message, user1, user2} = this.props;
+  render() {
+    const { message, user1, user2 } = this.props;
    return (
-      <div 
+      <div
        className="message-2d d-flex flex-column d-flex"
-        style={{ 
+        style={{
          marginRight: message.user.id === user1.id ? 0 : 40,
          marginLeft: message.user.id === user1.id ? 40 : 0,
        }}
      >
-        <img  
-          src={message.user.id === user1.id ? user1.imageUri : user2.imageUri} 
-          style={{alignSelf: message.user.id === user1.id ? "flex-end" : "flex-start" }}
+        <img
+          src={message.user.id === user1.id ? user1.imageUri : user2.imageUri}
+          style={{ alignSelf: message.user.id === user1.id ? 'flex-end' : 'flex-start' }}
          alt={message.id}
        />
-        <div 
-          className='message-2d__text d-flex'
-        >
-          {
-
-            message.text !== null ?
-            <p id="3" style={{color: message.user.id === user1.id ? "white" : "black" }}>{message.text}</p> : null
-          }
+        <div className="message-2d__text d-flex">
+          {message.text !== null ? (
+            <p id="3" style={{ color: message.user.id === user1.id ? 'white' : 'black' }}>
+              {message.text}
+            </p>
+          ) : null}
        </div>
        <div className="message-2d__options d-flex flex-column">
-          {
-            message.options.map(option => (
-              <div className="message-2d__options--row d-flex">
-                {
-                  option.map(
-                    (item,i) => (
-                      <div key ={i} className="d-flex" style={{ width : `calc(100% / ${option.length} )`}} draggable={true}>
-                        <span>{item.name}</span>
-                      </div>
-                    )
-                  )
-                }
-              </div>
-            ))
-          }
+          {message.options.map((option) => (
+            <div className="message-2d__options--row d-flex">
+              {option.map((item, i) => (
+                <div
+                  key={i}
+                  className="d-flex"
+                  style={{ width: `calc(100% / ${option.length} )` }}
+                  draggable={true}
+                >
+                  <span>{item.name}</span>
+                </div>
+              ))}
+            </div>
+          ))}
        </div>
      </div>
    );
  }
-}
+}
--- a/src/views/ChatRoom/Body/Message/Message2D/Message2D.scss
+++ b/src/views/ChatRoom/Body/Message/Message2D/Message2D.scss
@ -1,99 +1,97 @@
-@media screen and (max-width: 4500px){
-  .message-2d{
+@media screen and (max-width: 4500px) {
+  .message-2d {
    // width: 100%;
    position: relative;
-    img{
+    img {
      width: 65px;
-      height:65px;
+      height: 65px;
      object-fit: cover;
      border-radius: 30px;
-      border : 3px solid rgba(201, 201, 201, 0.857);
+      border: 3px solid rgba(201, 201, 201, 0.857);
      position: relative;
      top: 20px;
      z-index: 50;
    }
-    &__text{
-      justify-content:flex-end;
+    &__text {
+      justify-content: flex-end;
      width: 100%;
-      padding : 15px 15px 5px;
-      background-color:white;
+      padding: 15px 15px 5px;
+      background-color: white;
      border-radius: 5px;
      position: relative;
      margin-bottom: 5px;
      text-align: right;
      direction: rtl;
-      p{
+      p {
        width: 100%;
        text-align: right;
        font-size: 16px;
        // font-family: IRANSansNumeralBold;
      }
-      
    }
-    &__options{
+    &__options {
      width: 100%;
      z-index: 200;
-      &--row{
+      &--row {
        width: 100%;
        justify-content: space-around;
-        div{
+        div {
          background-color: rgba(153, 153, 153, 0.47);
          border-radius: 10px;
          justify-content: center;
          align-items: center;
-          margin : 2px 3px;
-          padding : 6px;
-          span{
+          margin: 2px 3px;
+          padding: 6px;
+          span {
            font-size: 16px;
-            color : black;
+            color: black;
            font-weight: 600;
          }
        }
      }
-      &--radio{
-        width : calc(50% - 6px);
-        margin :  3px;
-        padding : 10px;
+      &--radio {
+        width: calc(50% - 6px);
+        margin: 3px;
+        padding: 10px;
        text-align: center;
        font-size: 16px;
-        color : black;
+        color: black;
        font-weight: 600;
        border-radius: 5px;
      }
-      &--draggable{
+      &--draggable {
        background-color: rgba(153, 153, 153, 0.47);
        border-radius: 10px;
        justify-content: center;
        align-items: center;
-        margin : 2px 3px;
-        padding : 6px;
+        margin: 2px 3px;
+        padding: 6px;
        font-size: 16px;
-        color : black;
+        color: black;
        font-weight: 600;
        position: relative;
      }
    }
-    & button{
+    & button {
      background: rgb(176, 73, 186);
-      background: linear-gradient(180deg,rgb(163, 73, 186)  0%, rgb(108, 72, 191) 52%);
-      width : 100%;
-      margin : 3px auto 0px; 
-      border : none;
-      padding : 5px 0px;
+      background: linear-gradient(180deg, rgb(163, 73, 186) 0%, rgb(108, 72, 191) 52%);
+      width: 100%;
+      margin: 3px auto 0px;
+      border: none;
+      padding: 5px 0px;
      font-size: 18px;
      border-radius: 10px;
-      color : white;
+      color: white;
    }
-    
  }
 }

-.MuiGrid-container{
+.MuiGrid-container {
  display: flex !important;
-  width:100% !important;
-  margin : 0px !important;
+  width: 100% !important;
+  margin: 0px !important;
  background-color: rgba(153, 153, 153, 0.47);
-  justify-content : center !important;
-  align-items : center !important;
+  justify-content: center !important;
+  align-items: center !important;
  border-radius: 10px;
-}
+}
--- a/src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.js
+++ b/src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.js
@ -6,107 +6,111 @@ import CloudDownloadIcon from '@material-ui/icons/CloudDownload';
 import './NormalMessage.scss';

 export default class NormalMessage extends Component {
-  
-  render(){
-    const {message, user1, user2,document} = this.props;
+  render() {
+    const { message, user1, user2, document } = this.props;
    return (
-      <div 
+      <div
        className="normal-message d-flex flex-column d-flex"
-        style={{ 
+        style={{
          marginRight: message.user.id === user1.id ? 0 : 40,
          marginLeft: message.user.id === user1.id ? 40 : 0,
-          filter: document !== null ? 'blur(16px)': 'blur(0px)',
+          filter: document !== null ? 'blur(16px)' : 'blur(0px)',
        }}
      >
-        <img  
-          src={message.user.id === user1.id ? user1.imageUri : user2.imageUri} 
-          style={{alignSelf: message.user.id === user1.id ? "flex-end" : "flex-start" }}
+        <img
+          src={message.user.id === user1.id ? user1.imageUri : user2.imageUri}
+          style={{ alignSelf: message.user.id === user1.id ? 'flex-end' : 'flex-start' }}
          alt={message.id}
        />
-        <div 
-          className={message.voice === null && message.video === null && message.image === null && message.music === null && message.document === null ? `normal-message__box d-flex` : `normal-message__box d-flex normal-message__box--file`}
-          style={{backgroundColor: message.user.id === user1.id ? "rgb(15, 93, 190)" : "white" }}
+        <div
+          className={
+            message.voice === null &&
+            message.video === null &&
+            message.image === null &&
+            message.music === null &&
+            message.document === null
+              ? `normal-message__box d-flex`
+              : `normal-message__box d-flex normal-message__box--file`
+          }
+          style={{ backgroundColor: message.user.id === user1.id ? 'rgb(15, 93, 190)' : 'white' }}
        >
-          {
-            message.voice === null && message.video === null && message.image === null && message.music === null && message.document === null ?
-              <div 
-                className="normal-message__box--detail d-flex"
-                style={{
-                  top:0,
-                  right : message.user.id === user1.id ? "auto" : 20 ,
-                  left : message.user.id === user1.id ? 20 : "auto",
-                  direction : message.user.id !== user1.id ? 'ltr' : 'rtl',
-                  paddingRight : message.user.id === user1.id ? 90 : 'auto',
-                  paddingLeft : message.user.id === user1.id ? 'auto' : 90,
-                }}
-              >
-              <div
-                style={{color: message.user.id === user1.id ? "#aaa" : "gray" }}
-              >
+          {message.voice === null &&
+          message.video === null &&
+          message.image === null &&
+          message.music === null &&
+          message.document === null ? (
+            <div
+              className="normal-message__box--detail d-flex"
+              style={{
+                top: 0,
+                right: message.user.id === user1.id ? 'auto' : 20,
+                left: message.user.id === user1.id ? 20 : 'auto',
+                direction: message.user.id !== user1.id ? 'ltr' : 'rtl',
+                paddingRight: message.user.id === user1.id ? 90 : 'auto',
+                paddingLeft: message.user.id === user1.id ? 'auto' : 90,
+              }}
+            >
+              <div style={{ color: message.user.id === user1.id ? '#aaa' : 'gray' }}>
                {message.user.name}
              </div>
-              <span
-                style={{color: message.user.id === user1.id ? "#aaa" : "gray" }}
-              >
-                12:14
-              </span>
-            </div> : null
-          }
-          
-          {
-            message.text !== null && message.video === null && message.image === null && message.music === null && message.document === null  ? 
-            <p id="3" style={{color: message.user.id === user1.id ? "white" : "black" }}>{message.text}</p> : null
-          }
-          {
-            message.voice !== null ? 
-            <ReactAudioPlayer
-              src={message.voice.url}
-              controls
-            /> : null
-          }
-          {
-            message.image !== null ? 
+              <span style={{ color: message.user.id === user1.id ? '#aaa' : 'gray' }}>12:14</span>
+            </div>
+          ) : null}
+
+          {message.text !== null &&
+          message.video === null &&
+          message.image === null &&
+          message.music === null &&
+          message.document === null ? (
+            <p id="3" style={{ color: message.user.id === user1.id ? 'white' : 'black' }}>
+              {message.text}
+            </p>
+          ) : null}
+          {message.voice !== null ? <ReactAudioPlayer src={message.voice.url} controls /> : null}
+          {message.image !== null ? (
            <div className="normal-message__box--caption">
-              <a href={message.image} download><img src={message.image} download alt=""/></a>
-              <p id="2" style={{color: message.user.id === user1.id ? "white" : "black" }}>{message.text}</p>
+              <a href={message.image} download>
+                <img src={message.image} download alt="" />
+              </a>
+              <p id="2" style={{ color: message.user.id === user1.id ? 'white' : 'black' }}>
+                {message.text}
+              </p>
            </div>
-             : null
-          }
-          {
-            message.video !== null ? 
+          ) : null}
+          {message.video !== null ? (
            <div className="normal-message__box--caption">
              <a href={message.video} download>
-                <ReactPlayer url={message.video} controls width={'100%'} height={250}/>
+                <ReactPlayer url={message.video} controls width={'100%'} height={250} />
              </a>
-              <p id="1" style={{color: message.user.id === user1.id ? "white" : "black" }}>{message.text}</p>
+              <p id="1" style={{ color: message.user.id === user1.id ? 'white' : 'black' }}>
+                {message.text}
+              </p>
            </div>
-             : null
-          }
-          {
-            message.music !== null ? 
-            <ReactAudioPlayer
-              src={message.music}
-              controls
-            /> : null
-          }
-          {
-            message.document !== null ? 
-            <a 
-              href={message.document.data} 
+          ) : null}
+          {message.music !== null ? <ReactAudioPlayer src={message.music} controls /> : null}
+          {message.document !== null ? (
+            <a
+              href={message.document.data}
              download
              className="normal-message__box--document d-flex"
              style={{
-                backgroundColor: message.user.id === user1.id ? "rgb(15, 93, 190)" : "white",
-                color: message.user.id === user1.id ? "white" : "black"
+                backgroundColor: message.user.id === user1.id ? 'rgb(15, 93, 190)' : 'white',
+                color: message.user.id === user1.id ? 'white' : 'black',
              }}
            >
-              <CloudDownloadIcon style={{color : message.user.id === user1.id ? "white" : "black" , width : 32, height : 32, marginRight: 10}} />
+              <CloudDownloadIcon
+                style={{
+                  color: message.user.id === user1.id ? 'white' : 'black',
+                  width: 32,
+                  height: 32,
+                  marginRight: 10,
+                }}
+              />
              <div>{message.document.name}</div>
-            </a> : null
-          }
-          
+            </a>
+          ) : null}
        </div>
      </div>
    );
  }
-}
+}
--- a/src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.scss
+++ b/src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.scss
@ -1,25 +1,25 @@
-@media screen and (max-width: 4500px){
-  .normal-message{
+@media screen and (max-width: 4500px) {
+  .normal-message {
    // width: 100%;
    position: relative;
-    img{
+    img {
      width: 65px;
-      height:65px;
+      height: 65px;
      object-fit: cover;
      border-radius: 30px;
-      border : 3px solid rgba(201, 201, 201, 0.857);
+      border: 3px solid rgba(201, 201, 201, 0.857);
      position: relative;
      top: 20px;
      z-index: 50;
    }
-    &__box{
-      justify-content:flex-end;
+    &__box {
+      justify-content: flex-end;
      width: 100%;
-      padding : 35px 15px 5px;
-      background-color:white;
+      padding: 35px 15px 5px;
+      background-color: white;
      border-radius: 30px;
      position: relative;
-      p{
+      p {
        width: 100%;
        text-align: right;
        direction: rtl;
@ -27,62 +27,60 @@
        // font-family: IRANSansNumeral;
        font-weight: 500;
      }
-      &--detail{
+      &--detail {
        position: absolute;
        width: 100%;
-        top : 10px;
+        top: 10px;
        justify-content: space-between;
-        span{
+        span {
          font-family: IRANSansNumeralLight;
        }
      }
-      &--caption{
+      &--caption {
        width: 100%;
        margin-bottom: 20px;
        text-align: right;
-        & img{
+        & img {
          height: 100%;
          max-height: 250px;
          width: 100%;
          max-width: 250px;
          border-radius: 0px;
-          border : 0px;
+          border: 0px;
          position: static;
        }
-        & video{
+        & video {
          height: 180px !important;
          width: 100%;
        }
-        & p{
+        & p {
          margin-top: 20px;
        }
        // & audio{
        //   min-width: 100% !important;
        // }
      }
-      &--file{
+      &--file {
        background-color: inherit !important;
      }
-      &--document{
+      &--document {
        width: 100%;
        max-width: 300px;
-        align-items:center;
+        align-items: center;
        justify-content: space-between;
        height: 50px;
-        padding : 10px;
+        padding: 10px;
        border-radius: 10px;
-        div{
+        div {
          font-size: 14px;
        }
      }
    }
-    
  }
 }

-
-.react-audio-player{
+.react-audio-player {
  width: 100% !important;
  color: red;
  fill: red;
-}
+}
--- a/src/views/ChatRoom/Body/Message/RadioMessage/RadioMessage.js
+++ b/src/views/ChatRoom/Body/Message/RadioMessage/RadioMessage.js
@ -1,57 +1,63 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt';

-
-
 export default class RadioMessage extends Component {
  constructor(props) {
    super(props);
    this.state = {
-      value : null,
-    }
+      value: null,
+    };
  }

  handleRadioChange = (newValue) => {
-    this.setState({ 
-      value: newValue
+    this.setState({
+      value: newValue,
    });
  };

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

-
-
 export default class SliderMessage extends Component {
  constructor(props) {
    super(props);
    this.state = {
-      value : 10,
-    }
+      value: 10,
+    };
  }

-  handleSliderChange = (event,newValue) => {
-    this.setState({ 
-      value: newValue
+  handleSliderChange = (event, newValue) => {
+    this.setState({
+      value: newValue,
    });
  };

  handleInputChange = (event) => {
    this.setState({
-      value : event.target.value === '' ? '' : Number(event.target.value)
+      value: event.target.value === '' ? '' : Number(event.target.value),
    });
  };

  handleBlur = () => {
    if (this.state.value < 0) {
-      this.setState({ value: 0});
+      this.setState({ value: 0 });
    } else if (this.state.value > 20) {
-      this.setState({ value: 20});
+      this.setState({ value: 20 });
    }
  };
  render() {
-    const {message, user1, user2} = this.props;
+    const { message, user1, user2 } = this.props;
    return (
-      <div 
+      <div
        className="message-2d d-flex flex-column d-flex"
-        style={{ 
+        style={{
          marginRight: message.user.id === user1.id ? 0 : 40,
          marginLeft: message.user.id === user1.id ? 40 : 0,
        }}
      >
-        <img  
-          src={message.user.id === user1.id ? user1.imageUri : user2.imageUri} 
-          style={{alignSelf: message.user.id === user1.id ? "flex-end" : "flex-start" }}
+        <img
+          src={message.user.id === user1.id ? user1.imageUri : user2.imageUri}
+          style={{ alignSelf: message.user.id === user1.id ? 'flex-end' : 'flex-start' }}
          alt={message.id}
        />
-        <div 
-          className='message-2d__text d-flex'
-        >
-          {
-
-            message.text !== null ?
-            <p id="3" style={{color: message.user.id === user1.id ? "white" : "black" }}>{message.text}</p> : null
-          }
+        <div className="message-2d__text d-flex">
+          {message.text !== null ? (
+            <p id="3" style={{ color: message.user.id === user1.id ? 'white' : 'black' }}>
+              {message.text}
+            </p>
+          ) : null}
        </div>
        <Grid container spacing={2} alignItems="center">
          <Grid item xs>
@ -63,7 +59,7 @@ export default class SliderMessage extends Component {
              value={typeof this.state.value === 'number' ? this.state.value : 0}
              onChange={this.handleSliderChange}
              aria-labelledby="input-slider"
-              style={{marginTop:10}}
+              style={{ marginTop: 10 }}
              min={0}
              max={20}
              step={0.1}
@ -82,13 +78,21 @@ export default class SliderMessage extends Component {
                type: 'number',
                'aria-labelledby': 'input-slider',
              }}
-              style={{width : 42, borderBottom : '2px solid #000099', paddingLeft :10,marginBottom :18, color : '#000099'}}
+              style={{
+                width: 42,
+                borderBottom: '2px solid #000099',
+                paddingLeft: 10,
+                marginBottom: 18,
+                color: '#000099',
+              }}
            />
          </Grid>
-      </Grid>
-        <button className="message-2d__submit">ثبت<ArrowRightAltIcon style={{color : "white" , width : 32, height : 32, marginLeft: 10}} /></button>
+        </Grid>
+        <button className="message-2d__submit">
+          ثبت
+          <ArrowRightAltIcon style={{ color: 'white', width: 32, height: 32, marginLeft: 10 }} />
+        </button>
      </div>
    );
  }
 }
-
--- a/src/views/ChatRoom/ChatInfo/ChatInfo.js
+++ b/src/views/ChatRoom/ChatInfo/ChatInfo.js
@ -11,35 +11,35 @@ export default class ChatInfo extends Component {
  constructor(props) {
    super(props);
    this.state = {
-      gallery : null,
-      user : {
-        profileImages : [
-          {id : 0, src : user2},
-          {id : 1, src : user2},
-          {id : 2, src : user2},
-          {id : 3, src : user2}
+      gallery: null,
+      user: {
+        profileImages: [
+          { id: 0, src: user2 },
+          { id: 1, src: user2 },
+          { id: 2, src: user2 },
+          { id: 3, src: user2 },
        ],
-        name : 'محسن محمدی',
-        lastAct : '2 دقیقه پیش آنلاین بوده',
-        bio : 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد '
-      }
-    }
+        name: 'محسن محمدی',
+        lastAct: '2 دقیقه پیش آنلاین بوده',
+        bio: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد ',
+      },
+    };
  }

  setGallery = (val) => {
    this.setState({
-      gallery : val,
-    })
-  }
+      gallery: val,
+    });
+  };

-  render(){
-    const {user, gallery} = this.state;
+  render() {
+    const { user, gallery } = this.state;
    return (
      <div className="chat-info d-flex flex-column">
        <div className="chat-info__image d-flex">
          <img src={user.profileImages[0].src} onClick={() => this.setGallery('profile')} alt="" />
          <div className="chat-info__image--float d-flex">
-            <ChatIcon style={{color : "white", width : 46, height : 46}} />
+            <ChatIcon style={{ color: 'white', width: 46, height: 46 }} />
          </div>
        </div>
        <div className="chat-info__box d-flex flex-column">
@ -50,16 +50,12 @@ export default class ChatInfo extends Component {
          <div className="chat-info__box--description d-flex">
            <p>{user.bio}</p>
          </div>
-          <FileTabs onClick={this.setGallery}/>
+          <FileTabs onClick={this.setGallery} />
        </div>
-        {
-          gallery === 'profile' ? 
-          <Gallery data={user.profileImages} onClick={this.setGallery} /> : null
-        }
-        {
-          gallery === 'media' ? 
-          <Gallery data={null} /> : null
-        }
+        {gallery === 'profile' ? (
+          <Gallery data={user.profileImages} onClick={this.setGallery} />
+        ) : null}
+        {gallery === 'media' ? <Gallery data={null} /> : null}
      </div>
    );
  }
--- a/src/views/ChatRoom/ChatInfo/ChatInfo.scss
+++ b/src/views/ChatRoom/ChatInfo/ChatInfo.scss
@ -1,85 +1,84 @@
-@media screen and (max-width: 4500px){
-  .chat-info{
+@media screen and (max-width: 4500px) {
+  .chat-info {
    width: 100%;
    min-height: 100vh;
    position: relative;
-    direction : rtl;
-    &__image{
+    direction: rtl;
+    &__image {
      width: 100%;
      background-color: rgb(82, 82, 82);
      justify-content: center;
      align-items: center;
      height: 290px;
      position: relative;
-      & img{
+      & img {
        width: 100%;
        height: 100%;
-        object-fit: cover
+        object-fit: cover;
      }
-      &--float{
+      &--float {
        position: absolute;
-        width:65px;
-        height : 65px;
+        width: 65px;
+        height: 65px;
        bottom: +8px;
-        right : 40px;
+        right: 40px;
        background-color: rgb(139, 73, 186);
        background: linear-gradient(180deg, rgb(186, 73, 182) 0%, rgb(76, 74, 189) 92%);
-        padding : 5px;
+        padding: 5px;
        border-radius: 100px;
        z-index: 200;
-        justify-content:center;
-        align-items:center;
+        justify-content: center;
+        align-items: center;
        box-shadow: 0px 0px 50px rgba(36, 0, 72, 0.8);
      }
    }
-    &__box{
+    &__box {
      width: 100%;
      z-index: 100;
-      height :  calc(100% - 250px);
+      height: calc(100% - 250px);
      background-color: rgb(200, 183, 232);
      border-top-left-radius: 40px;
      border-top-right-radius: 40px;
      direction: rtl;
-      padding : 20px 0px 0px 0px;
+      padding: 20px 0px 0px 0px;
      position: sticky;
      transform: translateY(-40px);
-      top : -150px;
+      top: -150px;
      overflow-y: scroll;
      overflow-x: hidden;
-      &::-webkit-scrollbar{
+      &::-webkit-scrollbar {
        display: none;
      }
-      &--status{
+      &--status {
        width: 100%;
        align-items: flex-end;
-        padding : 0px 30px;
-        h1{
+        padding: 0px 30px;
+        h1 {
          font-size: 19px;
          margin: 0;
-          letter-spacing:-1px;
+          letter-spacing: -1px;
          font-family: IRANSansNumeralLight;
          color: black;
          font-weight: 100;
        }
-        p{
+        p {
          font-size: 14px;
          color: rgb(104, 42, 135);
-          margin : 0px;
+          margin: 0px;
        }
      }
-      &--description{
+      &--description {
        width: 100%;
-        justify-content:center;
+        justify-content: center;
        align-items: center;
        margin-top: 20px;
-        & p{
+        & p {
          width: 100%;
          max-width: 310px;
          text-align: justify;
          font-size: 12px;
        }
      }
-      
    }
  }
-}
+}
--- a/src/views/ChatRoom/ChatInfo/FileTabs/FileTabs.js
+++ b/src/views/ChatRoom/ChatInfo/FileTabs/FileTabs.js
@ -5,71 +5,78 @@ export default class FileTabs extends Component {
  constructor(props) {
    super(props);
    this.state = {
-      type : 'media',
-
-    }
+      type: 'media',
+    };
  }

  setType = (val) => {
    this.setState({
-      type : val,
-    })
-  }
-  render(){
-    return(
+      type: val,
+    });
+  };
+  render() {
+    return (
      <div className="file-tabs d-flex flex-column">
        <div className="file-tabs__types d-flex">
-          <li style={{borderBottom : this.state.type === 'media' ? '2px solid rgb(13, 84, 150)' : 'none'}} onClick={() => this.setType('media')}>Media</li>
-          <li style={{borderBottom : this.state.type === 'file' ? '2px solid rgb(13, 84, 150)' : 'none'}} onClick={() => this.setType('file')}>Files</li>
-          <li style={{borderBottom : this.state.type === 'link' ? '2px solid rgb(13, 84, 150)' : 'none'}} onClick={() => this.setType('link')}>Links</li>
-          <li style={{borderBottom : this.state.type === 'music' ? '2px solid rgb(13, 84, 150)' : 'none'}} onClick={() => this.setType('music')}>Music</li>
-          <li style={{borderBottom : this.state.type === 'voice' ? '2px solid rgb(13, 84, 150)' : 'none'}} onClick={() => this.setType('voice')}>Voice</li>
+          <li
+            style={{
+              borderBottom: this.state.type === 'media' ? '2px solid rgb(13, 84, 150)' : 'none',
+            }}
+            onClick={() => this.setType('media')}
+          >
+            Media
+          </li>
+          <li
+            style={{
+              borderBottom: this.state.type === 'file' ? '2px solid rgb(13, 84, 150)' : 'none',
+            }}
+            onClick={() => this.setType('file')}
+          >
+            Files
+          </li>
+          <li
+            style={{
+              borderBottom: this.state.type === 'link' ? '2px solid rgb(13, 84, 150)' : 'none',
+            }}
+            onClick={() => this.setType('link')}
+          >
+            Links
+          </li>
+          <li
+            style={{
+              borderBottom: this.state.type === 'music' ? '2px solid rgb(13, 84, 150)' : 'none',
+            }}
+            onClick={() => this.setType('music')}
+          >
+            Music
+          </li>
+          <li
+            style={{
+              borderBottom: this.state.type === 'voice' ? '2px solid rgb(13, 84, 150)' : 'none',
+            }}
+            onClick={() => this.setType('voice')}
+          >
+            Voice
+          </li>
        </div>
-        {
-          this.state.type === 'media' ? 
+        {this.state.type === 'media' ? (
          <div className="file-tabs__media d-flex flex-wrap">
-            <div className="file-tabs__media--item">
-
-            </div>
-            <div className="file-tabs__media--item">
-
-            </div>
-            <div className="file-tabs__media--item">
-
-            </div>
-            <div className="file-tabs__media--item">
-
-            </div>
-            <div className="file-tabs__media--item">
-
-            </div>
-            <div className="file-tabs__media--item">
-
-            </div>
-            <div className="file-tabs__media--item">
-
-            </div>
-            <div className="file-tabs__media--item">
-
-            </div>
-            <div className="file-tabs__media--item">
-
-            </div>
-            <div className="file-tabs__media--item">
-
-            </div>
-            <div className="file-tabs__media--item">
-
-            </div>
-            <div className="file-tabs__media--item">
-
-            </div>
-            <div className="file-tabs__media--item">
-
-            </div>
-          </div> : null
-        }
+            <div className="file-tabs__media--item"></div>
+            <div className="file-tabs__media--item"></div>
+            <div className="file-tabs__media--item"></div>
+            <div className="file-tabs__media--item"></div>
+            <div className="file-tabs__media--item"></div>
+            <div className="file-tabs__media--item"></div>
+            <div className="file-tabs__media--item"></div>
+            <div className="file-tabs__media--item"></div>
+            <div className="file-tabs__media--item"></div>
+            <div className="file-tabs__media--item"></div>
+            <div className="file-tabs__media--item"></div>
+            <div className="file-tabs__media--item"></div>
+            <div className="file-tabs__media--item"></div>
+          </div>
+        ) : null}
      </div>
    );
  }
-}
+}
--- a/src/views/ChatRoom/ChatInfo/FileTabs/FileTabs.scss
+++ b/src/views/ChatRoom/ChatInfo/FileTabs/FileTabs.scss
@ -1,30 +1,29 @@
-@media screen and (max-width: 4500px){
-  .file-tabs{
+@media screen and (max-width: 4500px) {
+  .file-tabs {
    width: 100%;
    position: relative;
-    direction : rtl;
-    &__types{
+    direction: rtl;
+    &__types {
      width: 100%;
      justify-content: space-between;
-      align-items:center;
-      padding : 3px  calc((100vw - 310px)/2) 3px calc((100vw - 310px)/2);
-      direction : ltr;
-      border-top : 8px solid  rgb(13, 84, 150);
-      & li{
+      align-items: center;
+      padding: 3px calc((100vw - 310px) / 2) 3px calc((100vw - 310px) / 2);
+      direction: ltr;
+      border-top: 8px solid rgb(13, 84, 150);
+      & li {
        font-size: 16px;
-        list-style : none;
+        list-style: none;
        font-weight: 600;
      }
    }
-    &__media{
+    &__media {
      width: 100%;
-      &--item{
-        width : calc(100% / 3);
+      &--item {
+        width: calc(100% / 3);
        height: calc(100vw / 3);
-        border : 2px solid rgb(200, 183, 232);
-        background-color : red;
+        border: 2px solid rgb(200, 183, 232);
+        background-color: red;
      }
    }
-
  }
-}
+}
--- a/src/views/ChatRoom/ChatInfo/Gallery/Gallery.js
+++ b/src/views/ChatRoom/ChatInfo/Gallery/Gallery.js
@ -11,22 +11,19 @@ export default function Gallery(props) {
  return (
    <div className="gallery-modal d-flex justify-content align-items-center">
      <div onClick={() => props.onClick(null)}>
-        <CloseIcon style={{color : "red", width : 46, height : 46,position : 'absolute', right :5, top :20}} />
-
+        <CloseIcon
+          style={{ color: 'red', width: 46, height: 46, position: 'absolute', right: 5, top: 20 }}
+        />
      </div>
      <Carousel itemsToShow={1} isRTL={true} enableTilt={false} showArrows={true}>
-          {
-            props.data.map((item,i) => (
-              <Image item={item} key={i} />
-            ))
-          }
-        </Carousel>
+        {props.data.map((item, i) => (
+          <Image item={item} key={i} />
+        ))}
+      </Carousel>
    </div>
  );
 }

 const Image = (props) => {
-  return (
-    <img style={{maxHeight : '50%', maxWidth : '100vw'}} src={props.item.src} alt=""/>
-  );
-}
+  return <img style={{ maxHeight: '50%', maxWidth: '100vw' }} src={props.item.src} alt="" />;
+};
--- a/src/views/ChatRoom/ChatInfo/Gallery/Gallery.scss
+++ b/src/views/ChatRoom/ChatInfo/Gallery/Gallery.scss
@ -1,5 +1,5 @@
-@media screen and (max-width: 4500px){
-  .gallery-modal{
+@media screen and (max-width: 4500px) {
+  .gallery-modal {
    width: 100%;
    height: 100%;
    background-color: #383737f1;
@ -7,60 +7,58 @@
    left: 0;
    top: 0;
    z-index: 700;
-    .rec-carousel-wrapper{
+    .rec-carousel-wrapper {
      position: relative;
-      bottom:70px;
+      bottom: 70px;
    }
-    .rec-arrow{
+    .rec-arrow {
      position: absolute;
-      background : none;
-      box-shadow:none;
-      &:hover:enabled{
-        background : none;
-        box-shadow:none;
+      background: none;
+      box-shadow: none;
+      &:hover:enabled {
+        background: none;
+        box-shadow: none;
        color: black;
      }
    }
-    .rec-arrow-right{
-      top : calc(50% - 20px);
+    .rec-arrow-right {
+      top: calc(50% - 20px);
      left: 0px;
      z-index: 800;
    }
-    .rec-arrow-left{
-      top : calc(50% - 20px);
+    .rec-arrow-left {
+      top: calc(50% - 20px);
      right: 0px;
      z-index: 800;
-
    }
-    .rec-pagination{
+    .rec-pagination {
      // display:none;
      z-index: 600;
      position: absolute;
      top: auto;
      bottom: -30px !important;
      // left: calc(50% - 20px) !important;
-      & button{
+      & button {
        background-color: grey;
-        margin : 2px !important;
-        box-shadow: 0px 0px 0px rgba(255,255,255,1);
+        margin: 2px !important;
+        box-shadow: 0px 0px 0px rgba(255, 255, 255, 1);
      }
    }
-    }
-    .rec-dot_active{
-      background-color: white !important;
-      color: white !important;
-      // box-shadow: 0 0 1px rgba(255, 255, 255, 1) !important;
-    }
-    
-    .Carousel-button-10{
-      background-color: white !important;
-    }
-    .rec-pagination{
-      
-    img{
+  }
+  .rec-dot_active {
+    background-color: white !important;
+    color: white !important;
+    // box-shadow: 0 0 1px rgba(255, 255, 255, 1) !important;
+  }
+
+  .Carousel-button-10 {
+    background-color: white !important;
+  }
+  .rec-pagination {
+    img {
      // width: 100vw;
      // max-height: 200px;
      // height: 100vh;
    }
  }
-}
+}
--- a/src/views/ChatRoom/ChatRoom.js
+++ b/src/views/ChatRoom/ChatRoom.js
@ -10,28 +10,28 @@ export default class ChatRoom extends Component {
    super(props);
    this.state = {
      page: 'chatroom',
-    }
+    };
  }

  setPage = (val) => {
    this.setState({
-      page : val,
-    })
-  }
-  render(){
+      page: val,
+    });
+  };
+  render() {
    return (
      <div className="chat-room d-flex flex-column">
        <Header page={this.state.page} setPage={this.setPage} />
-        {
-          this.state.page === 'chatroom' ? 
+        {this.state.page === 'chatroom' ? (
          <>
-            <Body setPage={this.setPage}/>
-          </> : 
+            <Body setPage={this.setPage} />
+          </>
+        ) : (
          <>
            <ChatInfo />
          </>
-        }
+        )}
      </div>
    );
  }
-}
+}
--- a/src/views/ChatRoom/ChatRoom.scss
+++ b/src/views/ChatRoom/ChatRoom.scss
@ -1,34 +1,34 @@
-@media screen and (max-width: 4500px){
-  .chat-room{
-    flex : 1;
+@media screen and (max-width: 4500px) {
+  .chat-room {
+    flex: 1;
    background: rgb(139, 73, 186);
-    background: linear-gradient(180deg, rgb(144, 73, 186) 0%, rgb(111,108,255) 22%);
+    background: linear-gradient(180deg, rgb(144, 73, 186) 0%, rgb(111, 108, 255) 22%);
    height: 100vh;
    overflow-y: hidden;
-    
-    width:  100vw;
+
+    width: 100vw;
    box-shadow: 0px 0px 40px rgba(145, 145, 145, 0.8);
-    &__status{
+    &__status {
      border-top-left-radius: 40px;
      border-top-right-radius: 40px;
      height: 150px;
-      background : rgb(106, 103, 250);
+      background: rgb(106, 103, 250);
      position: relative;
      align-items: center;
-      justify-content:flex-start;
-      h1{
+      justify-content: flex-start;
+      h1 {
        font-size: 18px;
        margin: 0;
-        letter-spacing:-1px;
+        letter-spacing: -1px;
        font-family: IRANSansNumeralLight;
        color: white;
        font-weight: 100;
      }
-      p{
+      p {
        font-size: 12px;
        color: white;
-        margin : 0px;
+        margin: 0px;
      }
    }
  }
-}
+}
--- a/src/views/ChatRoom/Header/Header.js
+++ b/src/views/ChatRoom/Header/Header.js
@ -9,63 +9,76 @@ export default class Header extends Component {
  constructor(props) {
    super(props);
    this.state = {
-      anchorEl : null,
-    }
+      anchorEl: null,
+    };
  }

  handleClick = (event) => {
    this.setState({
-      anchorEl : event.currentTarget
+      anchorEl: event.currentTarget,
    });
  };

  handleClose = () => {
    this.setState({
-      anchorEl : null,
-    })
-  }
+      anchorEl: null,
+    });
+  };

-  back  = () => {
+  back = () => {
    window.history.back();
-  }
-  render(){
-    const {page, setPage} = this.props;
-    const {anchorEl} = this.state;
+  };
+  render() {
+    const { page, setPage } = this.props;
+    const { anchorEl } = this.state;
    return (
      <div className="chat-header d-flex">
-        <div onClick={() => page === 'chatroom' ? this.back() : setPage('chatroom')}>
-          <ArrowBackIosIcon style={{color : "white" , width : 32, height : 32,marginTop:4}} />
+        <div onClick={() => (page === 'chatroom' ? this.back() : setPage('chatroom'))}>
+          <ArrowBackIosIcon style={{ color: 'white', width: 32, height: 32, marginTop: 4 }} />
        </div>
        <div className="chat-header__title d-flex">
-          <h1 style={{fontFamily : 'IRANSansNumeralBold'}}>ایما</h1>
+          <h1 style={{ fontFamily: 'IRANSansNumeralBold' }}>ایما</h1>
          <span></span>
-          <h1 style={{fontSize :17}}>داستانبازی</h1>
+          <h1 style={{ fontSize: 17 }}>داستانبازی</h1>
        </div>
        <div>
          <div>
-            <MoreVertIcon 
-                aria-controls="simple-menu" 
-                aria-haspopup="true" 
-                onClick={this.handleClick} 
-                style={{color : "white" , width : 38, height : 38}} 
-              />
+            <MoreVertIcon
+              aria-controls="simple-menu"
+              aria-haspopup="true"
+              onClick={this.handleClick}
+              style={{ color: 'white', width: 38, height: 38 }}
+            />
          </div>
          <Menu
            id="simple-menu"
            anchorEl={anchorEl}
-          
            keepMounted
            open={Boolean(anchorEl)}
            onClose={() => this.handleClose()}
-            style={{direction : 'rtl',fontFamily : 'IRANSansNumeralLight'}}
+            style={{ direction: 'rtl', fontFamily: 'IRANSansNumeralLight' }}
          >
-            <MenuItem style={{color : "white",fontFamily : 'IRANSansNumeralLight'}} onClick={() => this.handleClose()}>پروفایل</MenuItem>
-            <MenuItem style={{color : "white",fontFamily : 'IRANSansNumeralLight'}} onClick={() => this.handleClose()}>حساب کاربری</MenuItem>
-            <MenuItem style={{color : "white",fontFamily : 'IRANSansNumeralLight'}} onClick={() => this.handleClose()}>خروج</MenuItem>
+            <MenuItem
+              style={{ color: 'white', fontFamily: 'IRANSansNumeralLight' }}
+              onClick={() => this.handleClose()}
+            >
+              پروفایل
+            </MenuItem>
+            <MenuItem
+              style={{ color: 'white', fontFamily: 'IRANSansNumeralLight' }}
+              onClick={() => this.handleClose()}
+            >
+              حساب کاربری
+            </MenuItem>
+            <MenuItem
+              style={{ color: 'white', fontFamily: 'IRANSansNumeralLight' }}
+              onClick={() => this.handleClose()}
+            >
+              خروج
+            </MenuItem>
          </Menu>
        </div>
-        
      </div>
    );
  }
-}
+}
--- a/src/views/ChatRoom/Header/Header.scss
+++ b/src/views/ChatRoom/Header/Header.scss
@ -1,31 +1,31 @@
-@media screen and (max-width: 4500px){
-  .chat-header{
+@media screen and (max-width: 4500px) {
+  .chat-header {
    height: 70px;
    width: 100%;
-    justify-content : space-between;
+    justify-content: space-between;
    align-items: flex-start;
-    padding : 10px 18px 10px;
+    padding: 10px 18px 10px;
    position: relative;
-    &__title{
-      direction:rtl;
+    &__title {
+      direction: rtl;
      position: absolute;
      right: 10px;
      margin-top: 8px;
-      align-items:center;
+      align-items: center;
      right: 60px;
-      & h1{
+      & h1 {
        font-size: 23px;
        color: white;
      }
-      & span{
-        margin : 0px 5px;
+      & span {
+        margin: 0px 5px;
        width: 2px;
-        height:22px;
-        background-color:white;
+        height: 22px;
+        background-color: white;
        position: relative;
        bottom: 5px;
        font-size: 18px;
      }
    }
  }
-}
+}
--- a/src/views/Home/Body/Body.js
+++ b/src/views/Home/Body/Body.js
@ -2,16 +2,15 @@ import React, { Component } from 'react';
 import ChatList from './ChatList/ChatList';
 import Location from './Location/Location';
 import Info from './Info/Info';
-
 import './Body.scss';
 export default class Body extends Component {
-  render(){
+  render() {
    return (
      <div className="body d-flex">
-        {this.props.tabBar === 'chat' ? <ChatList/> : null}
-        {this.props.tabBar === 'location' ? <Location/> : null}
-        {this.props.tabBar === 'info' ? <Info/> : null}
+        {this.props.tabBar === 'chat' ? <ChatList /> : null}
+        {this.props.tabBar === 'location' ? <Location /> : null}
+        {this.props.tabBar === 'info' ? <Info /> : null}
      </div>
    );
  }
-}
+}
--- a/src/views/Home/Body/Body.scss
+++ b/src/views/Home/Body/Body.scss
@ -1,22 +1,21 @@
-@media screen and (max-width: 4500px){
-  .body{
+@media screen and (max-width: 4500px) {
+  .body {
    background-color: rgb(228, 227, 227);
-    flex : 1;
+    flex: 1;
    border-top-right-radius: 40px;
    border-top-left-radius: 40px;
    z-index: 10;
-    overflow-y : scroll;
+    overflow-y: scroll;
    overflow-x: hidden;
-    border :4px solid white;
-    top:5px;
+    border: 4px solid white;
+    top: 5px;
    position: relative;
  }
 }
-
-a:focus{
+a:focus {
  text-decoration: none !important;
 }

-a:hover{
+a:hover {
  text-decoration: none !important;
-}
+}
--- a/src/views/Home/Body/ChatList/Chat/Chat.js
+++ b/src/views/Home/Body/ChatList/Chat/Chat.js
@ -1,24 +1,20 @@
 import React, { Component } from 'react';
-import {Link} from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import moment from 'jalali-moment';
 import './Chat.scss';
 export default class Chat extends Component {
-  render(){
-    const {data} = this.props;
+  render() {
+    const { data } = this.props;
    return (
      <Link to={`/chatroom/${data.id}`} className="chat d-flex">
        <img src={data.imageUrl} alt="عکس کاربر" />
        <div className="chat__data d-flex flex-column">
-          <h1 className="chat__data--name">
-            {data.name}
-          </h1>
-          <p className="chat__data--lastMessage">
-            {data.lastMessage.slice(0,40) + '...'}
-          </p>
+          <h1 className="chat__data--name">{data.name}</h1>
+          <p className="chat__data--lastMessage">{data.lastMessage.slice(0, 40) + '...'}</p>
          <span>{data.badge}</span>
-          <div>{moment(data.date||new Date()).format('jD/jM hh:mm')}</div>
+          <div>{moment(data.date || new Date()).format('jD/jM hh:mm')}</div>
        </div>
      </Link>
    );
  }
-}
+}
--- a/src/views/Home/Body/ChatList/Chat/Chat.scss
+++ b/src/views/Home/Body/ChatList/Chat/Chat.scss
@ -1,63 +1,63 @@
-@media screen and (max-width: 4500px){
-  .chat{
+@media screen and (max-width: 4500px) {
+  .chat {
    width: 100%;
    direction: rtl;
-    align-items:center;
+    align-items: center;
    margin-bottom: 20px;
    position: relative;
-    border-bottom : 2px solid rgb(255, 255, 255);
-    padding : 0px 0px 20px;
+    border-bottom: 2px solid rgb(255, 255, 255);
+    padding: 0px 0px 20px;
    img {
      background-color: #8b49ba;
      width: 70px;
      height: 70px;
-      padding :5px;
-      border-radius:35px;
+      padding: 5px;
+      border-radius: 35px;
      object-fit: cover;
    }
-    &__data{
-      text-align:right;
-      flex : 1;
+    &__data {
+      text-align: right;
+      flex: 1;
      justify-content: space-around;
-      height : 100%;
-      padding : 10px 10px;
-      h1{
+      height: 100%;
+      padding: 10px 10px;
+      h1 {
        font-size: 15px;
        margin: 0;
        font-weight: 600;
      }
-      p{
+      p {
        font-size: 12px;
        margin: 0;
        max-width: calc(100vw - 100px);
      }
-      span{
+      span {
        background-color: rgb(139, 73, 186);
        min-width: 20px;
        font-size: 11px;
        height: 20px;
        display: flex;
-        justify-content:center;
-        align-items:center;
+        justify-content: center;
+        align-items: center;
        border-radius: 13px;
        position: absolute;
        padding-top: 1px;
        padding: 0 5px;
-        left : 20px;
-        top : 37px;
+        left: 20px;
+        top: 37px;
        color: white;
      }
-      div{
-        color : rgb(99, 99, 99);
+      div {
+        color: rgb(99, 99, 99);
        position: absolute;
-        left : 20px;
+        left: 20px;
        font-size: 12px;
-        top : 15px;
+        top: 15px;
      }
    }
  }
 }

-a:focus{
+a:focus {
  text-decoration: normal;
-}
+}
--- a/src/views/Home/Body/ChatList/ChatList.js
+++ b/src/views/Home/Body/ChatList/ChatList.js
@ -1,53 +1,47 @@
 import React, { Component } from 'react';
 import Chat from './Chat/Chat';
-
 import pencil from '../../../../assets/icons/pencil.svg';
 import logo from '../../../../assets/icons/logo.svg';
 import './ChatList.scss';
-import proxy from "../../../../Redux/proxy"
+import proxy from '../../../../Redux/proxy';

 export default class ChatList extends Component {
  constructor(props) {
    super(props);
    this.state = {
-      chats : [
+      chats: [
        {
-          id : 0,
-          name : 'داستان نمونه',
-          lastMessage : 'نمونه اولیه داستان ایما',
-          imageUrl : logo,
-          badge : "جدید"
+          id: 0,
+          name: 'داستان نمونه',
+          lastMessage: 'نمونه اولیه داستان ایما',
+          imageUrl: logo,
+          badge: 'جدید',
        },
        {
-          id : 0,
-          name : 'نمونه امکانات',
-          lastMessage : 'نمونه امکانات داستان ایما',
-          imageUrl : logo,
-          badge : "تست"
+          id: 0,
+          name: 'نمونه امکانات',
+          lastMessage: 'نمونه امکانات داستان ایما',
+          imageUrl: logo,
+          badge: 'تست',
        },
      ],
-    }
-
-
-  
+    };
  }
-  async componentDidMount(){
-    console.log(proxy)
-     let chatList = await proxy.get('chat/list');
-     console.log(chatList)
+  async componentDidMount() {
+    console.log(proxy);
+    let chatList = await proxy.get('chat/list');
+    console.log(chatList);
  }
-  render(){
+  render() {
    return (
      <div className="chat-list d-flex flex-column">
-        {
-          this.state.chats.map((item,i) => (
-            <Chat key={i} data={item}  />
-          ))
-        }
-        <div className="chat-list__float d-flex" style={{filter:"grayscale(2)"}}>
-          <img src={pencil}  alt=""/>
+        {this.state.chats.map((item, i) => (
+          <Chat key={i} data={item} />
+        ))}
+        <div className="chat-list__float d-flex" style={{ filter: 'grayscale(2)' }}>
+          <img src={pencil} alt="" />
        </div>
      </div>
    );
  }
-}
+}
--- a/src/views/Home/Body/ChatList/ChatList.scss
+++ b/src/views/Home/Body/ChatList/ChatList.scss
@ -1,11 +1,10 @@
-@media screen and (max-width: 4500px){
-  .chat-list{
-    flex : 1;
+@media screen and (max-width: 4500px) {
+  .chat-list {
+    flex: 1;
    border-radius: 40px;
    padding: 10px 14px;
-    
    position: relative;
-    &__float{
+    &__float {
      position: fixed;
      height: 50px;
      width: 50px;
@ -15,12 +14,12 @@
      align-items: center;
      background-color: rgb(77, 21, 220);
      border-radius: 100px;
-      border :2px solid white;
-      box-shadow: 0px 0px 20px rgba(0,0,0,0.8);
-      & img{
+      border: 2px solid white;
+      box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8);
+      & img {
        width: 25px;
-        height : 25px;
+        height: 25px;
      }
    }
  }
-}
+}
--- a/src/views/Home/Body/Info/Info.js
+++ b/src/views/Home/Body/Info/Info.js
@ -1,13 +1,8 @@
 import React, { Component } from 'react';

-
 import './Info.scss';
 export default class Info extends Component {
-  render(){
-    return (
-      <div className="info d-flex">
-        
-      </div>
-    );
+  render() {
+    return <div className="info d-flex"></div>;
  }
-}
+}
--- a/src/views/Home/Body/Location/Location.js
+++ b/src/views/Home/Body/Location/Location.js
@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { MapContainer, TileLayer, Marker, Tooltip,Circle } from "react-leaflet";
+import { MapContainer, TileLayer, Marker, Tooltip, Circle } from 'react-leaflet';
 import L from 'leaflet';
 import NavigationIcon from '@material-ui/icons/Navigation';
 import DirectionsWalkIcon from '@material-ui/icons/DirectionsWalk';
@ -15,64 +15,66 @@ import './Location.scss';
 //   iconUrl: greenM,
 //   iconRetinaUrl: greenM,
 //   popupAnchor:  [-0, -0],
-//   iconSize: [25,38],     
+//   iconSize: [25,38],
 // });
 const blue = new L.Icon({
  iconUrl: blueM,
  iconRetinaUrl: blueM,
-  popupAnchor:  [-0, -0],
-  iconSize: [25,38],     
+  popupAnchor: [-0, -0],
+  iconSize: [25, 38],
 });

 export default class Location extends Component {
  state = {};
-
  currentLocation = (map) => {
    this.setState({
-      map : map,
-    })
-    this.map=map;
-    map.locate({setView:true})
-    map.setMaxZoom(15)
-    map.on('locationfound',(e)=>{
+      map: map,
+    });
+    this.map = map;
+    map.locate({ setView: true });
+    map.setMaxZoom(15);
+    map.on('locationfound', (e) => {
      //  map.setZoom(13)
-      this.setState({lat:e.latitude,lng:e.longitude,accuracy:e.accuracy})
-    })
-  }
-  render(){
+      this.setState({ lat: e.latitude, lng: e.longitude, accuracy: e.accuracy });
+    });
+  };
+  render() {
    return (
-      <div className="location" style={{display: 'block !important' , height:"100%", }}>
+      <div className="location" style={{ display: 'block !important', height: '100%' }}>
        <MapContainer
-          whenCreated={(map) =>{
-            this.currentLocation(map)
+          whenCreated={(map) => {
+            this.currentLocation(map);
          }}
-            ref={this.myRef}
-            center={[35.73366050852552, 51.414611756817976]}
-            zoom={14}
-            scrollWheelZoom={true}
-            style={{ height: "100%", direction: "ltr" }}
-          >
-            {/* <LocateControlC > </LocateControlC> */}
-            {/* {this.state.c ? <LocateControl options={locateOptions} startDirectly/>:null} */}
-            <TileLayer
-              attribution=""
-              url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png"
-              // https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
-            />
-            <Marker position={[35.73366050852552, 51.414611756817976]} 
-              icon={blue}
-              eventHandlers={{
+          ref={this.myRef}
+          center={[35.73366050852552, 51.414611756817976]}
+          zoom={14}
+          scrollWheelZoom={true}
+          style={{ height: '100%', direction: 'ltr' }}
+        >
+          {/* <LocateControlC > </LocateControlC> */}
+          {/* {this.state.c ? <LocateControl options={locateOptions} startDirectly/>:null} */}
+          <TileLayer
+            attribution=""
+            url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png"
+            // https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
+          />
+          <Marker
+            position={[35.73366050852552, 51.414611756817976]}
+            icon={blue}
+            eventHandlers={
+              {
                // click: () => {
                //   this.seter("value",e.id)
                // },
-              }}
-              onClick={e=>console.log("sss")}>
-                <Tooltip direction="top" opacity={1} >
-                  {'map'}
-
-                </Tooltip>
-              </Marker>
-            {/* {
+              }
+            }
+            onClick={(e) => console.log('sss')}
+          >
+            <Tooltip direction="top" opacity={1}>
+              {'map'}
+            </Tooltip>
+          </Marker>
+          {/* {
            items.map((e) => (
              <Marker position={[e.lat, e.lon]} 
              icon={selected  && e.id==selected.id?green:blue}
@ -88,40 +90,53 @@ export default class Location extends Component {
                </Tooltip>
              </Marker>
            ))} */}
-            {this.state.lat && this.state.lng && <>
-              <Circle center={[this.state.lat, this.state.lng]} pathOptions={{ fillColor: 'blue' }} radius={this.state.accuracy} />
-              <Marker position={[this.state.lat, this.state.lng]} 
-              icon={blue}
-              eventHandlers={{
-                // click: () => {
-                //   this.seter("value",e.id)
-                // },
-              }}
-              onClick={e=>console.log("sss")}>
-                <Tooltip direction="top" opacity={1} >
+          {this.state.lat && this.state.lng && (
+            <>
+              <Circle
+                center={[this.state.lat, this.state.lng]}
+                pathOptions={{ fillColor: 'blue' }}
+                radius={this.state.accuracy}
+              />
+              <Marker
+                position={[this.state.lat, this.state.lng]}
+                icon={blue}
+                eventHandlers={
+                  {
+                    // click: () => {
+                    //   this.seter("value",e.id)
+                    // },
+                  }
+                }
+                onClick={(e) => console.log('sss')}
+              >
+                <Tooltip direction="top" opacity={1}>
                  {'map'}
-
                </Tooltip>
              </Marker>
-              </>
-              }
+            </>
+          )}
        </MapContainer>
        <div className="location__footer d-flex flex-row-reverse">
-          <div className="location__footer--icon" onClick={(map) =>{
-            this.currentLocation(this.state.map)
-          }}>
-            <NavigationIcon style={{color : "white" , width : 35, height : 35}} />
+          <div
+            className="location__footer--icon"
+            onClick={(map) => {
+              this.currentLocation(this.state.map);
+            }}
+          >
+            <NavigationIcon style={{ color: 'white', width: 35, height: 35 }} />
          </div>
          <span>10 کیلومتر</span>
          <div className="location__footer--time d-flex flex-row-reverse align-items-center">
-              <div>10 دقیقه</div>
-              <DirectionsWalkIcon style={{color : "white" , width : 30, height : 30, marginRight :5,marginLeft :10}} />
+            <div>10 دقیقه</div>
+            <DirectionsWalkIcon
+              style={{ color: 'white', width: 30, height: 30, marginRight: 5, marginLeft: 10 }}
+            />
          </div>
        </div>
        <div className="location__current d-flex justify-content-center align-items-center">
-          <MyLocationIcon style={{color : "white" , width : 35, height : 35}} />
+          <MyLocationIcon style={{ color: 'white', width: 35, height: 35 }} />
        </div>
      </div>
    );
  }
-}
+}
--- a/src/views/Home/Body/Location/Location.scss
+++ b/src/views/Home/Body/Location/Location.scss
@ -1,10 +1,10 @@
-@media screen and (max-width: 4500px){
-  .location{
+@media screen and (max-width: 4500px) {
+  .location {
    width: 100%;
    height: 100%;
    // filter : hue-rotate(360deg);
    position: relative;
-    &__footer{
+    &__footer {
      position: fixed;
      bottom: 10px;
      left: 5px;
@ -13,37 +13,37 @@
      background: linear-gradient(90deg, rgb(102, 99, 245) 20%, rgb(186, 85, 204) 140%);
      height: 66px;
      align-items: center;
-      padding : 0px 7px;
+      padding: 0px 7px;
      justify-content: space-between;
      color: white;
      z-index: 1000;
-      &--icon{
-        padding : 10px;
+      &--icon {
+        padding: 10px;
        background-color: rgb(102, 33, 170);
        border-radius: 100px;
      }
-      &--time{
+      &--time {
        font-size: 18px;
-        div{
+        div {
          direction: rtl;
        }
      }
-      span{
+      span {
        position: relative;
-        right:15px;
+        right: 15px;
        direction: rtl;
        font-size: 20px;
      }
    }
-    &__current{
+    &__current {
      position: fixed;
      bottom: 84px;
      width: 70px;
      right: 5px;
-      background : rgb(220, 220, 220);
-      height:70px;
+      background: rgb(220, 220, 220);
+      height: 70px;
      border-radius: 100px;
      z-index: 1000;
    }
  }
-}
+}
--- a/src/views/Home/Header/Header.js
+++ b/src/views/Home/Header/Header.js
@ -1,4 +1,4 @@
-import React, { useEffect,useState,useRef } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import MenuIcon from '@material-ui/icons/Menu';
 import SearchIcon from '@material-ui/icons/Search';
 import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt';
@ -6,9 +6,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import { SwipeableDrawer } from '@material-ui/core';
 import NavbarDrawer from './NavbarDrawer/NavbarDrawer.js';
 import clsx from 'clsx';
-
 import './Header.scss';
-
 const useStyles = makeStyles({
  list: {
    width: window.innerWidth * 0.8,
@ -16,11 +14,10 @@ const useStyles = makeStyles({
  fullList: {
    width: 'auto',
    direction: 'rtl',
-    textAlign: 'right'
+    textAlign: 'right',
  },
 });

-
 export default function Header(props) {
  const classes = useStyles();

@ -29,17 +26,17 @@ export default function Header(props) {
    left: false,
    bottom: false,
    right: false,
-    searchFlag : false,
+    searchFlag: false,
  });

  const inputRef5 = useRef();

-  useEffect(() =>{
-    if(state['searchFlag'] === true){
+  useEffect(() => {
+    if (state['searchFlag'] === true) {
      inputRef5.current.focus();
    }
  });
-  
+
  const list = (props, anchor) => (
    <div
      className={clsx(classes.list, {
@ -49,7 +46,12 @@ export default function Header(props) {
      onClick={toggleDrawer(anchor, false)}
      onKeyDown={toggleDrawer(anchor, false)}
    >
-      <NavbarDrawer setShare={props.setShare} user={props.user} logout={props.logout} needUpdate={props.needUpdate} />
+      <NavbarDrawer
+        setShare={props.setShare}
+        user={props.user}
+        logout={props.logout}
+        needUpdate={props.needUpdate}
+      />
    </div>
  );

@ -63,46 +65,42 @@ export default function Header(props) {

  return (
    <div className="header d-flex">
-      {
-        state['searchFlag'] === true ? 
+      {state['searchFlag'] === true ? (
        <div className="header__search d-flex">
-          <div onClick={() => setState({ ...state, searchFlag: !state.searchFlag})}>
-            <ArrowRightAltIcon style={{color : "rgb(111,108,255)" , width : 38, height : 38}} />
+          <div onClick={() => setState({ ...state, searchFlag: !state.searchFlag })}>
+            <ArrowRightAltIcon style={{ color: 'rgb(111,108,255)', width: 38, height: 38 }} />
          </div>
-          <input 
-            type="search" 
-            ref={inputRef5}
-            placeholder="بنویس ..."
-          />
+          <input type="search" ref={inputRef5} placeholder="بنویس ..." />
          <div>
-            <SearchIcon style={{color : "gray" , width : 38, height : 38,marginLeft : 15}} />
+            <SearchIcon style={{ color: 'gray', width: 38, height: 38, marginLeft: 15 }} />
          </div>
-        </div> : 
+        </div>
+      ) : (
        <>
-          <div onClick={() => setState({ ...state, searchFlag: !state.searchFlag})}>
-            <SearchIcon style={{color : "white" , width : 38, height : 38}} />
+          <div onClick={() => setState({ ...state, searchFlag: !state.searchFlag })}>
+            <SearchIcon style={{ color: 'white', width: 38, height: 38 }} />
          </div>
          <div className="chat-header__title d-flex">
-            <h1 style={{fontFamily : 'IRANSansNumeralBold'}}>ایما</h1>
-            <span style={{position : "relative", top : -3}}></span>
-            <h1 style={{fontSize :17,position : "relative", top : 2}}>داستانبازی</h1>
+            <h1 style={{ fontFamily: 'IRANSansNumeralBold' }}>ایما</h1>
+            <span style={{ position: 'relative', top: -3 }}></span>
+            <h1 style={{ fontSize: 17, position: 'relative', top: 2 }}>داستانبازی</h1>
          </div>
          <div onClick={toggleDrawer('right', true)}>
-            <MenuIcon style={{color : "white" , width : 38, height : 38,position : "relative", top : 0}} />
+            <MenuIcon
+              style={{ color: 'white', width: 38, height: 38, position: 'relative', top: 0 }}
+            />
          </div>
-          
+
          <SwipeableDrawer
-            anchor='right'
+            anchor="right"
            open={state['right']}
            onClose={toggleDrawer('right', false)}
            onOpen={toggleDrawer('right', true)}
          >
-            {list(props,'right')}
+            {list(props, 'right')}
          </SwipeableDrawer>
        </>
-      }
-      
+      )}
    </div>
  );
 }
-
--- a/src/views/Home/Header/Header.scss
+++ b/src/views/Home/Header/Header.scss
@ -1,38 +1,38 @@
-@media screen and (max-width: 4500px){
-  .header{
+@media screen and (max-width: 4500px) {
+  .header {
    height: 60px;
    width: 100%;
-    justify-content : space-between;
+    justify-content: space-between;
    align-items: center;
-    padding : 0px 15px;
+    padding: 0px 15px;
    position: relative;
-    &__search{
+    &__search {
      width: 100vw;
      background-color: rgb(255, 255, 255);
-      direction : rtl;
-      align-items : center;
+      direction: rtl;
+      align-items: center;
      position: fixed;
-      top : 0px;
-      left : 0px;
-      height : 60px;
+      top: 0px;
+      left: 0px;
+      height: 60px;
      z-index: 550;
      animation-duration: 0.3s;
      animation-name: search;
      animation-iteration-count: 1;
-      input{
+      input {
        width: 100%;
        position: relative;
-        padding : 8px 10px 8px 10px;
-        border : 0px;
+        padding: 8px 10px 8px 10px;
+        border: 0px;
        border-radius: 2px;
-        color : black;
+        color: black;
        font-size: 18px;
        text-align: right;
        background-color: inherit;
-        &:focus{
-          outline:none;
+        &:focus {
+          outline: none;
        }
-        &::placeholder{
+        &::placeholder {
          color: grey;
          font-size: 16px;
        }
@ -41,8 +41,13 @@
  }
 }

-
-@keyframes search{
-  0% {left : -100vw; top : 0px}
-  100% {left : 0px; top : 0px}
-}
+@keyframes search {
+  0% {
+    left: -100vw;
+    top: 0px;
+  }
+  100% {
+    left: 0px;
+    top: 0px;
+  }
+}
--- a/src/views/Home/Header/NavbarDrawer/NavbarDrawer.js
+++ b/src/views/Home/Header/NavbarDrawer/NavbarDrawer.js
@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
-import {toast} from 'react-toastify';
+import { toast } from 'react-toastify';

 import HomeIcon from '@material-ui/icons/Home';
 import CloseIcon from '@material-ui/icons/Close';
@ -9,11 +9,9 @@ import SettingsIcon from '@material-ui/icons/Settings';
 import UpdateIcon from '@material-ui/icons/Update';
 import ReportIcon from '@material-ui/icons/Report';
 import ShareIcon from '@material-ui/icons/Share';
-import proxy from '../../../../Redux/proxy'
+import proxy from '../../../../Redux/proxy';
 // import {connect} from 'react-redux';
-
 import './NavbarDrawer.scss';
-
 class NavbarDrawer extends Component {
  constructor(props) {
    super(props);
@ -22,47 +20,44 @@ class NavbarDrawer extends Component {
        {
          name: 'صفحه اصلی',
          link: '/',
-          icon: <HomeIcon style={{color : "white" , width : 35, height : 35,marginLeft : 10}} />,
-          toast : '',
+          icon: <HomeIcon style={{ color: 'white', width: 35, height: 35, marginLeft: 10 }} />,
+          toast: '',
        },
        {
          name: 'تنظیمات',
          link: '/',
-          icon: <SettingsIcon style={{color : "white" , width : 35, height : 35,marginLeft : 10}} />,
-          toast : '',
+          icon: <SettingsIcon style={{ color: 'white', width: 35, height: 35, marginLeft: 10 }} />,
+          toast: '',
        },
        {
          name: 'به روز رسانی',
          link: '/',
-          icon: <UpdateIcon style={{color : "white" , width : 35, height : 35,marginLeft : 10}} />,
-          toast : '',
+          icon: <UpdateIcon style={{ color: 'white', width: 35, height: 35, marginLeft: 10 }} />,
+          toast: '',
        },
        {
          name: 'همرسانی',
          link: '/',
-          icon: <ShareIcon style={{color : "white" , width : 35, height : 35,marginLeft : 10}} />,
-          toast : '',
+          icon: <ShareIcon style={{ color: 'white', width: 35, height: 35, marginLeft: 10 }} />,
+          toast: '',
        },
        {
          name: 'گزارش ایراد',
          link: '/',
-          icon: <ReportIcon style={{color : "white" , width : 35, height : 35,marginLeft : 10}} />,
-          toast : '',
+          icon: <ReportIcon style={{ color: 'white', width: 35, height: 35, marginLeft: 10 }} />,
+          toast: '',
        },
        {
          name: 'خروج',
          link: '/auth',
-          icon: <ExitToAppIcon style={{color : "white" , width : 35, height : 35,marginLeft : 10}} />,
-          toast : '',
-          onClick :   proxy.logout
-          
+          icon: <ExitToAppIcon style={{ color: 'white', width: 35, height: 35, marginLeft: 10 }} />,
+          toast: '',
+          onClick: proxy.logout,
        },
      ],
-    }
+    };
  }

-
-
  render() {
    return (
      <div className="navbar-drawer d-flex flex-column">
@ -71,20 +66,22 @@ class NavbarDrawer extends Component {
            <h1>رضا</h1>
            <div>منوی دسترسی سریع</div>
          </div>
-          <CloseIcon style={{color : "white" , width : 40, height : 40}} />
+          <CloseIcon style={{ color: 'white', width: 40, height: 40 }} />
        </div>
        <div className="navbar-drawer__bottom mt-1">
-          {
-            this.state.links.map((item,key) => (
-              <Link to={item.link} key={key} onClick={item.onClick || (() => item.link === "" ? toast.error(item.toast) : null)}>
-                <div className="navbar-drawer__bottom--link d-flex">
-                  {item.icon}
-                  <div>{item.name}</div>
-                  {item.badge && <div class="badge" >{item.badge}</div>}
-                </div>
-              </Link>
-            ))
-          }
+          {this.state.links.map((item, key) => (
+            <Link
+              to={item.link}
+              key={key}
+              onClick={item.onClick || (() => (item.link === '' ? toast.error(item.toast) : null))}
+            >
+              <div className="navbar-drawer__bottom--link d-flex">
+                {item.icon}
+                <div>{item.name}</div>
+                {item.badge && <div class="badge">{item.badge}</div>}
+              </div>
+            </Link>
+          ))}

          {/* <div className="navbar-drawer__bottom--version d-flex">
            <span>نسخه نرم‌افزار 3.1</span>
@ -100,4 +97,4 @@ class NavbarDrawer extends Component {
 // });

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

-.MuiPaper-root{
-  background: linear-gradient(180deg, rgb(144, 73, 186) 20%, rgb(111,108,255) 72%) !important;
-  &::-webkit-scrollbar{
+.MuiPaper-root {
+  background: linear-gradient(180deg, rgb(144, 73, 186) 20%, rgb(111, 108, 255) 72%) !important;
+  &::-webkit-scrollbar {
    display: none;
    width: 0px;
  }
-} 
-
+}

-.navbar-drawer__bottom a{
+.navbar-drawer__bottom a {
  width: 100%;
  height: 100px;
-  color : white;
+  color: white;
 }

-
-.navbar-drawer__bottom--link 
-
-.navbar-drawer__bottom--link div{
+.navbar-drawer__bottom--link .navbar-drawer__bottom--link div {
  font-size: 16px;
-}
+}
--- a/src/views/Home/Home.js
+++ b/src/views/Home/Home.js
@ -8,16 +8,16 @@ export default class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
-      tabBar : 'chat',
-    }
+      tabBar: 'chat',
+    };
  }

  setTabBar = (value) => {
    this.setState({
-      tabBar : value,
-    })
-  } 
-  render(){
+      tabBar: value,
+    });
+  };
+  render() {
    return (
      <div className="home d-flex flex-column">
        <Header />
@ -26,4 +26,4 @@ export default class Home extends Component {
      </div>
    );
  }
-}
+}
--- a/src/views/Home/Home.scss
+++ b/src/views/Home/Home.scss
@ -1,10 +1,10 @@
-@media screen and (max-width: 4500px){
-  .home{
+@media screen and (max-width: 4500px) {
+  .home {
    overflow-y: hidden;
-    flex : 1;
+    flex: 1;
    background: rgb(139, 73, 186);
-    background: linear-gradient(180deg, rgb(144, 73, 186) 0%, rgb(111,108,255) 22%);
+    background: linear-gradient(180deg, rgb(144, 73, 186) 0%, rgb(111, 108, 255) 22%);
    height: 100vh;
    box-shadow: 0px 0px 40px rgba(145, 145, 145, 0.8);
  }
-}
+}
--- a/src/views/Home/TabBar/TabBar.js
+++ b/src/views/Home/TabBar/TabBar.js
@ -5,36 +5,57 @@ import InfoIcon from '@material-ui/icons/Info';

 import './TabBar.scss';
 export default class TabBar extends Component {
-  
-  render(){
+  render() {
    return (
      <div className="tabBar d-flex">
-        <div className="tabBar__item d-flex flex-column" onClick={() => this.props.setTabBar('info')} style={{borderColor : this.props.tabBar === "info" ? "white" : "#afafaf"}}>
-          <InfoIcon style={{ color : this.props.tabBar === "info" ? "white" : "#afafaf" , width : 50, height : 30, padding:"5px 10px"}} />
-          {
-            this.props.tabBar === 'info' ? 
-            <div className="tabBar__item--active">
-            </div> : null
-          }
+        <div
+          className="tabBar__item d-flex flex-column"
+          onClick={() => this.props.setTabBar('info')}
+          style={{ borderColor: this.props.tabBar === 'info' ? 'white' : '#afafaf' }}
+        >
+          <InfoIcon
+            style={{
+              color: this.props.tabBar === 'info' ? 'white' : '#afafaf',
+              width: 50,
+              height: 30,
+              padding: '5px 10px',
+            }}
+          />
+          {this.props.tabBar === 'info' ? <div className="tabBar__item--active"></div> : null}
        </div>
-        <div className="tabBar__item d-flex flex-column" onClick={() => this.props.setTabBar('location')}  style={{borderColor : this.props.tabBar === "location" ? "white" : "#afafaf"}}>
-          <LocationOnIcon style={{borderColor : this.props.tabBar === "info" ? "white" : "#afafaf" ,color : this.props.tabBar === "location" ? "white" : "#afafaf" , width : 50, height : 30, padding:"5px 10px"}} />
-          {
-            this.props.tabBar === 'location' ? 
-            <div className="tabBar__item--active">
-            </div> : null
-          }
+        <div
+          className="tabBar__item d-flex flex-column"
+          onClick={() => this.props.setTabBar('location')}
+          style={{ borderColor: this.props.tabBar === 'location' ? 'white' : '#afafaf' }}
+        >
+          <LocationOnIcon
+            style={{
+              borderColor: this.props.tabBar === 'info' ? 'white' : '#afafaf',
+              color: this.props.tabBar === 'location' ? 'white' : '#afafaf',
+              width: 50,
+              height: 30,
+              padding: '5px 10px',
+            }}
+          />
+          {this.props.tabBar === 'location' ? <div className="tabBar__item--active"></div> : null}
        </div>
-        <div className="tabBar__item d-flex flex-column" onClick={() => this.props.setTabBar('chat')}
-        style={{borderColor : this.props.tabBar === "chat" ? "white" : "#afafaf"}}>
-          <ChatIcon style={{borderColor : this.props.tabBar === "info" ? "white" : "#afafaf" ,color : this.props.tabBar === "chat" ? "white" : "#afafaf" , width : 50, height : 30, padding:"5px 10px"}} />
-          {
-            this.props.tabBar === 'chat' ? 
-            <div className="tabBar__item--active">
-            </div> : null
-          }
+        <div
+          className="tabBar__item d-flex flex-column"
+          onClick={() => this.props.setTabBar('chat')}
+          style={{ borderColor: this.props.tabBar === 'chat' ? 'white' : '#afafaf' }}
+        >
+          <ChatIcon
+            style={{
+              borderColor: this.props.tabBar === 'info' ? 'white' : '#afafaf',
+              color: this.props.tabBar === 'chat' ? 'white' : '#afafaf',
+              width: 50,
+              height: 30,
+              padding: '5px 10px',
+            }}
+          />
+          {this.props.tabBar === 'chat' ? <div className="tabBar__item--active"></div> : null}
        </div>
      </div>
    );
  }
-}
+}
--- a/src/views/Home/TabBar/TabBar.scss
+++ b/src/views/Home/TabBar/TabBar.scss
@ -1,25 +1,25 @@
-@media screen and (max-width: 4500px){
-  .tabBar{
+@media screen and (max-width: 4500px) {
+  .tabBar {
    height: 50px;
    width: 100%;
-    justify-content : space-around;
+    justify-content: space-around;
    align-items: center;
-    padding : 0px 5px;
-    &__item{
-      border: 3px solid #afafaf ;
-      border-radius:10px;
+    padding: 0px 5px;
+    &__item {
+      border: 3px solid #afafaf;
+      border-radius: 10px;
      position: relative;
-      &--active{
-        border: 3px solid #fff ;
+      &--active {
+        border: 3px solid #fff;
        width: 60px;
        height: 60px;
        border-radius: 30px;
        position: absolute;
-        top : 38px;
+        top: 38px;
        left: -9px;
        z-index: 0px;
-        background-color: rgb(255, 255, 255)
+        background-color: rgb(255, 255, 255);
      }
    }
  }
-}
+}
--- a/yarn.lock
+++ b/yarn.lock
@ -1143,7 +1143,7 @@
    "@babel/helper-plugin-utils" "^7.10.4"
    "@babel/plugin-transform-typescript" "^7.12.1"

-"@babel/runtime-corejs3@^7.10.2":
+"@babel/runtime-corejs3@^7.10.2", "@babel/runtime-corejs3@^7.12.1":
  version "7.14.0"
  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.14.0.tgz#6bf5fbc0b961f8e3202888cb2cd0fb7a0a9a3f66"
  integrity sha512-0R0HTZWHLk6G8jIk0FtoX+AatCtKnswS98VhXwGImFc759PJRp4Tru0PQYZofyijTFUr+gT8Mu7sgXVJLQ0ceg==
@ -1158,7 +1158,7 @@
  dependencies:
    regenerator-runtime "^0.13.4"

-"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
  version "7.14.0"
  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.0.tgz#46794bc20b612c5f75e62dd071e24dfd95f1cbe6"
  integrity sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==
@ -1293,6 +1293,20 @@
  dependencies:
    "@hapi/hoek" "^8.3.0"

+"@imaginary-cloud/eslint-config-react@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@imaginary-cloud/eslint-config-react/-/eslint-config-react-1.0.1.tgz#f0a5783f2570440c16c9a31650ef1d76850771ab"
+  integrity sha512-j+995w8u3hWMuW4HlJsYOM2Pw/aPOBG0PvroH3bXuc54iyhGSJOLKADJ2SpbAvUqMAT+0Q7paSTyCn22F1TmcQ==
+  dependencies:
+    "@imaginary-cloud/prettier-config" "^1.0.0"
+    eslint "^6.8.0"
+    prettier "^2.0.4"
+
+"@imaginary-cloud/prettier-config@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@imaginary-cloud/prettier-config/-/prettier-config-1.0.0.tgz#14de2ad7c1f4e1d65dc64d41235f6d6ef278200b"
+  integrity sha512-isuRAYLXvPxWGSrsOEN7FrOtpZnyxazg6cwPlMu0V3XnC4USuX6HKlReigbaql6VTmA1t+9Y4LC2mWCJTCoOTw==
+
 "@istanbuljs/load-nyc-config@^1.0.0":
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
@ -2337,7 +2351,7 @@ acorn-globals@^6.0.0:
    acorn "^7.1.1"
    acorn-walk "^7.1.1"

-acorn-jsx@^5.3.1:
+acorn-jsx@^5.2.0, acorn-jsx@^5.3.1:
  version "5.3.1"
  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.1.tgz#fc8661e11b7ac1539c47dbfea2e72b3af34d267b"
  integrity sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==
@ -2520,6 +2534,14 @@ argparse@^1.0.7:
  dependencies:
    sprintf-js "~1.0.2"

+aria-query@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-3.0.0.tgz#65b3fcc1ca1155a8c9ae64d6eee297f15d5133cc"
+  integrity sha1-ZbP8wcoRVajJrmTW7uKX8V1RM8w=
+  dependencies:
+    ast-types-flow "0.0.7"
+    commander "^2.11.0"
+
 aria-query@^4.2.2:
  version "4.2.2"
  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-4.2.2.tgz#0d2ca6c9aceb56b8977e9fed6aed7e15bbd2f83b"
@ -2563,7 +2585,7 @@ array-flatten@^2.1.0:
  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-2.1.2.tgz#24ef80a28c1a893617e2149b0c6d0d788293b099"
  integrity sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==

-array-includes@^3.1.1, array-includes@^3.1.2, array-includes@^3.1.3:
+array-includes@^3.0.3, array-includes@^3.1.1, array-includes@^3.1.2, array-includes@^3.1.3:
  version "3.1.3"
  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.3.tgz#c7f619b382ad2afaf5326cddfdc0afc61af7690a"
  integrity sha512-gcem1KlBU7c9rB+Rq8/3PPKsK2kjqeEBa3bD5kkQo4nYlOHQCJqIJFqBXDEfwaRuYTT4E+FxA9xez7Gf/e3Q7A==
@ -2665,11 +2687,16 @@ assign-symbols@^1.0.0:
  resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
  integrity sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=

-ast-types-flow@^0.0.7:
+ast-types-flow@0.0.7, ast-types-flow@^0.0.7:
  version "0.0.7"
  resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad"
  integrity sha1-9wtzXGvKGlycItmCw+Oef+ujva0=

+astral-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-1.0.0.tgz#6c8c3fb827dd43ee3918f27b82782ab7658a6fd9"
+  integrity sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==
+
 astral-regex@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31"
@ -2754,7 +2781,7 @@ axios@^0.21.1:
  dependencies:
    follow-redirects "^1.10.0"

-axobject-query@^2.2.0:
+axobject-query@^2.0.2, axobject-query@^2.2.0:
  version "2.2.0"
  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
  integrity sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==
@ -3415,7 +3442,7 @@ caseless@~0.12.0:
  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
  integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=

-chalk@2.4.2, chalk@^2.0.0, chalk@^2.4.1, chalk@^2.4.2:
+chalk@2.4.2, chalk@^2.0.0, chalk@^2.1.0, chalk@^2.4.1, chalk@^2.4.2:
  version "2.4.2"
  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
  integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@ -3679,7 +3706,7 @@ combined-stream@^1.0.6, combined-stream@~1.0.6:
  dependencies:
    delayed-stream "~1.0.0"

-commander@^2.20.0:
+commander@^2.11.0, commander@^2.20.0:
  version "2.20.3"
  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
@ -3935,7 +3962,7 @@ cross-spawn@7.0.3, cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
    shebang-command "^2.0.0"
    which "^2.0.1"

-cross-spawn@^6.0.0:
+cross-spawn@^6.0.0, cross-spawn@^6.0.5:
  version "6.0.5"
  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
  integrity sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==
@ -4240,7 +4267,7 @@ d@1, d@^1.0.1:
    es5-ext "^0.10.50"
    type "^1.0.1"

-damerau-levenshtein@^1.0.6:
+damerau-levenshtein@^1.0.4, damerau-levenshtein@^1.0.6:
  version "1.0.7"
  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.7.tgz#64368003512a1a6992593741a09a9d31a836f55d"
  integrity sha512-VvdQIPGdWP0SqFXghj79Wf/5LArmreyMsGLa6FG6iC4t3j7j5s71TrwWmT/4akbDQIqjfACkLZmjXhA7g2oUZw==
@ -4621,7 +4648,7 @@ emittery@^0.7.1:
  resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.7.2.tgz#25595908e13af0f5674ab419396e2fb394cdfa82"
  integrity sha512-A8OG5SR/ij3SsJdWDJdkkSYUjQdCUx6APQXem0SaEePBSRg4eymGYwBkKo1Y6DU+af/Jn2dBQqDBvjnr9Vi8nQ==

-emoji-regex@^7.0.1:
+emoji-regex@^7.0.1, emoji-regex@^7.0.2:
  version "7.0.3"
  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"
  integrity sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==
@ -4732,6 +4759,28 @@ es-abstract@^1.17.2, es-abstract@^1.18.0-next.1, es-abstract@^1.18.0-next.2:
    string.prototype.trimstart "^1.0.4"
    unbox-primitive "^1.0.0"

+es-abstract@^1.18.2:
+  version "1.18.2"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.2.tgz#6eb518b640262e8ddcbd48e0bc8549f82efd48a7"
+  integrity sha512-byRiNIQXE6HWNySaU6JohoNXzYgbBjztwFnBLUTiJmWXjaU9bSq3urQLUlNLQ292tc+gc07zYZXNZjaOoAX3sw==
+  dependencies:
+    call-bind "^1.0.2"
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    get-intrinsic "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.2"
+    is-callable "^1.2.3"
+    is-negative-zero "^2.0.1"
+    is-regex "^1.1.3"
+    is-string "^1.0.6"
+    object-inspect "^1.10.3"
+    object-keys "^1.1.1"
+    object.assign "^4.1.2"
+    string.prototype.trimend "^1.0.4"
+    string.prototype.trimstart "^1.0.4"
+    unbox-primitive "^1.0.1"
+
 es-to-primitive@^1.2.1:
  version "1.2.1"
  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
@ -4787,6 +4836,11 @@ escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
  integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=

+escape-string-regexp@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
+  integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
+
 escodegen@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-2.0.0.tgz#5e32b12833e8aa8fa35e1bf0befa89380484c7dd"
@ -4799,6 +4853,29 @@ escodegen@^2.0.0:
  optionalDependencies:
    source-map "~0.6.1"

+eslint-config-airbnb-base@^14.1.0, eslint-config-airbnb-base@^14.2.1:
+  version "14.2.1"
+  resolved "https://registry.yarnpkg.com/eslint-config-airbnb-base/-/eslint-config-airbnb-base-14.2.1.tgz#8a2eb38455dc5a312550193b319cdaeef042cd1e"
+  integrity sha512-GOrQyDtVEc1Xy20U7vsB2yAoB4nBlfH5HZJeatRXHleO+OS5Ot+MWij4Dpltw4/DyIkqUfqz1epfhVR5XWWQPA==
+  dependencies:
+    confusing-browser-globals "^1.0.10"
+    object.assign "^4.1.2"
+    object.entries "^1.1.2"
+
+eslint-config-airbnb@18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-airbnb/-/eslint-config-airbnb-18.1.0.tgz#724d7e93dadd2169492ff5363c5aaa779e01257d"
+  integrity sha512-kZFuQC/MPnH7KJp6v95xsLBf63G/w7YqdPfQ0MUanxQ7zcKUNG8j+sSY860g3NwCBOa62apw16J6pRN+AOgXzw==
+  dependencies:
+    eslint-config-airbnb-base "^14.1.0"
+    object.assign "^4.1.0"
+    object.entries "^1.1.1"
+
+eslint-config-prettier@^7.0.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-7.2.0.tgz#f4a4bd2832e810e8cc7c1411ec85b3e85c0c53f9"
+  integrity sha512-rV4Qu0C3nfJKPOAhFujFxB7RMP+URFyQqqOZW9DMRD7ZDTFyjaIlETU3xzHELt++4ugC0+Jm084HQYkkJe+Ivg==
+
 eslint-config-react-app@^6.0.0:
  version "6.0.0"
  resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-6.0.0.tgz#ccff9fc8e36b322902844cbd79197982be355a0e"
@ -4806,6 +4883,14 @@ eslint-config-react-app@^6.0.0:
  dependencies:
    confusing-browser-globals "^1.0.10"

+eslint-import-resolver-babel-module@^5.2.0:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-babel-module/-/eslint-import-resolver-babel-module-5.3.1.tgz#808a42f311a6c33d473f9f4c846d1d487d29eff4"
+  integrity sha512-WomQAkjO7lUNOdU3FG2zgNgylkoAVUmaw04bHgSpM9QrMWuOLLWa2qcP6CrsBd4VWuLRbUPyzrgBc9ZQIx9agw==
+  dependencies:
+    pkg-up "^3.1.0"
+    resolve "^1.20.0"
+
 eslint-import-resolver-node@^0.3.4:
  version "0.3.4"
  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.4.tgz#85ffa81942c25012d8231096ddf679c03042c717"
@ -4859,6 +4944,21 @@ eslint-plugin-jest@^24.1.0:
  dependencies:
    "@typescript-eslint/experimental-utils" "^4.0.1"

+eslint-plugin-jsx-a11y@6.2.3:
+  version "6.2.3"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.2.3.tgz#b872a09d5de51af70a97db1eea7dc933043708aa"
+  integrity sha512-CawzfGt9w83tyuVekn0GDPU9ytYtxyxyFZ3aSWROmnRRFQFT2BiPJd7jvRdzNDi6oLWaS2asMeYSNMjWTV4eNg==
+  dependencies:
+    "@babel/runtime" "^7.4.5"
+    aria-query "^3.0.0"
+    array-includes "^3.0.3"
+    ast-types-flow "^0.0.7"
+    axobject-query "^2.0.2"
+    damerau-levenshtein "^1.0.4"
+    emoji-regex "^7.0.2"
+    has "^1.0.3"
+    jsx-ast-utils "^2.2.1"
+
 eslint-plugin-jsx-a11y@^6.3.1:
  version "6.4.1"
  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.4.1.tgz#a2d84caa49756942f42f1ffab9002436391718fd"
@ -4876,11 +4976,41 @@ eslint-plugin-jsx-a11y@^6.3.1:
    jsx-ast-utils "^3.1.0"
    language-tags "^1.0.5"

+eslint-plugin-prettier@^3.3.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.4.0.tgz#cdbad3bf1dbd2b177e9825737fe63b476a08f0c7"
+  integrity sha512-UDK6rJT6INSfcOo545jiaOwB701uAIt2/dR7WnFQoGCVl1/EMqdANBmwUaqqQ45aXprsTGzSa39LI1PyuRBxxw==
+  dependencies:
+    prettier-linter-helpers "^1.0.0"
+
+eslint-plugin-react-hooks@2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-2.5.1.tgz#4ef5930592588ce171abeb26f400c7fbcbc23cd0"
+  integrity sha512-Y2c4b55R+6ZzwtTppKwSmK/Kar8AdLiC2f9NADCuxbcTgPPg41Gyqa6b9GppgXSvCtkRw43ZE86CT5sejKC6/g==
+
 eslint-plugin-react-hooks@^4.2.0:
  version "4.2.0"
  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz#8c229c268d468956334c943bb45fc860280f5556"
  integrity sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==

+eslint-plugin-react@7.19.0:
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.19.0.tgz#6d08f9673628aa69c5559d33489e855d83551666"
+  integrity sha512-SPT8j72CGuAP+JFbT0sJHOB80TX/pu44gQ4vXH/cq+hQTiY2PuZ6IHkqXJV6x1b28GDdo1lbInjKUrrdUf0LOQ==
+  dependencies:
+    array-includes "^3.1.1"
+    doctrine "^2.1.0"
+    has "^1.0.3"
+    jsx-ast-utils "^2.2.3"
+    object.entries "^1.1.1"
+    object.fromentries "^2.0.2"
+    object.values "^1.1.1"
+    prop-types "^15.7.2"
+    resolve "^1.15.1"
+    semver "^6.3.0"
+    string.prototype.matchall "^4.0.2"
+    xregexp "^4.3.0"
+
 eslint-plugin-react@^7.21.5:
  version "7.23.2"
  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.23.2.tgz#2d2291b0f95c03728b55869f01102290e792d494"
@ -4922,6 +5052,13 @@ eslint-scope@^5.0.0, eslint-scope@^5.1.1:
    esrecurse "^4.3.0"
    estraverse "^4.1.1"

+eslint-utils@^1.4.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-1.4.3.tgz#74fec7c54d0776b6f67e0251040b5806564e981f"
+  integrity sha512-fbBN5W2xdY45KulGXmLHZ3c3FHfVYmKg0IrAKGOkT/464PQsx2UeIzfz1RmEci+KLm1bBaAzZAh8+/E+XAeZ8Q==
+  dependencies:
+    eslint-visitor-keys "^1.1.0"
+
 eslint-utils@^2.0.0, eslint-utils@^2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-2.1.0.tgz#d2de5e03424e707dc10c74068ddedae708741b27"
@ -4951,6 +5088,49 @@ eslint-webpack-plugin@^2.5.2:
    normalize-path "^3.0.0"
    schema-utils "^3.0.0"

+eslint@^6.8.0:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-6.8.0.tgz#62262d6729739f9275723824302fb227c8c93ffb"
+  integrity sha512-K+Iayyo2LtyYhDSYwz5D5QdWw0hCacNzyq1Y821Xna2xSJj7cijoLLYmLxTQgcgZ9mC61nryMy9S7GRbYpI5Ig==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    ajv "^6.10.0"
+    chalk "^2.1.0"
+    cross-spawn "^6.0.5"
+    debug "^4.0.1"
+    doctrine "^3.0.0"
+    eslint-scope "^5.0.0"
+    eslint-utils "^1.4.3"
+    eslint-visitor-keys "^1.1.0"
+    espree "^6.1.2"
+    esquery "^1.0.1"
+    esutils "^2.0.2"
+    file-entry-cache "^5.0.1"
+    functional-red-black-tree "^1.0.1"
+    glob-parent "^5.0.0"
+    globals "^12.1.0"
+    ignore "^4.0.6"
+    import-fresh "^3.0.0"
+    imurmurhash "^0.1.4"
+    inquirer "^7.0.0"
+    is-glob "^4.0.0"
+    js-yaml "^3.13.1"
+    json-stable-stringify-without-jsonify "^1.0.1"
+    levn "^0.3.0"
+    lodash "^4.17.14"
+    minimatch "^3.0.4"
+    mkdirp "^0.5.1"
+    natural-compare "^1.4.0"
+    optionator "^0.8.3"
+    progress "^2.0.0"
+    regexpp "^2.0.1"
+    semver "^6.1.2"
+    strip-ansi "^5.2.0"
+    strip-json-comments "^3.0.1"
+    table "^5.2.3"
+    text-table "^0.2.0"
+    v8-compile-cache "^2.0.3"
+
 eslint@^7.11.0:
  version "7.26.0"
  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.26.0.tgz#d416fdcdcb3236cd8f282065312813f8c13982f6"
@ -4994,6 +5174,60 @@ eslint@^7.11.0:
    text-table "^0.2.0"
    v8-compile-cache "^2.0.3"

+eslint@^7.15.0:
+  version "7.27.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.27.0.tgz#665a1506d8f95655c9274d84bd78f7166b07e9c7"
+  integrity sha512-JZuR6La2ZF0UD384lcbnd0Cgg6QJjiCwhMD6eU4h/VGPcVGwawNNzKU41tgokGXnfjOOyI6QIffthhJTPzzuRA==
+  dependencies:
+    "@babel/code-frame" "7.12.11"
+    "@eslint/eslintrc" "^0.4.1"
+    ajv "^6.10.0"
+    chalk "^4.0.0"
+    cross-spawn "^7.0.2"
+    debug "^4.0.1"
+    doctrine "^3.0.0"
+    enquirer "^2.3.5"
+    escape-string-regexp "^4.0.0"
+    eslint-scope "^5.1.1"
+    eslint-utils "^2.1.0"
+    eslint-visitor-keys "^2.0.0"
+    espree "^7.3.1"
+    esquery "^1.4.0"
+    esutils "^2.0.2"
+    fast-deep-equal "^3.1.3"
+    file-entry-cache "^6.0.1"
+    functional-red-black-tree "^1.0.1"
+    glob-parent "^5.0.0"
+    globals "^13.6.0"
+    ignore "^4.0.6"
+    import-fresh "^3.0.0"
+    imurmurhash "^0.1.4"
+    is-glob "^4.0.0"
+    js-yaml "^3.13.1"
+    json-stable-stringify-without-jsonify "^1.0.1"
+    levn "^0.4.1"
+    lodash.merge "^4.6.2"
+    minimatch "^3.0.4"
+    natural-compare "^1.4.0"
+    optionator "^0.9.1"
+    progress "^2.0.0"
+    regexpp "^3.1.0"
+    semver "^7.2.1"
+    strip-ansi "^6.0.0"
+    strip-json-comments "^3.1.0"
+    table "^6.0.9"
+    text-table "^0.2.0"
+    v8-compile-cache "^2.0.3"
+
+espree@^6.1.2:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-6.2.1.tgz#77fc72e1fd744a2052c20f38a5b575832e82734a"
+  integrity sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==
+  dependencies:
+    acorn "^7.1.1"
+    acorn-jsx "^5.2.0"
+    eslint-visitor-keys "^1.1.0"
+
 espree@^7.3.0, espree@^7.3.1:
  version "7.3.1"
  resolved "https://registry.yarnpkg.com/espree/-/espree-7.3.1.tgz#f2df330b752c6f55019f8bd89b7660039c1bbbb6"
@ -5008,7 +5242,7 @@ esprima@^4.0.0, esprima@^4.0.1:
  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
  integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==

-esquery@^1.4.0:
+esquery@^1.0.1, esquery@^1.4.0:
  version "1.4.0"
  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.4.0.tgz#2148ffc38b82e8c7057dfed48425b3e61f0f24a5"
  integrity sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==
@ -5236,11 +5470,16 @@ extsprintf@^1.2.0:
  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
  integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=

-fast-deep-equal@^3.1.1:
+fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
  version "3.1.3"
  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==

+fast-diff@^1.1.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
+  integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
+
 fast-glob@^3.1.1:
  version "3.2.5"
  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.5.tgz#7939af2a656de79a4f1901903ee8adcaa7cb9661"
@ -5296,6 +5535,13 @@ figures@^3.0.0:
  dependencies:
    escape-string-regexp "^1.0.5"

+file-entry-cache@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-5.0.1.tgz#ca0f6efa6dd3d561333fb14515065c2fafdf439c"
+  integrity sha512-bCg29ictuBaKUwwArK4ouCaqDgLZcysCFLmM/Yn/FDoqndh/9vNuQfXRDvTuXKLxfD/JtZQGKFT8MGcJBK644g==
+  dependencies:
+    flat-cache "^2.0.1"
+
 file-entry-cache@^6.0.1:
  version "6.0.1"
  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
@ -5399,6 +5645,15 @@ find-up@^3.0.0:
  dependencies:
    locate-path "^3.0.0"

+flat-cache@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-2.0.1.tgz#5d296d6f04bda44a4630a301413bdbc2ec085ec0"
+  integrity sha512-LoQe6yDuUMDzQAEH8sgmh4Md6oZnc/7PjtwjNFSzveXqSHt6ka9fPBuso7IGf9Rz4uqnSnWiFH2B/zj24a5ReA==
+  dependencies:
+    flatted "^2.0.0"
+    rimraf "2.6.3"
+    write "1.0.3"
+
 flat-cache@^3.0.4:
  version "3.0.4"
  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.0.4.tgz#61b0338302b2fe9f957dcc32fc2a87f1c3048b11"
@ -5407,6 +5662,11 @@ flat-cache@^3.0.4:
    flatted "^3.1.0"
    rimraf "^3.0.2"

+flatted@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138"
+  integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==
+
 flatted@^3.1.0:
  version "3.1.1"
  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.1.1.tgz#c4b489e80096d9df1dfc97c79871aea7c617c469"
@ -6239,7 +6499,7 @@ ini@^1.3.5:
  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
  integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==

-inquirer@^7.1.0:
+inquirer@^7.0.0, inquirer@^7.1.0:
  version "7.3.3"
  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-7.3.3.tgz#04d176b2af04afc157a83fd7c100e98ee0aad003"
  integrity sha512-JG3eIAj5V9CwcGvuOmoo6LB9kbAYT8HXffUl6memuszlwDC/qvFAJw49XJ5NROSFNPxp3iQg1GqkFhaY/CR0IA==
@ -6583,7 +6843,7 @@ is-potential-custom-element-name@^1.0.0:
  resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz#171ed6f19e3ac554394edf78caa05784a45bebb5"
  integrity sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==

-is-regex@^1.0.4, is-regex@^1.1.2:
+is-regex@^1.0.4, is-regex@^1.1.2, is-regex@^1.1.3:
  version "1.1.3"
  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.3.tgz#d029f9aff6448b93ebbe3f33dac71511fdcbef9f"
  integrity sha512-qSVXFz28HM7y+IWX6vLCsexdlvzT1PJNFSBuaQLQ5o0IEw8UDYW6/2+eCMVyIsbM8CNLX2a/QWmSpyxYEHY7CQ==
@ -6616,7 +6876,7 @@ is-stream@^2.0.0:
  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.0.tgz#bde9c32680d6fae04129d6ac9d921ce7815f78e3"
  integrity sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==

-is-string@^1.0.5:
+is-string@^1.0.5, is-string@^1.0.6:
  version "1.0.6"
  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.6.tgz#3fe5d5992fb0d93404f32584d4b0179a71b54a5f"
  integrity sha512-2gdzbKUuqtQ3lYNrUTQYoClPhm7oQu4UdpSZMp1/DGgkHBT8E2Z1l0yMdb6D4zNAxwDiMv8MdulKROJGNl0Q0w==
@ -7388,6 +7648,14 @@ jss@10.6.0, jss@^10.5.1:
    is-in-browser "^1.1.3"
    tiny-warning "^1.0.2"

+jsx-ast-utils@^2.2.1, jsx-ast-utils@^2.2.3:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-2.4.1.tgz#1114a4c1209481db06c690c2b4f488cc665f657e"
+  integrity sha512-z1xSldJ6imESSzOjd3NNkieVJKRlKYSOtMG8SFyCj2FIrvSaSuli/WjpBkEzCBoR9bYYYFgqJw61Xhu7Lcgk+w==
+  dependencies:
+    array-includes "^3.1.1"
+    object.assign "^4.1.0"
+
 "jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.1.0:
  version "3.2.0"
  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.2.0.tgz#41108d2cec408c3453c1bbe8a4aae9e1e2bd8f82"
@ -7465,6 +7733,14 @@ leven@^3.1.0:
  resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
  integrity sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==

+levn@^0.3.0, levn@~0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
+  integrity sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=
+  dependencies:
+    prelude-ls "~1.1.2"
+    type-check "~0.3.2"
+
 levn@^0.4.1:
  version "0.4.1"
  resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
@ -7473,14 +7749,6 @@ levn@^0.4.1:
    prelude-ls "^1.2.1"
    type-check "~0.4.0"

-levn@~0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
-  integrity sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=
-  dependencies:
-    prelude-ls "~1.1.2"
-    type-check "~0.3.2"
-
 lines-and-columns@^1.1.6:
  version "1.1.6"
  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
@ -7587,6 +7855,11 @@ lodash.memoize@^4.1.2:
  resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
  integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=

+lodash.merge@^4.6.2:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
+  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
+
 lodash.template@^4.5.0:
  version "4.5.0"
  resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.5.0.tgz#f976195cf3f347d0d5f52483569fe8031ccce8ab"
@ -8309,7 +8582,7 @@ object-copy@^0.1.0:
    define-property "^0.2.5"
    kind-of "^3.0.3"

-object-inspect@^1.9.0:
+object-inspect@^1.10.3, object-inspect@^1.9.0:
  version "1.10.3"
  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.10.3.tgz#c2aa7d2d09f50c99375704f7a0adf24c5782d369"
  integrity sha512-e5mCJlSH7poANfC8z8S9s9S2IN5/4Zb3aZ33f5s8YqoazCFzNLloLU8r5VCG+G7WoqLvAAZoVMcy3tp/3X0Plw==
@ -8344,7 +8617,7 @@ object.assign@^4.1.0, object.assign@^4.1.2:
    has-symbols "^1.0.1"
    object-keys "^1.1.1"

-object.entries@^1.1.0, object.entries@^1.1.3:
+object.entries@^1.1.0, object.entries@^1.1.1, object.entries@^1.1.2, object.entries@^1.1.3:
  version "1.1.3"
  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.3.tgz#c601c7f168b62374541a07ddbd3e2d5e4f7711a6"
  integrity sha512-ym7h7OZebNS96hn5IJeyUmaWhaSM4SVtAPPfNLQEI2MYWCO2egsITb9nab2+i/Pwibx+R0mtn+ltKJXRSeTMGg==
@ -8354,7 +8627,7 @@ object.entries@^1.1.0, object.entries@^1.1.3:
    es-abstract "^1.18.0-next.1"
    has "^1.0.3"

-object.fromentries@^2.0.4:
+object.fromentries@^2.0.2, object.fromentries@^2.0.4:
  version "2.0.4"
  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.4.tgz#26e1ba5c4571c5c6f0890cef4473066456a120b8"
  integrity sha512-EsFBshs5RUUpQEY1D4q/m59kMfz4YJvxuNCJcv/jWwOJr34EaVnG11ZrZa0UHB3wnzV1wx8m58T4hQL8IuNXlQ==
@ -8380,7 +8653,7 @@ object.pick@^1.3.0:
  dependencies:
    isobject "^3.0.1"

-object.values@^1.1.0, object.values@^1.1.3:
+object.values@^1.1.0, object.values@^1.1.1, object.values@^1.1.3:
  version "1.1.3"
  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.3.tgz#eaa8b1e17589f02f698db093f7c62ee1699742ee"
  integrity sha512-nkF6PfDB9alkOUxpf1HNm/QlkeW3SReqL5WXeBLpEJJnlPSvRaDQpW3gQTksTN3fgJX4hL42RzKyOin6ff3tyw==
@ -8444,7 +8717,7 @@ optimize-css-assets-webpack-plugin@5.0.4:
    cssnano "^4.1.10"
    last-call-webpack-plugin "^3.0.0"

-optionator@^0.8.1:
+optionator@^0.8.1, optionator@^0.8.3:
  version "0.8.3"
  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.3.tgz#84fa1d036fe9d3c7e21d99884b601167ec8fb495"
  integrity sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==
@ -8822,7 +9095,7 @@ pkg-dir@^4.1.0, pkg-dir@^4.2.0:
  dependencies:
    find-up "^4.0.0"

-pkg-up@3.1.0:
+pkg-up@3.1.0, pkg-up@^3.1.0:
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/pkg-up/-/pkg-up-3.1.0.tgz#100ec235cc150e4fd42519412596a28512a0def5"
  integrity sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==
@ -9544,6 +9817,18 @@ prepend-http@^1.0.0:
  resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
  integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=

+prettier-linter-helpers@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b"
+  integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==
+  dependencies:
+    fast-diff "^1.1.2"
+
+prettier@^2.0.4, prettier@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.3.0.tgz#b6a5bf1284026ae640f17f7ff5658a7567fc0d18"
+  integrity sha512-kXtO4s0Lz/DW/IJ9QdWhAf7/NmPWQXkFr/r/WkR3vyI+0v8amTDxiaQSLzs8NBlytfLWX/7uQUMIW677yLKl4w==
+
 pretty-bytes@^5.3.0:
  version "5.6.0"
  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
@ -10219,6 +10504,11 @@ regexp.prototype.flags@^1.2.0, regexp.prototype.flags@^1.3.1:
    call-bind "^1.0.2"
    define-properties "^1.1.3"

+regexpp@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f"
+  integrity sha512-lv0M6+TkDVniA3aD1Eg0DVpfU/booSu7Eev3TDO/mZKHBfVjgCGTV4t4buppESEYDtkArYFOxTJWv6S5C+iaNw==
+
 regexpp@^3.0.0, regexpp@^3.1.0:
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.1.0.tgz#206d0ad0a5648cffbdb8ae46438f3dc51c9f78e2"
@ -10416,7 +10706,7 @@ resolve@1.18.1:
    is-core-module "^2.0.0"
    path-parse "^1.0.6"

-resolve@^1.10.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.14.2, resolve@^1.17.0, resolve@^1.18.1, resolve@^1.20.0, resolve@^1.3.2, resolve@^1.8.1:
+resolve@^1.10.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.14.2, resolve@^1.15.1, resolve@^1.17.0, resolve@^1.18.1, resolve@^1.20.0, resolve@^1.3.2, resolve@^1.8.1:
  version "1.20.0"
  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
  integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
@ -10478,6 +10768,13 @@ rgba-regex@^1.0.0:
  resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
  integrity sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=

+rimraf@2.6.3:
+  version "2.6.3"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab"
+  integrity sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==
+  dependencies:
+    glob "^7.1.3"
+
 rimraf@^2.5.4, rimraf@^2.6.3:
  version "2.7.1"
  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
@ -10894,6 +11191,15 @@ slash@^3.0.0:
  resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
  integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==

+slice-ansi@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-2.1.0.tgz#cacd7693461a637a5788d92a7dd4fba068e81636"
+  integrity sha512-Qu+VC3EwYLldKa1fCxuuvULvSJOKEgk9pi8dZeCVK7TqBfUNTH4sFkk4joj8afVSfAYgJoSOetjx9QWOJ5mYoQ==
+  dependencies:
+    ansi-styles "^3.2.0"
+    astral-regex "^1.0.0"
+    is-fullwidth-code-point "^2.0.0"
+
 slice-ansi@^4.0.0:
  version "4.0.0"
  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-4.0.0.tgz#500e8dd0fd55b05815086255b3195adf2a45fe6b"
@ -11247,6 +11553,20 @@ string-width@^4.1.0, string-width@^4.2.0:
    is-fullwidth-code-point "^3.0.0"
    strip-ansi "^6.0.0"

+string.prototype.matchall@^4.0.2:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.5.tgz#59370644e1db7e4c0c045277690cf7b01203c4da"
+  integrity sha512-Z5ZaXO0svs0M2xd/6By3qpeKpLKd9mO4v4q3oMEQrk8Ck4xOD5d5XeBOOjGrmVZZ/AHB1S0CgG4N5r1G9N3E2Q==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.18.2"
+    get-intrinsic "^1.1.1"
+    has-symbols "^1.0.2"
+    internal-slot "^1.0.3"
+    regexp.prototype.flags "^1.3.1"
+    side-channel "^1.0.4"
+
 string.prototype.matchall@^4.0.4:
  version "4.0.4"
  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.4.tgz#608f255e93e072107f5de066f81a2dfb78cf6b29"
@ -11376,7 +11696,7 @@ strip-indent@^3.0.0:
  dependencies:
    min-indent "^1.0.0"

-strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
+strip-json-comments@^3.0.1, strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
  version "3.1.1"
  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
  integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
@ -11482,7 +11802,17 @@ symbol-tree@^3.2.4:
  resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
  integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==

-table@^6.0.4:
+table@^5.2.3:
+  version "5.4.6"
+  resolved "https://registry.yarnpkg.com/table/-/table-5.4.6.tgz#1292d19500ce3f86053b05f0e8e7e4a3bb21079e"
+  integrity sha512-wmEc8m4fjnob4gt5riFRtTu/6+4rSe12TpAELNSqHMfF3IqnA+CH37USM6/YR3qRZv7e56kAEAtd6nKZaxe0Ug==
+  dependencies:
+    ajv "^6.10.2"
+    lodash "^4.17.14"
+    slice-ansi "^2.1.0"
+    string-width "^3.0.0"
+
+table@^6.0.4, table@^6.0.9:
  version "6.7.1"
  resolved "https://registry.yarnpkg.com/table/-/table-6.7.1.tgz#ee05592b7143831a8c94f3cee6aae4c1ccef33e2"
  integrity sha512-ZGum47Yi6KOOFDE8m223td53ath2enHcYLgOCjGr5ngu8bdIARQk6mN/wRMv4yMRcHnCSnHbCEha4sobQx5yWg==
@ -11863,7 +12193,7 @@ typedarray@^0.0.6:
  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
  integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=

-unbox-primitive@^1.0.0:
+unbox-primitive@^1.0.0, unbox-primitive@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.1.tgz#085e215625ec3162574dc8859abee78a59b14471"
  integrity sha512-tZU/3NqK3dA5gpE1KtyiJUrEB0lxnGkMFHptJ7q6ewdZ8s12QrODwNbhIJStmJkd1QDXa1NRA8aF2A1zk/Ypyw==
@ -12568,6 +12898,13 @@ write-file-atomic@^3.0.0:
    signal-exit "^3.0.2"
    typedarray-to-buffer "^3.1.5"

+write@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/write/-/write-1.0.3.tgz#0800e14523b923a387e415123c865616aae0f5c3"
+  integrity sha512-/lg70HAjtkUgWPVZhZcm+T4hkL8Zbtp1nFNOn3lRrxnlv50SRBv7cR7RqR+GMsd3hUXy9hWBo4CHTbFTcOYwig==
+  dependencies:
+    mkdirp "^0.5.1"
+
 ws@^6.2.1:
  version "6.2.1"
  resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.1.tgz#442fdf0a47ed64f59b6a5d8ff130f4748ed524fb"
@ -12590,6 +12927,13 @@ xmlchars@^2.2.0:
  resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
  integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==

+xregexp@^4.3.0:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/xregexp/-/xregexp-4.4.1.tgz#c84a88fa79e9ab18ca543959712094492185fe65"
+  integrity sha512-2u9HwfadaJaY9zHtRRnH6BY6CQVNQKkYm3oLtC9gJXXzfsbACg5X5e4EZZGVAH+YIfa+QA9lsFQTTe3HURF3ag==
+  dependencies:
+    "@babel/runtime-corejs3" "^7.12.1"
+
 xtend@^4.0.0, xtend@~4.0.1:
  version "4.0.2"
  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"