log in

log-in/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.12.3",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",

log-in/src/App.js

@@ -3,7 +3,8 @@ import { BrowserRouter as Router, Switch } from "react-router-dom";
 
 //components
 import Links from "./components/Links";
-import RoutPage from "./components/RoutPage";
+import MobileLoginPages from "./components/MobileLoginPages";
+import DesktopLogin from "./components/DesktopLogin";
 
 const App = () => {
   return (
@@ -11,7 +12,7 @@ const App = () => {
       <Router>
         <Links />
         <Switch>
-          <RoutPage />
+          {window.innerWidth > 945 ? <DesktopLogin /> : <MobileLoginPages />}
         </Switch>
       </Router>
     </>

log-in/src/assets/eye.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="26.529" height="26.529" viewBox="0 0 26.529 26.529">
+  <g id="eye" transform="translate(-108 -188)">
+    <g id="eye-2" data-name="eye" transform="translate(108 188)">
+      <path id="Vector" d="M7.914,3.957A3.957,3.957,0,1,1,3.957,0,3.953,3.953,0,0,1,7.914,3.957Z" transform="translate(9.307 9.307)" fill="none" stroke="#a2b4cb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      <path id="Vector-2" data-name="Vector" d="M10.816,18.294c3.9,0,7.539-2.3,10.07-6.278a5.887,5.887,0,0,0,0-5.737C18.354,2.3,14.718,0,10.816,0S3.277,2.3.746,6.278a5.887,5.887,0,0,0,0,5.737C3.277,15.995,6.914,18.294,10.816,18.294Z" transform="translate(2.448 4.112)" fill="none" stroke="#a2b4cb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      <path id="Vector-3" data-name="Vector" d="M0,0H26.529V26.529H0Z" transform="translate(26.529 26.529) rotate(180)" fill="none" opacity="0"/>
+    </g>
+  </g>
+</svg>

log-in/src/components/DesktopLogin.js

@@ -0,0 +1,100 @@
+import React from "react";
+import { Route } from "react-router-dom";
+import { Link } from "react-router-dom";
+import { ChevronLeft } from "react-iconly";
+// import logo from "../assets/logo.png";
+import google from "../assets/google.svg";
+import "./logIn/login/login.scss";
+import TextInputN from "./logIn/login/InputN";
+import TextInputP from "./logIn/login/InputP";
+import HeaderDes from "./HeaderDes/Header";
+import Footer from "./FooterDes/Footer";
+
+const DesktopLogin = () => {
+  return (
+    <>
+      <Route path="/login">
+        <HeaderDes />
+        <div className="container mainCon" style={{ width: "30%" }}>
+          <header
+            style={{
+              display: "flex",
+              justifyContent: "flex-end",
+              alignItems: "center",
+            }}
+          >
+            <Link to="/4" className="BackItems">
+              <p>بازگشت به صفحه قبل</p>
+              <ChevronLeft set="curved" />
+            </Link>
+          </header>
+          <nav className="mt-5 mb-5">
+            <h4 style={{ fontSize: "17px" }}>
+              سلام
+              <br />
+              خوش برگشتی !
+            </h4>
+          </nav>
+
+          <TextInputN />
+          <TextInputP />
+
+          <nav
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              marginTop: "1rem",
+              marginBottom: "1rem",
+            }}
+          >
+            <nav
+              style={{
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+              }}
+            >
+              <input
+                type="checkbox"
+                style={{
+                  width: "20px",
+                  height: "20px",
+                }}
+              />
+              <lable style={{ fontSize: "10px", marginRight: "8px" }}>
+                مرا به خاطر بسپار
+              </lable>
+            </nav>
+            <p style={{ fontSize: "10px", fontWeight: "bold", margin: 0 }}>
+              رمز خود را فراموش کرده اید ؟
+            </p>
+          </nav>
+
+          <button className="logInBtn">ورود</button>
+
+          <nav
+            style={{
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              color: "#E0E0E0",
+            }}
+          >
+            <span className="line"></span>
+            <p className="m-4">یا</p>
+            <span className="line"></span>
+          </nav>
+
+          <button className="logInBtnGoogle">
+            <img alt='google' src={google} style={{ width: "30px" }} />{" "}
+            <p style={{ flex: 1, margin: 0 }}>ورود با اکانت گوگل</p>
+          </button>
+        </div>
+
+        <Footer />
+      </Route>
+    </>
+  );
+};
+
+export default DesktopLogin;

log-in/src/components/FooterDes/Footer.js

@@ -0,0 +1,39 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+const Footer = () => {
+  return (
+    <>
+      <footer
+        style={{
+          borderTop: "#E0E0E0 solid 1px",
+          direction: "rtl",
+          position: "fixed",
+          width: "100%",
+          bottom: 0,
+          paddingTop: '8px',
+        }}
+      >
+        <nav className="row text-center">
+          <nav className="col-3"></nav>
+          <p className="col-6" style={{ fontSize: "13px", flex: 1, color: "#B5B5B5" }}>
+            تمامی حقوق مادی و معنوی متعلق به پلتفرم آزمون می باشد
+          </p>
+          <Link
+            className="col-3"
+            to={"/rule"}
+            style={{
+              fontSize: "13px",
+              color: "#B5B5B5",
+              textDecoration: "none",
+            }}
+          >
+            قوانین و شرایط استفاده
+          </Link>
+        </nav>
+      </footer>
+    </>
+  );
+};
+
+export default Footer;

log-in/src/components/HeaderDes/Header.js

@@ -0,0 +1,28 @@
+import React from "react";
+import logo from "../../assets/logo.png";
+import "./HeaderDes.scss";
+
+const Header = () => {
+  return (
+    <header className="HeaderNav">
+      <nav>
+        <img alt='logo' src={logo} width='60%' />
+      </nav>
+      <nav>
+        <ul className="ItemsNav">
+          <li className="item">صفحه اصلی</li>
+          <li className="item">امکانات</li>
+          <li className="item">فروشگاه</li>
+          <li className="item">درباره ما </li>
+          <li className="item">تماس با ما </li>
+        </ul>
+      </nav>
+      <nav className='LoginBtnNav'>
+        <p >تازه وارد هستید ؟</p>
+        <button className='btn'>ساخت حساب کاربری</button>
+      </nav>
+    </header>
+  );
+};
+
+export default Header;

log-in/src/components/HeaderDes/HeaderDes.scss

@@ -0,0 +1,41 @@
+.HeaderNav {
+  padding: 1rem;
+  direction: rtl;
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+
+  .ItemsNav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex: 1;
+
+    .item {
+      margin-right: 1rem;
+      list-style: none;
+      font-size: 13px;
+      color: #132F52;
+    }
+  }
+
+  .LoginBtnNav {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+
+    p{
+      color: #132F52;
+      font-size: 13px;
+    }
+
+    button{
+      margin-right: 8px;
+      border: #E0E0E0 solid 1px;
+      background-color: #F9F9F980;
+      color: #132F52;
+      font-size: 13px;
+      border-radius: 10px;
+    }
+  }
+}

