Wyszukiwanie wydarzeń

highneed_react/src/App.js

@@ -5,26 +5,30 @@ import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 import NavBar from './components/NavBar';
 import Home from './Pages/Home';
 import Login from './Pages/Login';
+import Register from './Pages/Register';
+import ResetPWD from './Pages/ResetPWD';
 import SearchEvent from './Pages/SearchEvent';
 import Calendar from './Pages/Calendar';
 import FBfanpage from './Pages/FBfanpage';
 
 
 function App() {
-  return (
-    <>
-    <Router>
-      <NavBar />
-      <Switch>
-      <Route path='/' exact component={Home} />
-      <Route path='/login' exact component={Login} />
-      <Route path='/search-events' exact component={SearchEvent} />
-      <Route path='/calendar' exact component={Calendar} />
-      <Route path='/fanpage' exact component={FBfanpage} />
-      </Switch>
-    </Router>
-    </>
-  );
+    return (
+        <>
+            <Router>
+                <NavBar />
+                <Switch>
+                    <Route path='/' exact component={Home} />
+                    <Route path='/login' exact component={Login} />
+                    <Route path='/register' exact component={Register} />
+                    <Route path='/reset' exact component={ResetPWD} />
+                    <Route path='/search-events' exact component={SearchEvent} />
+                    <Route path='/calendar' exact component={Calendar} />
+                    <Route path='/fanpage' exact component={FBfanpage} />
+                </Switch>
+            </Router>
+        </>
+    );
 }
 
 export default App;

highneed_react/src/Pages/Calendar.js

@@ -1,11 +1,17 @@
 import React from 'react';
-import '../App.css';
+import './WIP.css'
 
 function Calendar() {
     return (
-        <>
-            Calendar
-        </>
+        <div className='wip'>
+            <div className='wip-content'>
+                <div class='line'></div>
+
+                <h3> Strona w budowie </h3>
+
+                <div class='line'></div>
+            </div>
+        </div>
     );
 }
 

highneed_react/src/Pages/FBfanpage.js

@@ -1,11 +1,17 @@
 import React from 'react';
-import '../App.css';
+import './WIP.css'
 
 function FBfanpage() {
     return (
-        <>
-            FB fanpage
-        </>
+        <div className='wip'>
+            <div className='wip-content'>
+                <div class='line'></div>
+
+                <h3> Strona w budowie </h3>
+
+                <div class='line'></div>
+            </div>
+        </div>
     );
 }
 

highneed_react/src/Pages/Home.css

@@ -50,6 +50,7 @@
     padding-left: 1%;
     padding-right: 1%;
     display: flex;
+    align-items:center;
     flex-direction: column;
 }
 
