Update

README.md

@@ -1,3 +1,7 @@
+This project is currently in progress, check it live here: (http://app.dreamteam.jfdd13.is-academy.pl/) 
+
+
+
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 
 ## Available Scripts

package.json

@@ -3,15 +3,15 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "firebase": "^7.5.0",
+    "firebase": "^7.22.0",
     "formik": "^2.0.4",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-favicon": "0.0.17",
     "react-loader-spinner": "^3.1.5",
     "react-minimal-pie-chart": "^5.0.2",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "3.2.0",
+    "react-scripts": "^3.4.3",
     "recharts": "^1.8.5",
     "semantic-ui-css": "^2.4.1",
     "semantic-ui-react": "^0.88.1",

src/App.css

@@ -33,7 +33,7 @@
   flex-direction: column;
   flex: 1;
   min-height: 100vh;
-  margin-left: 150px;
+  margin: 0 0 0 150px;
   font-size: 16px;
 }
 
@@ -109,4 +109,38 @@
   bottom: 1.5rem;
   right: 1.5rem;
   color: #fff;
+}
+
+@media all and (max-width:500px) {
+  .main {
+    margin: 0 0 0 60px
+  }
+}
+
+/* appbar.js */
+
+.AppBarHeader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 60px;
+  background-color: #1b1c1d;
+  font-size: 1.5rem;
+  color: #fff;
+}
+
+/* navbar.js */
+
+.NavStyles {
+  position: fixed !important;
+  min-width: 150px;
+  min-height: 100vh;
+  border: 0;
+  border-radius: 0;
+}
+
+@media all and (max-width: 500px) {
+  .NavStyles {
+    min-width: 60px;
+  }
 }

src/App.js

@@ -1,50 +1,45 @@
 import React from 'react';
-import {BrowserRouter, Route, Switch, Redirect} from "react-router-dom";
+import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";
 import "./App.css";
-import Navbar from "./components/Navbar";
+import Navbar from "./layout/Navbar";
 import Dashboard from "./components/Dashboard";
-import Form from "./components/Form";
+import TripForm from "./components/Form/Form";
 import Favorites from "./components/Favourites";
 import Search from "./components/Search";
-import Appbar from "./components/Appbar";
+import Appbar from "./layout/Appbar";
 import 'semantic-ui-css/semantic.min.css'
 import UserPanel from './components/UserPanel';
 import Register from './screens/Register';
 import Login from './screens/Login';
 import LoggedUser from './screens/LoggedUser';
 import Favicon from 'react-favicon';
 function App() {
-    return (
-        <>
-        <Favicon url="../public/favicon.ico" />
-        <BrowserRouter>
-            <div className="App">
-                <Navbar/>
-                <main className={'main'} style={{
-                    marginLeft: (window.screen.width < 501) ? '60px':'150px',
-                    marginTop:'0',
-                    marginBottom: '0'
-                }
-                }>
-                    <Appbar/>
-                    <Switch>
-                        <Route exact strict path="/" component={Dashboard}/>
-                        <Route exact strict path="/main" component={Dashboard}/>
-                        <Route exact strict path="/search" component={Search}/>
-                        <Route exact strict path="/panel" component={UserPanel}/>
-                        <Route exact strict path="/register" component={Register}/>
-                        <Route exact strict path="/login" component={Login}/>
-                        <Route exact strict path="/user" component={LoggedUser}/>
-                        <Route exact strict path="/form/" component={Form}/>
-                        <Route exact strict path="/favs" component={Favorites}/>
-                        <Route component={() => <h1>404 - sadface</h1>}/>
-                    </Switch>
-                </main>
-            </div>
-            <Redirect to="/"/>
-        </BrowserRouter>
-        </>
-    );
+  return (
+    <>
+      <Favicon url="../public/favicon.ico" />
+      <BrowserRouter>
+        <div className="App">
+          <Navbar />
+          <main className={'main'}>
+            <Appbar />
+            <Switch>
+              <Route exact strict path="/" component={Dashboard} />
+              <Route exact strict path="/main" component={Dashboard} />
+              <Route exact strict path="/search" component={Search} />
+              <Route exact strict path="/panel" component={UserPanel} />
+              <Route exact strict path="/register" component={Register} />
+              <Route exact strict path="/login" component={Login} />
+              <Route exact strict path="/user" component={LoggedUser} />
+              <Route exact strict path="/form" component={TripForm} />
+              <Route exact strict path="/favs" component={Favorites} />
+              <Route component={() => <h1>404 - sadface</h1>} />
+            </Switch>
+          </main>
+        </div>
+        <Redirect to="/" />
+      </BrowserRouter>
+    </>
+  );
 }
 
 export default App;

src/components/Continents.js

@@ -1,8 +1,8 @@
 export const Continents = [
-    { key: 'afr', value: 1, text: "Afryka" },
-    { key: 'apd', value: 2, text: "Ameryka Południowa" },
-    { key: 'apn', value: 3, text: "Ameryka Północna" },
-    { key: 'aus', value: 4, text: "Australia i Oceania" },
-    { key: 'azj', value: 5, text: "Azja" },
-    { key: 'eur', value: 6, text: "Europa" }
+  { key: 'afr', value: 1, text: "Afryka" },
+  { key: 'apd', value: 2, text: "Ameryka Południowa" },
+  { key: 'apn', value: 3, text: "Ameryka Północna" },
+  { key: 'aus', value: 4, text: "Australia i Oceania" },
+  { key: 'azj', value: 5, text: "Azja" },
+  { key: 'eur', value: 6, text: "Europa" }
 ];

