Info page

client/components/InfoMap/InfoMap.jsx

@@ -0,0 +1,43 @@
+import { Map, InfoWindow, Marker, GoogleApiWrapper } from 'google-maps-react';
+import React from 'react';
+import PropTypes from 'prop-types';
+import './InfoMap.scss';
+
+
+const KEY = 'AIzaSyBPo6m3oLTozHOupA5V_kbBtxwgqbiVmOs';
+
+
+export class InfoMap extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+    };
+  }
+
+  render() {
+    const { google } = this.props;
+    return (
+      <Map google={google} zoom={14}>
+
+        <Marker
+          onClick={this.onMarkerClick}
+          name="Current location"
+        />
+
+        <InfoWindow onClose={this.onInfoWindowClose}>
+          <div>
+            <h1>something</h1>
+          </div>
+        </InfoWindow>
+      </Map>
+    );
+  }
+}
+
+InfoMap.propTypes = {
+  google: PropTypes.objectOf(PropTypes.any).isRequired
+};
+
+export default GoogleApiWrapper({
+  apiKey: (KEY)
+})(InfoMap);

client/components/InfoMap/InfoMap.scss

@@ -0,0 +1,5 @@
+.info-map {
+  font-family: 'Courier New', Courier, monospace;
+  border: 1px solid black;
+  width: 500px;
+}

client/pages/Info/Info.jsx

@@ -1,33 +1,40 @@
 import React from 'react';