@@ -97,11 +98,10 @@ p {
 }
 
 .searching {
-    padding-top: 10%;
+    margin-top: 10%;
 }
 
 .search-components {
-    width: 205px;
     display: flex;
     align-items: center;
     justify-content: space-between;

highneed_react/src/Pages/Home.js

@@ -84,8 +84,9 @@ function Home() {
                         <h1>Wyszukiwanie wydarzeń w Twojej okolicy</h1>
                         <p>Znajdź grupy i wydarzenia na terenie Poznania, dzięki którym Twoje dziecko rozwinie swoje zainteresowania oraz zawrze nowe znajomości. </p>
 
-                        <Link className='center searching' to={'/search-events'}>
-                            <button className='button'>
+                      
+                        <button className='button searching'>
+                            <Link to={'/search-events'}>
                                 <div className='search-components'>
                                     <div className='search button-icon'>
                                         <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -96,8 +97,9 @@ function Home() {
                                         Wyszukaj wydarzenia
                                 </div>
                                 </div>
+                                </Link>
                             </button>
-                        </Link>
+                        
                     </div>
 
                     <div className='article-img2'>

highneed_react/src/Pages/Login.css

@@ -1,5 +1,6 @@
-.signup {
-    padding-top:5%;
+.login {
+    padding-top: 5%;
+    padding-bottom: 5%;
 }
 
 .login-container {
@@ -14,40 +15,41 @@ h3 {
     display:flex;
     justify-content:center;
     padding: 5%;
-    font-size: 40px;
+    font-size: 35px;
     color: #347945;
 }
 
-.login{
+p2{
+    margin: 5% 0%;
+    text-align:center;
 }
 
 form {
-    width: 100%;
+   width:75%;
 }
 
 .input-container{
-    padding: 5% 5%
+    padding: 0% 5%;
+    display:flex;
+    flex-direction:column;
 }
 
 
 input {
-    border-color: #347945;
+    border-color: #64BE7B;
     border-radius: 5px;
-
-    height:20px;
-    width: 100%;
-
-    padding:1% 0%;
-    margin:2% 0%;
+    height: 20px;
+    padding: 1% 0%;
+    margin: 4% 0%;
 }
 
-.login-bottom {
-    padding: 5% 5%;
 
+.login-bottom {
+    padding: 5% 0%;
     display: flex;
     flex-direction: row;
     align-items: center;
-    justify-content: center;
+    justify-content: space-evenly;
 }
 
 .text-button{
@@ -55,4 +57,35 @@ input {
     display:flex;
     flex-direction:column;
     justify-content:center;
+}
+
+.register
+{
+    min-width:165px;
+}
+
+.reset {
+    min-width: 165px;
+}
+
+
+@media screen and (max-width: 416px) {
+    form{
+        width:90%;
+    }
+
+    .register {
+        min-width: 120px;
+    }
+
+    .reset {
+        min-width: 120px;
+    }
+}
+
+@media screen and (min-width: 801px) {
+
+    form{
+        width:60%;
+    }
 }

highneed_react/src/Pages/Login.js

@@ -1,39 +1,47 @@
-import React from 'react'
+import React from 'react';
+import { Link } from 'react-router-dom';
 import './Login.css'
 
 function Login() {
     return (
-        <div className='signup' >
+        <div className='login' >
 
             <div className='login-container'>
                 <div class='line'></div>
+
                 <form>
+
                     <h3>Logowanie</h3>
                     <div className='input-container'>
                         <p>E-mail:</p>
                         <input type='tekst' />
-                   
-                        <p>Hasło:</p>
+
+                        <p>Hasło:</p>
                         <input type='tekst' />
 
-                        <button className='button login'>
-                                Zaloguj sie
-                         </button>
+                            <button className='button sign-in' Link to={'/'}>
+                            Zaloguj się
+                            </button>
                     </div>
 
                     <div className='login-bottom'>
                         <div className='text-button'>
-                            <p>Pierwszy raz na stronie?</p>
+                            <p2>Pierwszy raz na stronie?</p2>
 
+                            <Link to='/register'>
                             <button className='button register'>
-                                Zarejestruj się
+                                Zarejestruj się   
                              </button>
+                            </Link>
                         </div>
+
                         <div className='text-button'>
-                            <p>Nie pamiętasz hasła?</p>
+                            <p2>Nie pamiętasz hasła?</p2>
+                            <Link to='/reset'>
                             <button className='button reset'>
-                                Zresetuj hasło
+                                    Zresetuj hasło    
                             </button>
+                            </Link> 
                         </div>
                     </div>
 
@@ -41,6 +49,6 @@ function Login() {
                 <div class='line'></div>
             </div>
         </div>
-    );
+    )
 }
-export default Login;
+export default Login

highneed_react/src/Pages/Register.css

@@ -0,0 +1,110 @@
+.register {
+    padding-top: 5%;
+    padding-bottom: 5%;
+}
+
+.register-container {
+    background-color: #F0FAF3;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.register2-container {
+    background-color: #F0FAF3;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.register-top{
+    padding:5%;
+    display:flex;
+    flex-direction:row;
+    justify-content:space-between;
+    align-items:center;
+}
+
+.register-bottom {
+    padding: 5% 0%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-evenly;
+}
+
+.address
+{
+    display:flex;
+    flex-direction:row;
+}
+
+.address-input {
+    width:100%;
+}
+
+h4{
+    font-size: 35px;
+    color: #347945;
+}
+
+p2 {
+    margin: 5% 0%;
+    text-align: center;
+}
+
+.form-1 {
+    padding-bottom:5%;
+    width: 75%;
+}
+
+.form-2 {
+    width: 75%;
+}
+
+.undo {
+    min-width: 165px;
+}
+
+.sign-up {
+    min-width: 165px;
+}
+
+
+@media screen and (max-width: 416px) {
+    .form-1 {
+        width: 90%;
+    }
+    .form-2 {
+        width: 90%;
+    }
+
+    .undo {
+        min-width: 120px;
+    }
+
+    .sign-up {
+        min-width: 120px;
+    }
+}
+
+@media screen and (min-width: 801px) {
+
+    .form-1 {
+        width: 60%;
+    }
+    .form-2 {
+        width: 60%;
+    }
+
+    .undo {
+        min-width: 175px;
+    }
+
+    .sign-up {
+        min-width: 175px;
+    }
+
+}

highneed_react/src/Pages/Register.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import './Register.css'
+
+function Register() {
+    return (
+        <div className='register' >
+
+            <div className='register-container'>
+                <div class='line'></div>
+
+                <form className='form-1'>
+                    <div className='register-top'>
+                        <h4>Rejestracja</h4>
+                        <svg width="80" height="35" viewBox="0 0 80 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <circle cx="17.5" cy="17.5" r="16.5" fill="#64BE7B" stroke="#347945" stroke-width="2" />
+                            <path d="M18.3617 11.4C18.6617 11.4 18.9137 11.508 19.1177 11.724C19.3217 11.928 19.4237 12.186 19.4237 12.498V22.902C19.4237 23.214 19.3097 23.478 19.0817 23.694C18.8537 23.898 18.5717 24 18.2357 24C17.8997 24 17.6237 23.898 17.4077 23.694C17.1917 23.478 17.0837 23.214 17.0837 22.902V14.37L15.9677 15.054C15.7877 15.162 15.5957 15.216 15.3917 15.216C15.0917 15.216 14.8337 15.102 14.6177 14.874C14.4137 14.646 14.3117 14.394 14.3117 14.118C14.3117 13.926 14.3597 13.746 14.4557 13.578C14.5637 13.41 14.7017 13.278 14.8697 13.182L17.5877 11.562C17.7917 11.454 18.0497 11.4 18.3617 11.4Z" fill="#347945" />
+                            <circle cx="62.5" cy="17.5" r="16.5" fill="#D7FBDF" stroke="#347945" stroke-width="2" />
+                            <path d="M65.7748 22.02C66.0628 22.02 66.3028 22.116 66.4948 22.308C66.6868 22.5 66.7828 22.74 66.7828 23.028C66.7828 23.304 66.6868 23.538 66.4948 23.73C66.3028 23.91 66.0628 24 65.7748 24H59.6548C59.3428 24 59.0968 23.904 58.9168 23.712C58.7368 23.52 58.6468 23.274 58.6468 22.974C58.6468 22.674 58.7548 22.41 58.9708 22.182L62.8948 17.988C63.3388 17.508 63.6868 17.028 63.9388 16.548C64.2028 16.056 64.3348 15.606 64.3348 15.198C64.3348 14.658 64.1428 14.19 63.7588 13.794C63.3748 13.398 62.9308 13.2 62.4268 13.2C62.0788 13.2 61.7248 13.32 61.3648 13.56C61.0168 13.788 60.6988 14.094 60.4108 14.478C60.1948 14.766 59.9188 14.91 59.5828 14.91C59.3188 14.91 59.0728 14.808 58.8448 14.604C58.6288 14.4 58.5208 14.172 58.5208 13.92C58.5208 13.74 58.5808 13.56 58.7008 13.38C58.8208 13.188 59.0008 12.972 59.2408 12.732C59.6968 12.276 60.2248 11.91 60.8248 11.634C61.4248 11.358 62.0008 11.22 62.5528 11.22C63.3448 11.22 64.0408 11.388 64.6408 11.724C65.2408 12.06 65.7028 12.522 66.0268 13.11C66.3508 13.698 66.5128 14.364 66.5128 15.108C66.5128 15.84 66.3148 16.596 65.9188 17.376C65.5348 18.144 65.0128 18.882 64.3528 19.59L62.0668 22.02H65.7748Z" fill="#347945" />
+                        </svg>
+                    </div>
+
+                    <div className='input-container'>
+                        <p>E-mail:</p>
+                        <input type='tekst' />
+                        <p>Hasło:</p>
+                        <input type='tekst' />
+                        <p>Powtórz hasło:</p>
+                        <input type='tekst' />
+
+                        <button className='button'>
+                               Dalej
+                        </button>
+
+                        </div>
+                    </form>
+                    <div class='line'></div>
+                </div>
+
+            <div className='register2-container'>
+                <div class='line'></div>
+                <form className='form-2'>
+                    <div className='register-top'>
+                        <h4>Rejestracja</h4>
+                        <svg width="80" height="35" viewBox="0 0 80 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <circle cx="17.5" cy="17.5" r="16.5" fill="#D7FBDF" stroke="#347945" stroke-width="2" />
+                            <path d="M18.3617 11.4C18.6617 11.4 18.9137 11.508 19.1177 11.724C19.3217 11.928 19.4237 12.186 19.4237 12.498V22.902C19.4237 23.214 19.3097 23.478 19.0817 23.694C18.8537 23.898 18.5717 24 18.2357 24C17.8997 24 17.6237 23.898 17.4077 23.694C17.1917 23.478 17.0837 23.214 17.0837 22.902V14.37L15.9677 15.054C15.7877 15.162 15.5957 15.216 15.3917 15.216C15.0917 15.216 14.8337 15.102 14.6177 14.874C14.4137 14.646 14.3117 14.394 14.3117 14.118C14.3117 13.926 14.3597 13.746 14.4557 13.578C14.5637 13.41 14.7017 13.278 14.8697 13.182L17.5877 11.562C17.7917 11.454 18.0497 11.4 18.3617 11.4Z" fill="#347945" />
+                            <circle cx="62.5" cy="17.5" r="16.5" fill="#64BE7B" stroke="#347945" stroke-width="2" />
+                            <path d="M65.7748 22.02C66.0628 22.02 66.3028 22.116 66.4948 22.308C66.6868 22.5 66.7828 22.74 66.7828 23.028C66.7828 23.304 66.6868 23.538 66.4948 23.73C66.3028 23.91 66.0628 24 65.7748 24H59.6548C59.3428 24 59.0968 23.904 58.9168 23.712C58.7368 23.52 58.6468 23.274 58.6468 22.974C58.6468 22.674 58.7548 22.41 58.9708 22.182L62.8948 17.988C63.3388 17.508 63.6868 17.028 63.9388 16.548C64.2028 16.056 64.3348 15.606 64.3348 15.198C64.3348 14.658 64.1428 14.19 63.7588 13.794C63.3748 13.398 62.9308 13.2 62.4268 13.2C62.0788 13.2 61.7248 13.32 61.3648 13.56C61.0168 13.788 60.6988 14.094 60.4108 14.478C60.1948 14.766 59.9188 14.91 59.5828 14.91C59.3188 14.91 59.0728 14.808 58.8448 14.604C58.6288 14.4 58.5208 14.172 58.5208 13.92C58.5208 13.74 58.5808 13.56 58.7008 13.38C58.8208 13.188 59.0008 12.972 59.2408 12.732C59.6968 12.276 60.2248 11.91 60.8248 11.634C61.4248 11.358 62.0008 11.22 62.5528 11.22C63.3448 11.22 64.0408 11.388 64.6408 11.724C65.2408 12.06 65.7028 12.522 66.0268 13.11C66.3508 13.698 66.5128 14.364 66.5128 15.108C66.5128 15.84 66.3148 16.596 65.9188 17.376C65.5348 18.144 65.0128 18.882 64.3528 19.59L62.0668 22.02H65.7748Z" fill="#347945" />
+                        </svg>
+                    </div>
+                    <div className='input-container'>
+                        <p>Imię:</p>
+                        <input type='tekst' />
+
+                        <p>Nazwisko:</p>
+                        <input type='tekst' />
+
+                        <p>Adres:</p>
+                        <input type='tekst' />
+
+                        <p>Kod pocztowy:</p>
+                        <div className='address'>
+                            <input className='address-input' type='tekst'/>
+                            <input className='address-input' type='tekst' />
+                        </div>
+                    </div>
+
+                    <div className='register-bottom'>
+                        <div className='text-button'>
+                            <Link to='/register'>
+                                <button className='button undo'>
+                                    Cofnij
+                             </button>
+                            </Link>
+                        </div>
+
+                        <div className='text-button'>
+                            <Link to='/login'>
+                                <button className='button sign-up'>
+                                    Zarejestruj się
+                            </button>
+                            </Link>
+                        </div>
+                    </div> 
+                    </form>
+                <div class='line'></div>
+             </div>
+               
+            </div>
+    )
+}
+export default Register

highneed_react/src/Pages/ResetPWD.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import './Register.css'
+
+function ResetPWD() {
+    return (
+        <div className='register' >
+
+            <div className='register-container'>
+                <div class='line'></div>
+                <form className='form-1'>
+
+                    <h3>Resetowanie hasła</h3>
+                    <div className='input-container'>
+                        <p>Podaj adres e-mail:</p>
+                        <input type='tekst' />
+
+                        <button className='button reset'>
+                            <Link className='center' to={'/'}>
+                                <div className='search-text'>
+                                    Zresetuj hasło
+                                </div>
+                            </Link>
+                         </button>
+                    </div>
+                </form>
+
+                <div class='line'></div>
+            </div>
+        </div>
+    )
+}
+export default ResetPWD

highneed_react/src/Pages/WIP.css

@@ -0,0 +1,8 @@
+.wip {
+    padding-top: 5%;
+    padding-bottom: 5%;
+}
+
+.wip-content {
+    background-color: #F0FAF3;
+}

highneed_react/src/components/Events.css

@@ -1,50 +1,144 @@
-.events
-{
-  width: 100%;
+.events {
+    width: 100%;
 }
 
-  .events__container 
-  {
+.filter {
+    background-color: #64BE7B;
+    height: 50px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0% 1%;
+}
+
+.filter-icon {
+    padding-right: 2%;
+}
+
+.calendar-line {
+    background-color: white;
+    height: 50px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0% 1%;
+    justify-content: space-between;
+}
+
+.filter-checkboxes {
+    background-color: #F0FAF3;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0% 2%;
+    justify-content: space-evenly;
+    flex-wrap: wrap;
+}
+
+.toggle-text{
+    padding-left:10px;
+    padding-right:10px;
+    padding-bottom:10px;
+    display:flex;
+    align-items:center;
+    flex-direction:column;
+}
+
+p3{
+    font-weight:bold;
+    margin: 10px 1%;
+}
+
+
+.menu-icon-01 {
+    width: 24px;
+    height: 24px;
+}
+
+.menu-icon-02 {
+    position: relative;
+    width: 30px;
+    height: 30px;
+}
+
+.icon-01, .icon-02 {
+    position: absolute;
+}
+
+.menu-icon-02 .icon-02 {
+    visibility: hidden;
+}
+
+.menu-icon-01 .icon-01 {
+    visibility: hidden;
+}
+
+
+.filterbar {
+    background-color: white;
+    padding: 0% 5%;
+}
+
+.filterbar.disable {
+    display: none;
+}
+
+.filter-categories {
+    display: flex;
+    flex-direction: row;
+    flex-wrap:wrap;
+    justify-content:space-between;
+}
+
+.category-checkbox {
+    width:50%;
+    margin: 2% 0%;
+    display: flex;
+    flex-direction: column;
+}
+
+.checkbox-text {
+    display: flex;
+    flex-direction: row;
+    align-items:center;
+}
+
+
+.events__container {
     width: 85%;
     margin: 0 auto;
-  }
-
-
-.events__items
-{
-    display: block;
-    
 }
 
-.events__item__img 
-{
+
+.events__items {
+    display: block;
+}
+
+.events__item__img {
     max-width: 100%;
     height: auto;
 }
 
 
-.events__item__info
-{
+.events__item__info {
     padding: 20px 30px 30px;
     width: 80%;
     text-align: left;
-  }
-
-.events__item__img__link
-{
-
 }
 
-a
-{
-  color: black;
+.events__item__img__link {
+}
+
+a {
+    color: white;
 }
 
 .button {
-    background-color: #64BE7B; /* Green */
+    background-color: #64BE7B;
     border: none;
     color: white;
-    padding: 8px 16px;
+    padding: 6px 16px;
     text-align: center;
     display: inline-block;
     font-size: 16px;
@@ -52,103 +146,47 @@ a
     cursor: pointer;
 }
 
-.button:hover {background-color: #347945}
+    .button:hover {
+        background-color: #347945
+    }
 
-/*.events {
-    background: #fff;
-  }
-  
-  .events__container {
-    display: flex;
-    flex-flow: column;
-    align-items: center;
-    max-width: 2120px;
-    width: 100%;
-    margin: 0 auto;
-  }
-  
-  .events__wrapper {
-    width: 100%;
-    position: relative;
-    margin: 50px 0 45px;
-  }
-  
-  .events__items {
-    margin-bottom: 24px;
-  }
-  
-  .events__item {
-    display: flex;
-    flex: 1;
-    margin: 0 1rem;
-    border-radius: 10px;
-  }
-  
-  .events__item__link {
-    display: flex;
-    width: 100%;
-    box-shadow: 0 6px 20px rgba(56, 125, 255, 0.17);
-    -webkit-filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017));
-    filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017));
-    border-radius: 10px;
-    overflow: hidden;
-    text-decoration: none;
-  }
-  
-  .events__item__pic-wrap {
-    position: relative;
-    width: 50%;
-    padding-top: 27%;       wysokość karty  
-    overflow: hidden;
-  }
-  
-  .fade-img {
-    animation-name: fade-img;
-    animation-duration: 2s;
-  }
-  
-  .events__item__pic-wrap::after {
-    content: attr(data-category);
-    position: absolute;
-    bottom: 0;
-    margin-left: 10px;
-    padding: 6px 8px;
-    max-width: calc((100%) - 60px);
-    font-size: 12px;
-    font-weight: 700;
-    color: #fff;
-    background-color: #1f98f4;
-    box-sizing: border-box;
-  }
-  
-  .events__item__img {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    display: block;
-    width: 90%;
-    max-width: 100%;
-    height: 100%;
-    max-height: 100%;
-    object-fit: cover;
-    transition: all 0.2s linear;
-  }
-  
-  .events__item__img:hover {
-    transform: scale(1.1);
-  }
-  
-  .events__item__info {
-    padding: 20px 30px 30px;
-    width: 50%;
-  }
-  
-  .events__item__text {
-    color: #252e48;
-    font-size: 18px;
-    line-height: 24px;
-  }
-  
-  */
+
+.g {
+    color: #347945;
+}
+
+.bl {
+    color: dodgerblue;
+}
+
+.r {
+    color: red;
+}
+
+.p {
+    color: hotpink;
+}
+
+.bl {
+    color: dodgerblue;
+}
+
+.y {
+    color: #F6BB43;
+}
+
+.v {
+    color: #967BDC;
+}
+
+
+@media screen and (max-width: 800px) {
+    .filter-categories{
+        flex-direction:column;
+        align-content:center;
+    }
+
+    .category-checkbox{
+        align-items:center;
+    }
+}

highneed_react/src/components/Events.js

@@ -1,34 +1,216 @@
-import React from 'react';
+import React, { useState } from 'react';
 import './Events.css';
+import './ToggleSwitch.css'
 import EventItem from './EventItem';
 
 function Events() {
-  return (
-    <div className='events'>
-      <div className='events__container'>
-          <ul className='events__items'>
-            <EventItem
-              src='images/img-1.jpg'
-              data='29.07.2020 Piątek, 18:00 - 20:00'
-              title='Współne zabawy na placu zabaw'
-              category='Zabawa'
-              age = '5-7 lat'
-              address = 'Hetmańska 48, Poznań'
-              path='/'
-            />
-            <EventItem
-              src='images/img-2.jpg'
-              data='29.07.2020 Piątek, 18:00 - 20:00'
-              title='Współne zabawy na placu zabaw'
-              category='Zabawa'
-              age = '5-7 lat'
-              address = 'Hetmańska 48, Poznań'
-              path='/'
-            />
-          </ul>
-      </div>
-    </div>
-  );
+    const [click, setClick] = useState(false);
+    const handleClick = () => setClick(!click);
+    const closeMobileMenu = () => setClick(false);
+
+
+    return (
+        <div className='events'>
+
+            <div className='calendar-line'>
+                <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M19.6201 5.99006C19.1301 5.50006 18.3401 5.50006 17.8501 5.99006L9.54006 14.3001C9.15006 14.6901 9.15006 15.3201 9.54006 15.7101L17.8501 24.0201C18.3401 24.5101 19.1301 24.5101 19.6201 24.0201C20.1101 23.5301 20.1101 22.7401 19.6201 22.2501L12.3801 15.0001L19.6301 7.75006C20.1101 7.27006 20.1101 6.47006 19.6201 5.99006Z" fill="black" fill-opacity="0.8" />
+                </svg>
+
+                <p>Pon. 14.06</p>
+                <p>Wt. 15.06</p>
+                <p>Śr. 16.06</p>
+                <p>Czw. 17.06</p>
+                <p>Pt. 18.06</p>
+                <p>Sob. 19.06</p>
+                <p>Ndz. 20.06</p>
+
+                <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M10.3799 5.99006C10.8699 5.50006 11.6599 5.50006 12.1499 5.99006L20.4599 14.3001C20.8499 14.6901 20.8499 15.3201 20.4599 15.7101L12.1499 24.0201C11.6599 24.5101 10.8699 24.5101 10.3799 24.0201C9.88994 23.5301 9.88994 22.7401 10.3799 22.2501L17.6199 15.0001L10.3699 7.75006C9.88994 7.27006 9.88994 6.47006 10.3799 5.99006Z" fill="black" fill-opacity="0.8" />
+                </svg>
+
+            </div>
+            <div className='line'></div>
+
+            <div className='filter-checkboxes'>
+
+                <div className='toggle-text'>
+                    <p3>Lokalizacja</p3>
+                    <label className="switch">
+                        <input type="checkbox" />
+                        <span class="slider g round"></span>
+                    </label>
+                </div>
+                <div className='toggle-text'>
+                    <p3>Wiek</p3>
+                    <label className="switch">
+                        <input type="checkbox" />
+                        <span class="slider round bl"></span>
+                    </label>
+                </div>
+                <div className='toggle-text'>
+                    <p3>Kategoria</p3>
+                    <label className="switch">
+                        <input type="checkbox" />
+                        <span class="slider round r"></span>
+                    </label>
+                </div>
+                <div className='toggle-text'>
+                    <p3>Rodzaj</p3>
+                    <label className="switch">
+                        <input type="checkbox" />
+                        <span class="slider round p"></span>
+                    </label>
+                </div>
+                <div className='toggle-text'>
+                    <p3>Ocena</p3>
+                    <label className="switch">
+                        <input type="checkbox" />
+                        <span class="slider round y"></span>
+                    </label>
+                </div>
+                <div className='toggle-text'>
+                    <p3>Cena</p3>
+                    <label className="switch">
+                        <input type="checkbox" />
+                        <span class="slider round v"></span>
+                    </label>
+                </div>
+            </div>
+            <div className='line'></div>
+
+            <nav className='filter-nav'>
+                <div className='filter'>
+                    
+                    <div className='filter-icon ' onClick={handleClick}>
+                        <div className={click ? 'menu-icon-01' : 'menu-icon-02'}>
+
+                        <svg className='icon-01' width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M3.11456 7.6875C2.60415 8.19792 2.60415 9.02083 3.11456 9.53125L11.7708 18.1875C12.1771 18.5937 12.8333 18.5937 13.2396 18.1875L21.8958 9.53125C22.4062 9.02083 22.4062 8.19792 21.8958 7.6875C21.3854 7.17708 20.5625 7.17708 20.0521 7.6875L12.5 15.2292L4.9479 7.67708C4.4479 7.17708 3.61456 7.17708 3.11456 7.6875Z" fill="#323232" />
+                        </svg>
+                        <svg className='icon-02' width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M21.8854 17.3125C22.3958 16.8021 22.3958 15.9792 21.8854 15.4688L13.2291 6.8125C12.8229 6.40625 12.1666 6.40625 11.7604 6.8125L3.10413 15.4687C2.59371 15.9792 2.59371 16.8021 3.10413 17.3125C3.61454 17.8229 4.43746 17.8229 4.94788 17.3125L12.5 9.77083L20.052 17.3229C20.552 17.8229 21.3854 17.8229 21.8854 17.3125Z" fill="black" />
+                            </svg>
+
+                        </div>
+                    </div>
+
+                    <h2>Filtruj</h2>
+                </div>
+                <div className='line'></div>
+            </nav>
+
+            <nav className={click ? 'filterbar' : 'filterbar disable'}>
+                <div className='filter-categories'>
+                    
+                    <div className='category-checkbox g'>
+                        <h2>Lokalizacja</h2>
+                        <div className='checkbox-text'>
+                            <input type='checkbox' />
+                            <p3>Nowe miasto</p3>
+                        </div>
+                        <div className='checkbox-text'>
+                            <input type='checkbox' />
+                            <p3>Stare miasto</p3>
+                        </div>
+                        <div className='checkbox-text'>
+                            <input type='checkbox' />
+                            <p3>Jeżyce</p3>
+                        </div>
+                        <div className='checkbox-text'>
+                            <input type='checkbox' />
+                            <p3>Grunwald</p3>
+                        </div>
+                    </div>
+                    <div className='category-checkbox bl'>
+                        <h2>Wiek</h2>
+                        <div className='checkbox-text'>
+                            <input type='text' />
+                            <p3>-</p3>
+                            <input type='text' />
+                        </div>
+                    </div>
+                    <div className='category-checkbox r'>
+                        <h2>Kategorie</h2>
+                        <div className='checkbox-text'>
+                            <input type='checkbox' />
+                            <p3>Sport</p3>
+                        </div>
+                        <div className='checkbox-text'>
+                            <input type='checkbox' />
+                            <p3>Zabawa</p3>
+                        </div>
+                        <div className='checkbox-text'>
+                            <input type='checkbox' />
+                            <p3>Edukacja</p3>
+                        </div>
+                        <div className='checkbox-text'>
+                            <input type='checkbox' />
+                            <p3>Muzyka</p3>
+                        </div>
+                    </div>
+                    <div className='category-checkbox v'>
+                        <h2>Cena</h2>
+                        <div className='checkbox-text'>
+                            <input type='text' />
+                            <p3>-</p3>
+                            <input type='text' />
+                        </div>
+                    </div>
+                    <div className='category-checkbox p'>
+                        <h2>Rodzaj</h2>
+                        <div className='checkbox-text'>
+                            <input type='checkbox' />
+                            <p3>Online</p3>
+                        </div>
+                        <div className='checkbox-text'>
+                            <input type='checkbox' />
+                            <p3>Na miejscu</p3>
+                        </div>
+                        <div className='checkbox-text'>
+                            <input type='checkbox' />
+                            <p3>Jednodniowe</p3>
+                        </div>
+                        <div className='checkbox-text'>
+                            <input type='checkbox' />
+                            <p3>Kilkudniowe</p3>
+                        </div>
+                    </div>
+
+                    <div className='category-checkbox y'>
+                        <h2>Ocena</h2>
+                        <div className='checkbox-text'>
+                            <input type='text' />
+                        </div>
+                    </div>
+                </div>     
+            </nav>
+
+            <div className='events__container'>
+                <ul className='events__items'>
+                    <EventItem
+                        src='images/img-1.jpg'
+                        data='29.07.2020 Piątek, 18:00 - 20:00'
+                        title='Wspólne zabawy na placu zabaw'
+                        category='Zabawa'
+                        age='5-7 lat'
+                        address='Hetmańska 48, Poznań'
+                        path='/'
+                    />
+                    <EventItem
+                        src='images/img-2.jpg'
+                        data='29.07.2020 Piątek, 18:00 - 20:00'
+                        title='Wspólne zabawy na placu zabaw'
+                        category='Zabawa'
+                        age='5-7 lat'
+                        address='Hetmańska 48, Poznań'
+                        path='/'
+                    />
+                </ul>
+            </div>
+
+        </div>
+    );
 }
 
 export default Events;

highneed_react/src/components/NavBar.css

@@ -2,7 +2,7 @@
 }
 
 .navbar-container {
-    padding: 1% 1%;
+    padding: 15px 1%;
     background-color: #64BE7B;
     display: flex;
     align-items: center;

highneed_react/src/components/NavBar.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import './NavBar.css';
 
@@ -14,6 +14,7 @@ function NavBar() {
 
                     <div className='menu icon-container' onClick={handleClick}>
                         <div className={click ? 'menu-icon-list' : 'menu-icon-cross'}>
+
                             <svg className='icon-list' width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                 <line x1="4.28577" y1="7.92859" x2="25.7143" y2="7.92859" stroke="white" stroke-width="3" />
                                 <line x1="4.28577" y1="21.6428" x2="25.7143" y2="21.6428" stroke="white" stroke-width="3" />

highneed_react/src/components/ToggleSwitch.css

@@ -0,0 +1,74 @@
+.switch {
+    position: relative;
+    display: inline-block;
+    min-width: 70px;
+    height: 25px;
+}
+
+.switch input {
+    opacity: 0;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #BDBDBD;
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+
+.slider:before {
+        position: absolute;
+        content: "";
+        height: 30px;
+        width: 30px;
+        top: -3px;
+        background-color: #5F6368;
+        -webkit-transition: .4s;
+        transition: .4s;
+}
+
+input:checked + .slider {
+    background-color: #2196F3;
+}
+
+input:checked + .slider:before {
+    -webkit-transform: translateX(40px);
+    -ms-transform: translateX(50px);
+    transform: translateX(50px);
+}
+
+.slider.round {
+    border-radius: 34px;
+}
+
+.slider.round:before {
+   border-radius: 50%;
+}
+
+
+input:checked + .slider.g {
+    background-color: #64BE7B;
+}
+input:checked + .slider.bl {
+    background-color: dodgerblue;
+}
+input:checked + .slider.r {
+    background-color: red;
+}
+input:checked + .slider.p {
+    background-color: hotpink;
+}
+input:checked + .slider.bl {
+    background-color: dodgerblue;
+}
+input:checked + .slider.y {
+    background-color: #F6BB43;
+}
+input:checked + .slider.v {
+    background-color: #967BDC;
+}

package-lock.json

@@ -1,328 +0,0 @@
-{
-  "requires": true,
-  "lockfileVersion": 1,
-  "dependencies": {
-    "@babel/runtime": {
-      "version": "7.14.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.0.tgz",
-      "integrity": "sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==",
-      "requires": {
-        "regenerator-runtime": "^0.13.4"
-      }
-    },
-    "@popperjs/core": {
-      "version": "2.9.2",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz",
-      "integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q=="
-    },
-    "@restart/context": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
-      "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q=="
-    },
-    "@restart/hooks": {
-      "version": "0.3.26",
-      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.26.tgz",
-      "integrity": "sha512-7Hwk2ZMYm+JLWcb7R9qIXk1OoUg1Z+saKWqZXlrvFwT3w6UArVNWgxYOzf+PJoK9zZejp8okPAKTctthhXLt5g==",
-      "requires": {
-        "lodash": "^4.17.20",
-        "lodash-es": "^4.17.20"
-      }
-    },
-    "@types/invariant": {
-      "version": "2.2.34",
-      "resolved": "https://registry.npmjs.org/@types/invariant/-/invariant-2.2.34.tgz",
-      "integrity": "sha512-lYUtmJ9BqUN688fGY1U1HZoWT1/Jrmgigx2loq4ZcJpICECm/Om3V314BxdzypO0u5PORKGMM6x0OXaljV1YFg=="
-    },
-    "@types/prop-types": {
-      "version": "15.7.3",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
-      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw=="
-    },
-    "@types/react": {
-      "version": "17.0.11",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.11.tgz",
-      "integrity": "sha512-yFRQbD+whVonItSk7ZzP/L+gPTJVBkL/7shLEF+i9GC/1cV3JmUxEQz6+9ylhUpWSDuqo1N9qEvqS6vTj4USUA==",
-      "requires": {
-        "@types/prop-types": "*",
-        "@types/scheduler": "*",
-        "csstype": "^3.0.2"
-      }
-    },
-    "@types/react-transition-group": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.1.tgz",
-      "integrity": "sha512-vIo69qKKcYoJ8wKCJjwSgCTM+z3chw3g18dkrDfVX665tMH7tmbDxEAnPdey4gTlwZz5QuHGzd+hul0OVZDqqQ==",
-      "requires": {
-        "@types/react": "*"
-      }
-    },
-    "@types/scheduler": {
-      "version": "0.16.1",
-      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.1.tgz",
-      "integrity": "sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA=="
-    },
-    "@types/warning": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
-      "integrity": "sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI="
-    },
-    "bootstrap": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
-      "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw=="
-    },
-    "classnames": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
-      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
-    },
-    "csstype": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
-      "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw=="
-    },
-    "dom-helpers": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
-      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
-      "requires": {
-        "@babel/runtime": "^7.8.7",
-        "csstype": "^3.0.2"
-      }
-    },
-    "history": {
-      "version": "4.10.1",
-      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
-      "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
-      "requires": {
-        "@babel/runtime": "^7.1.2",
-        "loose-envify": "^1.2.0",
-        "resolve-pathname": "^3.0.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0",
-        "value-equal": "^1.0.1"
-      }
-    },
-    "hoist-non-react-statics": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
-      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
-      "requires": {
-        "react-is": "^16.7.0"
-      }
-    },
-    "invariant": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
-      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
-      "requires": {
-        "loose-envify": "^1.0.0"
-      }
-    },
-    "isarray": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-      "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
-    },
-    "js-tokens": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
-    },
-    "lodash": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
-    },
-    "lodash-es": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
-      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
-    },
-    "loose-envify": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
-      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "requires": {
-        "js-tokens": "^3.0.0 || ^4.0.0"
-      }
-    },
-    "mini-create-react-context": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
-      "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
-      "requires": {
-        "@babel/runtime": "^7.12.1",
-        "tiny-warning": "^1.0.3"
-      }
-    },
-    "object-assign": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
-    },
-    "path-to-regexp": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
-      "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
-      "requires": {
-        "isarray": "0.0.1"
-      }
-    },
-    "prop-types": {
-      "version": "15.7.2",
-      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
-      "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
-      "requires": {
-        "loose-envify": "^1.4.0",
-        "object-assign": "^4.1.1",
-        "react-is": "^16.8.1"
-      }
-    },
-    "prop-types-extra": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
-      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
-      "requires": {
-        "react-is": "^16.3.2",
-        "warning": "^4.0.0"
-      }
-    },
-    "react-bootstrap": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.6.1.tgz",
-      "integrity": "sha512-ojEPQ6OtyIMdLg0Smofk+85PKN6MLKQX3bU0Vwmok/4yNa8DQ2vCGhO2IgHJvT+ERQZ4X+gAQcdn6msAHSwLBg==",
-      "requires": {
-        "@babel/runtime": "^7.14.0",
-        "@restart/context": "^2.1.4",
-        "@restart/hooks": "^0.3.26",
-        "@types/invariant": "^2.2.33",
-        "@types/prop-types": "^15.7.3",
-        "@types/react": ">=16.14.8",
-        "@types/react-transition-group": "^4.4.1",
-        "@types/warning": "^3.0.0",
-        "classnames": "^2.3.1",
-        "dom-helpers": "^5.2.1",
-        "invariant": "^2.2.4",
-        "prop-types": "^15.7.2",
-        "prop-types-extra": "^1.1.0",
-        "react-overlays": "^5.0.1",
-        "react-transition-group": "^4.4.1",
-        "uncontrollable": "^7.2.1",
-        "warning": "^4.0.3"
-      }
-    },
-    "react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-    },
-    "react-lifecycles-compat": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
-      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
-    },
-    "react-overlays": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-5.0.1.tgz",
-      "integrity": "sha512-plwUJieTBbLSrgvQ4OkkbTD/deXgxiJdNuKzo6n1RWE3OVnQIU5hffCGS/nvIuu6LpXFs2majbzaXY8rcUVdWA==",
-      "requires": {
-        "@babel/runtime": "^7.13.8",
-        "@popperjs/core": "^2.8.6",
-        "@restart/hooks": "^0.3.26",
-        "@types/warning": "^3.0.0",
-        "dom-helpers": "^5.2.0",
-        "prop-types": "^15.7.2",
-        "uncontrollable": "^7.2.1",
-        "warning": "^4.0.3"
-      }
-    },
-    "react-router": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
-      "integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==",
-      "requires": {
-        "@babel/runtime": "^7.1.2",
-        "history": "^4.9.0",
-        "hoist-non-react-statics": "^3.1.0",
-        "loose-envify": "^1.3.1",
-        "mini-create-react-context": "^0.4.0",
-        "path-to-regexp": "^1.7.0",
-        "prop-types": "^15.6.2",
-        "react-is": "^16.6.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0"
-      }
-    },
-    "react-router-dom": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz",
-      "integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==",
-      "requires": {
-        "@babel/runtime": "^7.1.2",
-        "history": "^4.9.0",
-        "loose-envify": "^1.3.1",
-        "prop-types": "^15.6.2",
-        "react-router": "5.2.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0"
-      }
-    },
-    "react-transition-group": {
-      "version": "4.4.2",
-      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
-      "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
-      "requires": {
-        "@babel/runtime": "^7.5.5",
-        "dom-helpers": "^5.0.1",
-        "loose-envify": "^1.4.0",
-        "prop-types": "^15.6.2"
-      }
-    },
-    "regenerator-runtime": {
-      "version": "0.13.7",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
-      "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
-    },
-    "resolve-pathname": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
-      "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
-    },
-    "tiny-invariant": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
-      "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
-    },
-    "tiny-warning": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
-      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
-    },
-    "uncontrollable": {
-      "version": "7.2.1",
-      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
-      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
-      "requires": {
-        "@babel/runtime": "^7.6.3",
-        "@types/react": ">=16.9.11",
-        "invariant": "^2.2.4",
-        "react-lifecycles-compat": "^3.0.4"
-      }
-    },
-    "value-equal": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
-      "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
-    },
-    "warning": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
-      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
-      "requires": {
-        "loose-envify": "^1.0.0"
-      }
-    }
-  }
-}