log-in/src/components/MobileLoginPages.js

@@ -4,10 +4,10 @@ import Splash1 from "./logIn/Splashes/Splash1";
 import Splash2 from "./logIn/Splashes/Splash2";
 import Splash3 from "./logIn/Splashes/Splash3";
 import Splash4 from "./logIn/Splashes/Splash4";
-import LogIn from "./logIn/LogIn";
+import LogIn from "./logIn/login/LogIn";
 import Rule from "./logIn/Rule";
 
-const RoutPage = () => {
+const MobileLoginPages = () => {
   return (
     <>
       <Route path="/1">
@@ -32,4 +32,4 @@ const RoutPage = () => {
   );
 };
 
-export default RoutPage;
+export default MobileLoginPages;

log-in/src/components/logIn/Footer/Footer.js

@@ -1,51 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { ArrowRight } from "react-iconly";
-import { Link } from "react-router-dom";
-import "./Footer.scss";
-
-const Footer = () => {
-  const [active, setActive] = useState(1);
-  const [numCounter, setNumCounter] = useState(1);
-  localStorage.setItem("pathNum", numCounter);
-
-  const counterHandler = () => {
-    setNumCounter(numCounter + 1);
-  };
-  let I = localStorage.getItem("pathNum")
-
-  useEffect(() => {
-    if (window.location.href === "http://localhost:3001/1") {
-      setActive(1);
-    }
-    if (window.location.href === "http://localhost:3001/2") {
-      setActive(2);
-    }
-    if (window.location.href === "http://localhost:3001/3") {
-      setActive(3);
-    }
-    if (window.location.href === "http://localhost:3001/4") {
-      setActive(4);
-    }
-  });
-
-  return (
-    <footer className="navFooterItem container">
-      <nav className="navCircles">
-        <nav className={`circle ${active === 1 ? "active" : ""}`}></nav>
-        <nav className={`circle ${active === 2 ? "active" : ""}`}></nav>
-        <nav className={`circle ${active === 3 ? "active" : ""}`}></nav>
-        <nav className={`circle ${active === 4 ? "active" : ""}`}></nav>
-      </nav>
-      <nav onClick={counterHandler}>
-        <Link to={`/${I}`}>
-          <button className="btn nextBtn">
-            <ArrowRight set="curved" />
-          </button>
-        </Link>
-        {/* <button onClick={()=>setCount(count +1)}>counter</button> */}
-      </nav>
-    </footer>
-  );
-};
-
-export default Footer;

log-in/src/components/logIn/Header/Header.js

@@ -1,15 +1,15 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import "./Header.scss";
-import rectangle from '../../../assets/rectangle.svg'
+// import rectangle from '../../../assets/rectangle.svg'
 
 const Header = () => {
   return (
     <header className="fixedBlueNav">
       <nav className="navLink">
-        <a>
-          <Link to="/login">رد شدن</Link>
-        </a>
+        <p>
+          <Link to="/4">رد شدن</Link>
+        </p>
       </nav>
       {/* <img className='rectanlgleImg' src={rectangle}/> */}
       {/* <nav className="rectangleNavWhite">

log-in/src/components/logIn/Header/HeaderSplash4.js

@@ -1,7 +1,7 @@
 import React from "react";
-import { Link } from "react-router-dom";
+// import { Link } from "react-router-dom";
 import "./HeaderSplash4.scss";
-import rectangle from '../../../assets/rectangle.svg'
+// import rectangle from '../../../assets/rectangle.svg'
 
 const HeaderSplash4 = () => {
   return (

log-in/src/components/logIn/LogIn.js

@@ -1,11 +0,0 @@
-import React from 'react'
-
-const LogIn = () => {
-  return (
-    <>
-      log in
-    </>
-  )
-}
-
-export default LogIn

log-in/src/components/logIn/Rules/Panel1.js

@@ -1,83 +1,37 @@
 import React from "react";
+import "./panels.scss";
 
 const Panel1 = () => {
+  const rules = [
+    {
+      title: "نحوه استفاده از محصولات",
+      discription:
+        " ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان ک",
+    },
+    {
+      title: "نحوه استفاده از محصولات",
+      discription:
+        " ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان ک",
+    },
+    {
+      title: "نحوه استفاده از محصولات",
+      discription:
+        " ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان ک",
+    },
+    {
+      title: "نحوه استفاده از محصولات",
+      discription:
+        " ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان ک",
+    },
+  ];
   return (
-    <div className="mt-3">
-      <h4
-        style={{
-          backgroundColor: "#2E81E820",
-          with: "100%",
-          color: "#2E81E8",
-          borderRadius: "5px",
-          fontSize: "18px",
-          padding: "5px",
-        }}
-      >
-        نحوه استفاده از محصولات
-      </h4>
-      <p style={{ fontSize: "13px" }}>
-        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده
-        از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و
-        سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای
-        متنوع با هدف بهبود ابزارهای کاربردی می باشد
-      </p>
-
-      <h4
-        style={{
-          backgroundColor: "#2E81E820",
-          with: "100%",
-          color: "#2E81E8",
-          borderRadius: "5px",
-          fontSize: "18px",
-          padding: "5px",
-        }}
-      >
-        نحوه استفاده از محصولات
-      </h4>
-      <p style={{ fontSize: "13px" }}>
-        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده
-        از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و
-        سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای
-        متنوع با هدف بهبود ابزارهای کاربردی می باشد
-      </p>
-
-      <h4
-        style={{
-          backgroundColor: "#2E81E820",
-          with: "100%",
-          color: "#2E81E8",
-          borderRadius: "5px",
-          fontSize: "18px",
-          padding: "5px",
-        }}
-      >
-        نحوه استفاده از محصولات
-      </h4>
-      <p style={{ fontSize: "13px" }}>
-        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده
-        از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و
-        سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای
-        متنوع با هدف بهبود ابزارهای کاربردی می باشد
-      </p>
-
-      <h4
-        style={{
-          backgroundColor: "#2E81E820",
-          with: "100%",
-          color: "#2E81E8",
-          borderRadius: "5px",
-          fontSize: "18px",
-          padding: "5px",
-        }}
-      >
-        نحوه استفاده از محصولات
-      </h4>
-      <p style={{ fontSize: "13px" }}>
-        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده
-        از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و
-        سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای
-        متنوع با هدف بهبود ابزارهای کاربردی می باشد
-      </p>
+    <div className="mt-3 scrollNav">
+      {rules.map((item) => (
+        <>
+          <h4 className="title">{item.title}</h4>
+          <p style={{ fontSize: "13px" }}>{item.discription}</p>
+        </>
+      ))}
     </div>
   );
 };

log-in/src/components/logIn/Rules/Panel2.js

@@ -1,105 +1,54 @@
 import React from "react";
+import "./panels.scss";
 
-const Panel1 = () => {
+const Panel2 = () => {
+  const rules = [
+    {
+      title: "نحوه استفاده از محصولات",
+      discription:
+        " ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان ک",
+    },
+    {
+      title: "نحوه استفاده از محصولات",
+      discription:
+        " ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان ک",
+    },
+    {
+      title: "نحوه استفاده از محصولات",
+      discription:
+        " ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان ک",
+    },
+    {
+      title: "نحوه استفاده از محصولات",
+      discription:
+        " ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان ک",
+    },
+    {
+      title: "نحوه استفاده از محصولات",
+      discription:
+        " ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان ک",
+    },
+    {
+      title: "نحوه استفاده از محصولات",
+      discription:
+        " ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان ک",
+    },
+    {
+      title: "نحوه استفاده از محصولات",
+      discription:
+        " ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان ک",
+    },
+  ];
   return (
-    <div className='mt-3'>
-      <h4
-        style={{
-          backgroundColor: "#2E81E820",
-          with: "100%",
-          color: "#2E81E8",
-          borderRadius: "5px",
-          padding: '5px',
-          fontSize: '18px',
-
-        }}
-      >
-        نحوه استفاده از محصولات
-      </h4>
-      <p style={{fontSize:'13px'}}>
-        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده
-        از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و
-        سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای
-        متنوع با هدف بهبود ابزارهای کاربردی می باشد
-      </p>
-
-      <h4
-        style={{
-          backgroundColor: "#2E81E820",
-          with: "100%",
-          color: "#2E81E8",
-          borderRadius: "5px",
-          fontSize: "18px",
-          padding: "5px",
-        }}
-      >
-        نحوه استفاده از محصولات
-      </h4>
-      <p style={{ fontSize: "13px" }}>
-        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده
-        از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و
-        سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای
-        متنوع با هدف بهبود ابزارهای کاربردی می باشد
-      </p>
-
-      <h4
-        style={{
-          backgroundColor: "#2E81E820",
-          with: "100%",
-          color: "#2E81E8",
-          borderRadius: "5px",
-          fontSize: "18px",
-          padding: "5px",
-        }}
-      >
-        نحوه استفاده از محصولات
-      </h4>
-      <p style={{ fontSize: "13px" }}>
-        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده
-        از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و
-        سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای
-        متنوع با هدف بهبود ابزارهای کاربردی می باشد
-      </p>
-
-      <h4
-        style={{
-          backgroundColor: "#2E81E820",
-          with: "100%",
-          color: "#2E81E8",
-          borderRadius: "5px",
-          fontSize: "18px",
-          padding: "5px",
-        }}
-      >
-        نحوه استفاده از محصولات
-      </h4>
-      <p style={{ fontSize: "13px" }}>
-        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده
-        از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و
-        سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای
-        متنوع با هدف بهبود ابزارهای کاربردی می باشد
-      </p>
-
-      <h4
-        style={{
-          backgroundColor: "#2E81E820",
-          with: "100%",
-          color: "#2E81E8",
-          borderRadius: "5px",
-          fontSize: "18px",
-          padding: "5px",
-        }}
-      >
-        نحوه استفاده از محصولات
-      </h4>
-      <p style={{ fontSize: "13px" }}>
-        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده
-        از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و
-        سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای
-        متنوع با هدف بهبود ابزارهای کاربردی می باشد
-      </p>
+    <div className="mt-3 scrollNav">
+      {rules.map((item) => (
+        <>
+          <h4 className="title">{item.title}</h4>
+          <p style={{ fontSize: "13px" }}>{item.discription}</p>
+        </>
+      ))}
     </div>
   );
 };
 
-export default Panel1;
+export default Panel2;

log-in/src/components/logIn/Rules/panels.scss

@@ -0,0 +1,25 @@
+.title {
+  background-color: #2e81e820;
+  width: 100%;
+  color: #2e81e8;
+  border-radius: 5px;
+  font-size: 16px;
+  padding: 5px;
+}
+
+.scrollNav {
+  overflow-y: scroll;
+  height: 75vh;
+}
+
+.scrollNav::-webkit-scrollbar {
+  width: 5px;
+}
+.scrollNav::-webkit-scrollbar-track {
+  border-radius: 10px;
+}
+.scrollNav::-webkit-scrollbar-thumb {
+  background-color: #2e81e8;
+  border-radius: 5px;
+  height: 5px;
+}

log-in/src/components/logIn/Splashes/Splash1.js

@@ -1,6 +1,8 @@
 import React from "react";
 import Header from "../Header/Header";
-import Footer from "../Footer/Footer";
+import { ArrowRight } from "react-iconly";
+import { Link } from "react-router-dom";
+import "./Footer.scss";
 import "./Splashes.scss";
 
 const Splash1 = () => {
@@ -18,11 +20,21 @@ const Splash1 = () => {
           لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
           استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در
           ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و
-          کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد،
-          1
+          کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، 1
         </p>
       </nav>
-      <Footer />
+      <footer className="navFooterItem container">
+        <nav className="navCircles">
+          <nav className={`circle active`}></nav>
+          <nav className={`circle`}></nav>
+          <nav className={`circle`}></nav>
+        </nav>
+          <Link to={`/2`}>
+            <button className="btn nextBtn">
+              <ArrowRight set="curved" />
+            </button>
+          </Link>
+      </footer>
     </>
   );
 };

log-in/src/components/logIn/Splashes/Splash2.js

@@ -1,6 +1,8 @@
 import React from "react";
 import Header from "../Header/Header";
-import Footer from "../Footer/Footer";
+import { ArrowRight } from "react-iconly";
+import { Link } from "react-router-dom";
+import "./Footer.scss";
 
 const Splash2 = () => {
   return (
@@ -17,11 +19,21 @@ const Splash2 = () => {
           لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
           استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در
           ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و
-          کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد،
-          2
+          کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، 2
         </p>
       </nav>
-      <Footer />
+      <footer className="navFooterItem container">
+        <nav className="navCircles">
+          <nav className={`circle `}></nav>
+          <nav className={`circle active`}></nav>
+          <nav className={`circle`}></nav>
+        </nav>
+        <Link to={`/3`}>
+          <button className="btn nextBtn">
+            <ArrowRight set="curved" />
+          </button>
+        </Link>
+      </footer>
     </>
   );
 };

log-in/src/components/logIn/Splashes/Splash3.js

@@ -1,6 +1,8 @@
-import React from 'react'
+import React from "react";
 import Header from "../Header/Header";
-import Footer from "../Footer/Footer";
+import { ArrowRight } from "react-iconly";
+import { Link } from "react-router-dom";
+import "./Footer.scss";
 
 const Splash3 = () => {
   return (
@@ -17,13 +19,23 @@ const Splash3 = () => {
           لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
           استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در
           ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و
-          کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد،
-          3
+          کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، 3
         </p>
       </nav>
-      <Footer /> 
+      <footer className="navFooterItem container">
+        <nav className="navCircles">
+          <nav className={`circle `}></nav>
+          <nav className={`circle`}></nav>
+          <nav className={`circle active`}></nav>
+        </nav>
+        <Link to={`/4`}>
+          <button className="btn nextBtn">
+            <ArrowRight set="curved" />
+          </button>
+        </Link>
+      </footer>
     </>
-  )
-}
+  );
+};
 
-export default Splash3
+export default Splash3;

log-in/src/components/logIn/Splashes/Splash4.js

@@ -20,20 +20,20 @@ const splash4 = () => {
           <button className="logInBtn">ورود</button>
         </Link>
         <button className="signInBtn">ثبت نام</button>
-        <footer style={{ position: "fixed", bottom: "25px" }}>
+        <footer className="col" style={{ position: "fixed", bottom: "25px", width: "100%" }}>
           <p
             style={{
               fontSize: "13px",
-              margin: "auto",
               textAlign: "center",
-              width: "64%",
             }}
           >
+            <nav className="text-center">
               ثبت نام شما در سامانه به منزله
               <Link to="/rule" className="link">
                 <span> قبول شرایط و قوانین </span>
               </Link>
               استفاده می‌باشد
+            </nav>
           </p>
         </footer>
       </nav>

log-in/src/components/logIn/Splashes/Splashes.scss

@@ -30,3 +30,19 @@
   text-decoration: none;
   color: #000;
 }
+
+
+.logInBtnGoogle{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  background-color: #E8FCFF ;
+  border-radius: 8px;
+  border: none;
+  outline: none;
+  color: #000;
+  padding: 0.75rem 1rem ;
+  margin-bottom: 8px;
+  font-weight: 100;
+}

log-in/src/components/logIn/login/InputN.js

@@ -0,0 +1,25 @@
+import "./input.css";
+import { useState, useRef } from "react";
+
+const TextInput = ({ name, label, required, inner_type }) => {
+  const [lc, setLc] = useState("");
+  const inputRef = useRef();
+  const a = () => {
+    setLc("label-with-focus");
+  };
+  const b = () => {
+    if (inputRef.current.value.length === 0) {
+      setLc("");
+    }
+  };
+  return (
+    <>
+      <div className="text-input">
+        <label className={lc}>{"نام کاربری"}</label>
+        <input ref={inputRef} type={"text"} onFocus={a} onBlur={b} />
+      </div>
+    </>
+  );
+};
+
+export default TextInput;

log-in/src/components/logIn/login/InputP.js

@@ -0,0 +1,25 @@
+import "./input.css";
+import { useState, useRef } from "react";
+
+const TextInput = () => {
+  const [lc, setLc] = useState("");
+  const inputRef = useRef();
+  const a = () => {
+    setLc("label-with-focus");
+  };
+  const b = () => {
+    if (inputRef.current.value.length === 0) {
+      setLc("");
+    }
+  };
+  return (
+    <>
+      <div className="text-input">
+        <label className={lc}>{"رمز عبور"}</label>
+        <input ref={inputRef} type={"password"} onFocus={a} onBlur={b} />
+      </div>
+    </>
+  );
+};
+
+export default TextInput;

log-in/src/components/logIn/login/LogIn.js

@@ -0,0 +1,94 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { ChevronLeft } from "react-iconly";
+import logo from "../../../assets/logo.png";
+import google from "../../../assets/google.svg";
+import "./login.scss";
+import TextInputN from "./InputN";
+import TextInputP from "./InputP";
+
+const LogIn = () => {
+  return (
+    <>
+      <div className="container mainCon ">
+        <header
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+          }}
+        >
+          <img alt='logo' src={logo}/>
+          <Link to="/4">
+            <nav className="navBack">
+              <ChevronLeft set="curved" />
+            </nav>
+          </Link>
+        </header>
+        <nav className="mt-5 mb-5">
+          <h4 style={{ fontSize: "17px" }}>
+            سلام
+            <br />
+            خوش برگشتی !
+          </h4>
+        </nav>
+
+        <TextInputN />
+        <TextInputP />
+
+        <nav
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            marginTop: "1rem",
+            marginBottom: "1rem",
+          }}
+        >
+          <nav
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+            }}
+          >
+            <input
+              type="checkbox"
+              style={{
+                width: "20px",
+                height: "20px",
+              }}
+            />
+            <lable style={{ fontSize: "10px", marginRight: "8px" }}>
+              مرا به خاطر بسپار
+            </lable>
+          </nav>
+          <p style={{ fontSize: "10px", fontWeight: "bold" , margin: 0, }}>
+            رمز خود را فراموش کرده اید ؟
+          </p>
+        </nav>
+
+        <button className="logInBtn">ورود</button>
+
+        <nav
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            color: '#E0E0E0',
+          }}
+        >
+          <span className="line"></span>
+          <p className="m-4">یا</p>
+          <span className="line"></span>
+        </nav>
+
+        <button className="logInBtnGoogle">
+          <img alt='google' src={google} style={{ width: "30px" }} />{" "}
+          <p style={{ flex: 1, margin: 0 }}>ورود با اکانت گوگل</p>
+        </button>
+      </div>
+    </>
+  );
+};
+
+export default LogIn;

log-in/src/components/logIn/login/input.css

@@ -0,0 +1,35 @@
+.text-input {
+  width: 100%;
+  height: 8vh;
+  font-size: 15px;
+  margin-top: 15px;
+  position: relative;
+}
+.text-input input {
+  background-color: #f9f9f980;
+  font-size: 20px;
+  height: 100%;
+  border-radius: 10px;
+  width: 100%;
+  outline: none;
+  border: 1px solid #555;
+  padding: 1rem;
+}
+.text-input label {
+  position: absolute;
+  right: 20px;
+  top: 7px;
+  transition: all 0.2s;
+}
+
+.text-input input:focus {
+  border: 2px solid #2e81e8;
+}
+
+.label-with-focus {
+  /* display: none; */
+  font-size: 15px;
+  transform: translate(8px, -18px);
+  background-color: white;
+  padding: 0 5px;
+}

log-in/src/components/logIn/login/login.scss

@@ -0,0 +1,12 @@
+.line{
+  width: 120px;
+  height: 1px;
+  background-color: #E0E0E0;
+}
+
+.BackItems{
+  display: flex;
+  justify-content: space-between;
+  text-decoration: none;
+  font-size: 14px;
+}

log-in/yarn.lock

@@ -1157,7 +1157,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.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.8", "@babel/runtime@^7.14.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@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.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.8", "@babel/runtime@^7.14.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@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.15.4"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a"
   integrity sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==
@@ -1219,6 +1219,11 @@
   resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18"
   integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==
 
+"@emotion/hash@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
+  integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
+
 "@eslint/eslintrc@^0.4.3":
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c"
@@ -1491,6 +1496,70 @@
     "@types/yargs" "^16.0.0"
     chalk "^4.0.0"
 
+"@material-ui/core@^4.12.3":
+  version "4.12.3"
+  resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.12.3.tgz#80d665caf0f1f034e52355c5450c0e38b099d3ca"
+  integrity sha512-sdpgI/PL56QVsEJldwEe4FFaFTLUqN+rd7sSZiRCdx2E/C7z5yK0y/khAWVBH24tXwto7I1hCzNWfJGZIYJKnw==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@material-ui/styles" "^4.11.4"
+    "@material-ui/system" "^4.12.1"
+    "@material-ui/types" "5.1.0"
+    "@material-ui/utils" "^4.11.2"
+    "@types/react-transition-group" "^4.2.0"
+    clsx "^1.0.4"
+    hoist-non-react-statics "^3.3.2"
+    popper.js "1.16.1-lts"
+    prop-types "^15.7.2"
+    react-is "^16.8.0 || ^17.0.0"
+    react-transition-group "^4.4.0"
+
+"@material-ui/styles@^4.11.4":
+  version "4.11.4"
+  resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.4.tgz#eb9dfccfcc2d208243d986457dff025497afa00d"
+  integrity sha512-KNTIZcnj/zprG5LW0Sao7zw+yG3O35pviHzejMdcSGCdWbiO8qzRgOYL8JAxAsWBKOKYwVZxXtHWaB5T2Kvxew==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@emotion/hash" "^0.8.0"
+    "@material-ui/types" "5.1.0"
+    "@material-ui/utils" "^4.11.2"
+    clsx "^1.0.4"
+    csstype "^2.5.2"
+    hoist-non-react-statics "^3.3.2"
+    jss "^10.5.1"
+    jss-plugin-camel-case "^10.5.1"
+    jss-plugin-default-unit "^10.5.1"
+    jss-plugin-global "^10.5.1"
+    jss-plugin-nested "^10.5.1"
+    jss-plugin-props-sort "^10.5.1"
+    jss-plugin-rule-value-function "^10.5.1"
+    jss-plugin-vendor-prefixer "^10.5.1"
+    prop-types "^15.7.2"
+
+"@material-ui/system@^4.12.1":
+  version "4.12.1"
+  resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.12.1.tgz#2dd96c243f8c0a331b2bb6d46efd7771a399707c"
+  integrity sha512-lUdzs4q9kEXZGhbN7BptyiS1rLNHe6kG9o8Y307HCvF4sQxbCgpL2qi+gUk+yI8a2DNk48gISEQxoxpgph0xIw==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@material-ui/utils" "^4.11.2"
+    csstype "^2.5.2"
+    prop-types "^15.7.2"
+
+"@material-ui/types@5.1.0":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-5.1.0.tgz#efa1c7a0b0eaa4c7c87ac0390445f0f88b0d88f2"
+  integrity sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==
+
+"@material-ui/utils@^4.11.2":
+  version "4.11.2"
+  resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.11.2.tgz#f1aefa7e7dff2ebcb97d31de51aecab1bb57540a"
+  integrity sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    prop-types "^15.7.2"
+    react-is "^16.8.0 || ^17.0.0"
+
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -1912,7 +1981,7 @@
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.5.tgz#75a2a8e7d8ab4b230414505d92335d1dcb53a6df"
   integrity sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ==
 
-"@types/react-transition-group@^4.4.1":
+"@types/react-transition-group@^4.2.0", "@types/react-transition-group@^4.4.1":
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.2.tgz#38890fd9db68bf1f2252b99a942998dc7877c5b3"
   integrity sha512-KibDWL6nshuOJ0fu8ll7QnV/LVTo3PzQ9aCPnRUYPfX7eZohHwLIdNHj7pftanREzHNP4/nJa8oeM73uSiavMQ==
@@ -3518,6 +3587,11 @@ cliui@^6.0.0:
     strip-ansi "^6.0.0"
     wrap-ansi "^6.2.0"
 
+clsx@^1.0.4:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
+  integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -3993,6 +4067,14 @@ css-tree@^1.1.2:
     mdn-data "2.0.14"
     source-map "^0.6.1"
 
+css-vendor@^2.0.8:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-2.0.8.tgz#e47f91d3bd3117d49180a3c935e62e3d9f7f449d"
+  integrity sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==
+  dependencies:
+    "@babel/runtime" "^7.8.3"
+    is-in-browser "^1.0.2"
+
 css-what@^3.2.1:
   version "3.4.2"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.4.2.tgz#ea7026fcb01777edbde52124e21f327e7ae950e4"
@@ -4134,6 +4216,11 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
+csstype@^2.5.2:
+  version "2.6.17"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.17.tgz#4cf30eb87e1d1a005d8b6510f95292413f6a1c0e"
+  integrity sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A==
+
 csstype@^3.0.2:
   version "3.0.8"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.8.tgz#d2266a792729fb227cd216fb572f43728e1ad340"
@@ -5873,7 +5960,7 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.1.0:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -6062,6 +6149,11 @@ human-signals@^1.1.1:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
   integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
 
+hyphenate-style-name@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d"
+  integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==
+
 iconv-lite@0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@@ -6467,6 +6559,11 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
+is-in-browser@^1.0.2, is-in-browser@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/is-in-browser/-/is-in-browser-1.1.3.tgz#56ff4db683a078c6082eb95dad7dc62e1d04f835"
+  integrity sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU=
+
 is-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
@@ -7285,6 +7382,76 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.10.0"
 
+jss-plugin-camel-case@^10.5.1:
+  version "10.7.1"
+  resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.7.1.tgz#e7f7097cf97e9deec599cef3275e213452318b93"
+  integrity sha512-+ioIyWvmAfgDCWXsQcW1NMnLBvRinOVFkSYJUgewQ6TynOcSj5F1bSU23B7z0p1iqK0PPHIU62xY1iNJD33WGA==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    hyphenate-style-name "^1.0.3"
+    jss "10.7.1"
+
+jss-plugin-default-unit@^10.5.1:
+  version "10.7.1"
+  resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.7.1.tgz#826270e2ee38d7024a281ac67c30d6944f124786"
+  integrity sha512-tW+dfYVNARBQb/ONzBwd8uyImigyzMiAEDai+AbH5rcHg5h3TtqhAkxx06iuZiT/dZUiFdSKlbe3q9jZGAPIwA==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.7.1"
+
+jss-plugin-global@^10.5.1:
+  version "10.7.1"
+  resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.7.1.tgz#9725c46d662aac2e596a0a8741944c060e2b90a1"
+  integrity sha512-FbxCnu44IkK/bw8X3CwZKmcAnJqjAb9LujlAc/aP0bMSdVa3/MugKQRyeQSu00uGL44feJJDoeXXiHOakBr/Zw==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.7.1"
+
+jss-plugin-nested@^10.5.1:
+  version "10.7.1"
+  resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.7.1.tgz#35563a7a710a45307fd6b9742ffada1d72a62eb7"
+  integrity sha512-RNbICk7FlYKaJyv9tkMl7s6FFfeLA3ubNIFKvPqaWtADK0KUaPsPXVYBkAu4x1ItgsWx67xvReMrkcKA0jSXfA==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.7.1"
+    tiny-warning "^1.0.2"
+
+jss-plugin-props-sort@^10.5.1:
+  version "10.7.1"
+  resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.7.1.tgz#1d12b26048541ed3a2ed1b69f7fc231605728362"
+  integrity sha512-eyd5FhA+J0QrpqXxO7YNF/HMSXXl4pB0EmUdY4vSJI4QG22F59vQ6AHtP6fSwhmBdQ98Qd9gjfO+RMxcE39P1A==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.7.1"
+
+jss-plugin-rule-value-function@^10.5.1:
+  version "10.7.1"
+  resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.7.1.tgz#123eb796eb9982f8efa7a7e362daddd90c0c69fe"
+  integrity sha512-fGAAImlbaHD3fXAHI3ooX6aRESOl5iBt3LjpVjxs9II5u9tzam7pqFUmgTcrip9VpRqYHn8J3gA7kCtm8xKwHg==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.7.1"
+    tiny-warning "^1.0.2"
+
+jss-plugin-vendor-prefixer@^10.5.1:
+  version "10.7.1"
+  resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.7.1.tgz#217821be2d6dacee31d2d464886760ba7742e19a"
+  integrity sha512-1UHFmBn7hZNsHXTkLLOL8abRl8vi+D1EVzWD4WmLFj55vawHZfnH1oEz6TUf5Y61XHv0smdHabdXds6BgOXe3A==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    css-vendor "^2.0.8"
+    jss "10.7.1"
+
+jss@10.7.1, jss@^10.5.1:
+  version "10.7.1"
+  resolved "https://registry.yarnpkg.com/jss/-/jss-10.7.1.tgz#16d846e1a22fb42e857b99f9c6a0c5a27341c804"
+  integrity sha512-5QN8JSVZR6cxpZNeGfzIjqPEP+ZJwJJfZbXmeABNdxiExyO+eJJDy6WDtqTf8SDKnbL5kZllEpAP71E/Lt7PXg==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    csstype "^3.0.2"
+    is-in-browser "^1.1.3"
+    tiny-warning "^1.0.2"
+
 "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"
@@ -8742,6 +8909,11 @@ pnp-webpack-plugin@1.6.4:
   dependencies:
     ts-pnp "^1.1.6"
 
+popper.js@1.16.1-lts:
+  version "1.16.1-lts"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1-lts.tgz#cf6847b807da3799d80ee3d6d2f90df8a3f50b05"
+  integrity sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==
+
 popper.js@^1.14.4:
   version "1.16.1"
   resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
@@ -9776,7 +9948,7 @@ react-is@^16.3.2, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-is@^17.0.1:
+"react-is@^16.8.0 || ^17.0.0", react-is@^17.0.1:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
@@ -9923,7 +10095,7 @@ react-transition-group@^2.3.1:
     prop-types "^15.6.2"
     react-lifecycles-compat "^3.0.4"
 
-react-transition-group@^4.4.1:
+react-transition-group@^4.4.0, react-transition-group@^4.4.1:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
   integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==
@@ -11463,7 +11635,7 @@ tiny-invariant@^1.0.2:
   resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
   integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==
 
-tiny-warning@^1.0.0, tiny-warning@^1.0.3:
+tiny-warning@^1.0.0, tiny-warning@^1.0.2, tiny-warning@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
   integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==