+import slack from 'images/slack.svg';
+import facebook from 'images/facebook.svg';
+import github from 'images/github-logo.svg';
+import { InfoMap } from '../../components/InfoMap/InfoMap';
 import './Info.scss';
 
 
 const Info = () => (
   <div className="main-info">
-    <div className="Map">
-      <p>Here will be map</p>
+    <div className="team">
+      <h1>Hi we are team RV-034.WebUI\Node.js</h1>
+      <p>We are hope that you have enjoyed to use our Trip-assistant</p>
     </div>
     <div className="contacts">
-      <h1>Contacts</h1>
+      <h1>Contact us!</h1>
       <p>Our phone 66-666-666</p>
-      <p>Our email ad@666.gmail.com</p>
+      <p>Our email email@666.gmail.com</p>
     </div>
     <div className="form">
       <form>
-        <input type="text" name="name" placeholder="input your name\login" required /> <br />
-        <input type="email" name="email" placeholder="input your email" required /> <br />
-        <textarea placeholder="your message here" />
-        <a href="# " className="waves-effect waves-light btn-large"><i className="material-icons left">Submit</i></a>
+        <input type="text" name="name" placeholder="your name\login" required /> <br />
+        <input type="email" name="email" placeholder="your email" required /> <br />
+        <textarea placeholder="your message here" required />
+        <button type="submit" className="waves-effect waves-light btn-large"><i className="material-icons left">Submit</i></button>
       </form>
     </div>
+    <div className="map">
+      <InfoMap />
+    </div>
     <footer>
-      <div className="copyright">Copyright</div>
+      <div className="copyright">Copyright &#169; by RV-034Web/UI</div>
       <div className="footer-menu">
         <ul>
-          <li><a href="# ">icon</a></li>
-          <li><a href="# ">icon</a></li>
-          <li><a href="# ">icon</a></li>
-          <li><a href="# ">icon</a></li>
+          <li><a href="https://rv-034webui.slack.com/ " rel="noopener noreferrer" target="_blank"><img src={slack} alt="slack" /></a></li>
+          <li><a href="https://uk-ua.facebook.com/SoftServeInc/ " rel="noopener noreferrer" target="_blank"><img src={facebook} alt="slack" /></a></li>
+          <li><a href="https://github.com/orgs/Social-projects-Rivne/teams/rv-034-webui/repositories " rel="noopener noreferrer" target="_blank"><img src={github} alt="slack" /></a></li>
         </ul>
       </div>
     </footer>

client/pages/Info/Info.scss

@@ -1,20 +1,42 @@
 
 .main-info {
-  background-color: #f7f8fa;
   display: flex;
   flex-direction: column;
+  background: url('~@images/profile-page-bg.jpg') top;
 }
 
-.Map {
+.team {
+  background-color: rgba(255, 255, 255, 0.5);
+  width: 100%;
+  margin: 0 auto;
+
+  h1 {
+    text-align: center;
+  }
+
+  p {
+    text-align: center;
+  }
+}
+
+.map {
   width: 80%;
   height: 300px;
-  border: 1px, solid, black;
+  border: 1px solid black;
   margin: 0 auto;
-  background-color: lightblue;
+  margin-top: 50px;
+}
+
+.map div:first-child {
+  position: relative !important;
+  height: 100% !important;
+  width: 100% !important;
 }
 
 .contacts {
+  margin-top: 100px;
   text-align: center;
+  font-family: 'Courier New', Courier, monospace;
 }
 
 .form {
@@ -27,15 +49,15 @@ footer {
   margin-top: 50px;
   height: 100px;
   width: 100%;
-  background-color: rgb(140, 188, 243);
   display: flex;
   justify-content: center;
   flex-wrap: nowrap;
 }
 
 .copyright {
-  margin-top: 40px;
+  margin-top: 50px;
   width: 30%;
+  text-align: center;
 }
 
 .footer-menu {
@@ -47,16 +69,19 @@ footer {
     flex-direction: row;
 
     li {
-      margin-right: 30px;
+      margin-right: 20px;
       margin-left: 60px;
-      padding: 5px;
+      padding: 10px;
     }
 
     li:hover {
-      background-color: chocolate;
-      padding: 5px;
-      transition: 0.2s;
+      background-color: aquamarine;
+      padding: 10px;
+      transition: 0.8s;
+    }
+
+    img {
+      width: 30px;
     }
   }
 }
-

client/routes/index.js

@@ -5,7 +5,6 @@ import Login from '../pages/Login/Login';
 import SearchRoute from '../pages/SearchRoute';
 import NewTrip from '../pages/NewTrip';
 
-
 const Routes = [
   {
     path: '/',

public/data/feedbacksData.json

@@ -1,23 +1,41 @@
 [  
-  {  
+  {  "id":1,
      "name": "Lviv - Paris",
      "rating": 4.7,
      "feedback": "The driver was drunk! I liked everything!\n\n Quisque varius imperdiet auctor. In et dui elit. Nam metus lorem, imperdiet iaculis imperdiet sit amet, ullamcorper quis ipsum. Sed sed nisi vitae magna vestibulum commodo.",
      "userName": "Petro",
      "date": "07/08/2018"
   },
   {  
+    "id":2,
     "name": "Lviv - Ternopil",
     "rating": 4.1,
     "feedback": "The driver was drunk! I liked everything!\n\n Quisque varius imperdiet auctor. In et dui elit. Nam metus lorem, imperdiet iaculis imperdiet sit amet, ullamcorper quis ipsum. Sed sed nisi vitae magna vestibulum commodo.",
     "userName": "Petro",
     "date": "07/08/2018"
   },
   {  
+    "id":3,
     "name": "Lviv - Kyiv",
     "rating": 5,
     "feedback": "The driver was drunk! I liked everything!\n\n Quisque varius imperdiet auctor. In et dui elit. Nam metus lorem, imperdiet iaculis imperdiet sit amet, ullamcorper quis ipsum. Sed sed nisi vitae magna vestibulum commodo.",
     "userName": "Petro",
     "date": "07/08/2018"
+  },
+  {  
+    "id":4,
+    "name": "Kyiv -Lviv  ",
+    "rating": 5,
+    "feedback": "The driver was drunk! I liked everything!\n\n Quisque varius imperdiet auctor. In et dui elit. Nam metus lorem, imperdiet iaculis imperdiet sit amet, ullamcorper quis ipsum. Sed sed nisi vitae magna vestibulum commodo.",
+    "userName": "Petro",
+    "date": "07/08/2018"
+  },
+  {  
+    "id":5,
+    "name": "Rivne -Lviv  ",
+    "rating": 5,
+    "feedback": "The driver was drunk! I liked everything!\n\n Quisque varius imperdiet auctor. In et dui elit. Nam metus lorem, imperdiet iaculis imperdiet sit amet, ullamcorper quis ipsum. Sed sed nisi vitae magna vestibulum commodo.",
+    "userName": "Petro",
+    "date": "07/08/2018"
   }
 ]