src/components/Dashboard.js

@@ -1,57 +1,57 @@
 import React from 'react';
 import PieChartComponent from "./PieChart";
-import {Grid} from "semantic-ui-react";
+import { Grid } from "semantic-ui-react";
 import DataBarChart from "./DataChart";
 
 function Dashboard() {
-    return (
-        <div className="Dashboard">
-            <Grid padded={true}>
-                <Grid.Row>
-                    <Grid.Column>
-                        <h2>Planowanie podróży nigdy nie było tak proste i przyjemne</h2>
-                    </Grid.Column>
-                </Grid.Row>
-                <Grid.Row>
-                    <Grid.Column widescreen={8} largeScreen={8} mobile={16}>
-                        <PieChartComponent/>
-                    </Grid.Column>
-                    <Grid.Column widescreen={8} largeScreen={8} mobile={16} verticalAlign={'middle'}>
-                        <DataBarChart/>
-                    </Grid.Column>
-                </Grid.Row>
-                <Grid.Row centered={true}>
-                    <Grid.Column width={8} verticalAlign={'middle'}>
-                        <h3>Z WAY.TO pojedziesz do:</h3>
-                        <div style={{display: 'flex', justifyContent: 'center'}}>
-                            <ul className={'pieUl'}>
-                                <li className={'pieLi pieLi__asia'}>Azji</li>
-                                <li className={'pieLi pieLi__europe'}>Europy</li>
-                                <li className={'pieLi pieLi__northamerica'}>Północnej Ameryki</li>
-                                <li className={'pieLi pieLi__africa'}>Afryki</li>
-                            </ul>
-                            <ul className={'pieUl'}>
-                                <li className={'pieLi pieLi__southamerica'}>Ameryki Południowej</li>
-                                <li className={'pieLi pieLi__antarctica'}>Antarktydy</li>
-                                <li className={'pieLi pieLi__australia'}>Australii</li>
-                            </ul>
-                        </div>
-                    </Grid.Column>
-                    <Grid.Column width={8} verticalAlign={'middle'} style={{height: '100%'}}>
-                            <h3>Podróż na każdą kieszeń, zawsze.</h3>
-                            <div>
-                                <ul style={{listStyle: 'none'}}>
-                                    <li>Wyjdź z domu i poczuj się turystą we własnym mieście</li>
-                                    <li>Skorzystaj z formularza i dodaj swoją wycieczkę</li>
-                                    <li>Wracaj do swoich najlepszych lokalizacji z pomocą ulubionych</li>
+  return (
+    <div className="Dashboard">
+      <Grid padded={true}>
+        <Grid.Row>
+          <Grid.Column>
+            <h2>Planowanie podróży nigdy nie było tak proste i przyjemne</h2>
+          </Grid.Column>
+        </Grid.Row>
+        <Grid.Row>
+          <Grid.Column widescreen={8} largeScreen={8} mobile={16}>
+            <PieChartComponent />
+          </Grid.Column>
+          <Grid.Column widescreen={8} largeScreen={8} mobile={16} verticalAlign={'middle'}>
+            <DataBarChart />
+          </Grid.Column>
+        </Grid.Row>
+        <Grid.Row centered={true}>
+          <Grid.Column width={8} verticalAlign={'middle'}>
+            <h3>Z WAY.TO pojedziesz do:</h3>
+            <div style={{ display: 'flex', justifyContent: 'center' }}>
+              <ul className={'pieUl'}>
+                <li className={'pieLi pieLi__asia'}>Azji</li>
+                <li className={'pieLi pieLi__europe'}>Europy</li>
+                <li className={'pieLi pieLi__northamerica'}>Północnej Ameryki</li>
+                <li className={'pieLi pieLi__africa'}>Afryki</li>
+              </ul>
+              <ul className={'pieUl'}>
+                <li className={'pieLi pieLi__southamerica'}>Ameryki Południowej</li>
+                <li className={'pieLi pieLi__antarctica'}>Antarktydy</li>
+                <li className={'pieLi pieLi__australia'}>Australii</li>
+              </ul>
+            </div>
+          </Grid.Column>
+          <Grid.Column width={8} verticalAlign={'middle'} style={{ height: '100%' }}>
+            <h3>Podróż na każdą kieszeń, zawsze.</h3>
+            <div>
+              <ul style={{ listStyle: 'none' }}>
+                <li>Wyjdź z domu i poczuj się turystą we własnym mieście</li>
+                <li>Skorzystaj z formularza i dodaj swoją wycieczkę</li>
+                <li>Wracaj do swoich najlepszych lokalizacji z pomocą ulubionych</li>
 
-                                </ul>
-                            </div>
-                    </Grid.Column>
-                </Grid.Row>
-            </Grid>
-        </div>
-    )
+              </ul>
+            </div>
+          </Grid.Column>
+        </Grid.Row>
+      </Grid>
+    </div>
+  )
 }