fix conflict

public/index.html

@@ -9,6 +9,7 @@
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
+    <script src="https://use.fontawesome.com/c852b9449f.js"></script>
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.

src/components/eventInfoShort/EventInfoShort.js

@@ -12,7 +12,7 @@ export class EventInfoShort extends React.Component {
                 <Link to={`/events/${id}`}>
                     <div className="event-content">
                         <div className="event-cap">
-                            <h3>{title}</h3>
+                            <h3 className="caption">{title}</h3>
                             <div className="place">{country}, {city}</div>
                         </div>
                         <div className="event-date">

src/components/eventInfoShort/eventInfoShort.scss

@@ -31,14 +31,10 @@
         padding: 10px;
         border-top: solid 3px $color-blue;
         background: $color-grey-light;
-
-        h3 {
-            font-size: 1.3rem;
-            text-transform: uppercase;
-        }
+        min-height: 150px;
 
         .place {
-            font-size: 1.4rem;
+            font-size: 1.6rem !important;
         }
 
         .bg {
@@ -57,13 +53,18 @@
         position: relative;
         z-index: 3;
         color: $color-white;
+
+        h3.caption {
+            font-size: 2rem;
+            text-transform: uppercase;
+        }
     }
 
     &-date {
         position: relative;
         text-align: right;
         z-index: 3;
-        font-size: 1.4rem;
+        font-size: 1.6rem !important;
         color: $color-white;
 
         span {
@@ -73,7 +74,7 @@
 
             &:last-child {
                 display: block;
-                font-size: 1.1rem;
+                font-size: 1.2rem !important;
             }
         }
     }

src/components/sidebar/Sidebar.js

@@ -33,16 +33,14 @@ const siteMenu = [
 ];
 
 export class Sidebar extends React.Component {
-   // const {history} = this.props;
-
     logout(e) {
         localStorage.removeItem('showProfile');
         document.location.reload(true);
     }
 
     render() {
-        console.log(this.props)
-	//const { showProfile } = this.props;
+        //console.log(this.props)
+	    //const { showProfile } = this.props;
         return (
             <div className="menu">
                 <nav>
@@ -67,7 +65,7 @@ export class Sidebar extends React.Component {
                             !localStorage.showProfile && <li><Link to="/login">Login</Link></li>
 						}
                         {
-                            localStorage.showProfile && <li><button onClick={this.logout}>Logout</button></li>
+                            localStorage.showProfile && <li><a className="logout" onClick={this.logout}>Logout <i className="fa fa-sign-out"></i></a></li>
 						}
 						
                     </ul>

src/components/sidebar/sidebar.scss

@@ -52,7 +52,7 @@
                     display: inline-block;
                     color: $color-white;
                     font-weight: $semi-bold;
-                    font-size: 18px;
+                    font-size: 1.8rem;
                     padding: 10px 0;
                     opacity: 0.7;
                     transition: 0.5s;
@@ -80,6 +80,10 @@
                         }
                     }
                 }
+
+                a.logout {
+                    cursor: pointer;
+                }
             }
         }
     }

src/conteiners/home/Home.js

@@ -7,9 +7,12 @@ import videoBg from '../../assets/img/video-bg.mp4';
 import Sidebar from '../../components/sidebar/Sidebar';
 import EventInfoShort from '../../components/eventInfoShort/EventInfoShort';
 
+import logo from '../../assets/img/logo.png';
+import bgVideo from '../../assets/img/bg-video.mp4';
+
 export default class Home extends React.Component {
     state = {
-        videoURL: 'https://gcs-vimeo.akamaized.net/exp=1564520542~acl=%2A%2F1021052489.mp4%2A~hmac=faf2d737dfcc461ab05364a37b61f39c7e8afda27ec51769eb01027130e159be/vimeo-prod-skyfire-std-us/01/2799/9/238996987/1021052489.mp4'
+        videoURL: 'https://gcs-vimeo.akamaized.net/exp=1564565194~acl=%2A%2F1021052489.mp4%2A~hmac=f6d3e53b00695ca1e6920c195176211b64e179e250acfcdaf35bb334a60cac3f/vimeo-prod-skyfire-std-us/01/2799/9/238996987/1021052489.mp4'
     }
 
     render() {
@@ -19,20 +22,22 @@ export default class Home extends React.Component {
             <>
                 <Sidebar history={this.props.history}/>
                 <div className="hero">
-                    <div className="container-wrap hero-wrap">
-                        <div className="hero-logo">
-                            <img src={logo} alt="logo" />
-                            <h3><span>Just</span>tri it</h3>
+                    <div className="container-wrap">
+                        <div className="hero-wrap">
+                            <div className="hero-logo">
+                                <img src={logo} alt="logo"/>
+                                <h3><span>Just</span>tri it</h3>
+                            </div>
+                            <h1>International competitions among professionals and amateurs</h1>
                         </div>
-                        <h1>International competitions among professionals and amateurs</h1>                       
                     </div>                    
 
                     <div className="bg"></div>
                     <div className="bg-img"></div>
 
                     <video id="background-video" loop autoPlay>
-                        <source src={videoBg} type="video/mp4" />
-                        <source src={videoBg} type="video/ogg" />
+                        <source src={bgVideo} type="video/mp4" />
+                        <source src={bgVideo} type="video/ogg" />
                         Your browser does not support the video tag.
                     </video>
                 </div>
@@ -42,16 +47,14 @@ export default class Home extends React.Component {
 
                         <div className="events-list">
                             {
-                                events.reverse().map((event, ind) =>
-                                    ind < 4 && <EventInfoShort
-                                        key={event._id}
-                                        title={event.title}
-                                        country={event.country}
-                                        city={event.city}
-                                        id={event._id}
-                                        eventDate={event.eventDate}
-                                        imgSrc={event.mainBannerPicture}
-                                    />
+                                events.reverse().map( (event,ind) => ind < 6 && <EventInfoShort
+                                    key={event._id}
+                                    title={event.title}
+                                    country={event.country}
+                                    city={event.city}
+                                    id={event._id}
+                                    eventDate={event.eventDate}
+                                    imgSrc={event.mainBannerPicture} />
                                 )
                             }
                         </div>

src/conteiners/home/home.scss

@@ -7,6 +7,7 @@
     display: flex;
     align-items: center;
 
+<<<<<<< HEAD
     &-wrap {
     }
 
@@ -22,12 +23,25 @@
 
         img {
             max-width: 250px;
+=======
+    &-logo {
+        position: relative;
+        z-index: 4;
+        display: flex;
+        align-items: center;
+        margin-bottom: 50px;
+
+        img {
+            max-width: 300px;
+            width: 100%;
+>>>>>>> b626d87502528699ccdaa8292687f59a95c9d386
         }
 
         h3 {
             display: flex;
             flex-direction: column;
             justify-content: center;
+<<<<<<< HEAD
             padding-left: 50px;
             padding-top: 15px;
             font-size: 6rem;
@@ -39,12 +53,31 @@
             span {
                 display: block;
                 font-size: 10rem;
+=======
+            padding-left: 60px;
+            font-size: 9rem;
+            font-weight: $bold;
+            color: $color-white;
+            line-height: 1;
+            text-transform: uppercase;
+            text-align: center;
+            padding-top: 20px;
+
+            span {
+                display: block;
+                font-size: 11rem;
+>>>>>>> b626d87502528699ccdaa8292687f59a95c9d386
             }
         }
     }
 
     h1 {
+<<<<<<< HEAD
         font-size: 4rem;
+=======
+        font-size: 5rem;
+        font-weight: $bold;
+>>>>>>> b626d87502528699ccdaa8292687f59a95c9d386
         color: $color-white;
         position: relative;
         z-index: 4;
@@ -94,6 +127,7 @@
 }
 
 .home {
+<<<<<<< HEAD
     &.events {
         padding-top: 60px;
         background-image: url('../../assets/img/girl-bg.jpg');
@@ -102,4 +136,11 @@
     .event-content {
         min-height: 180px;
     }
+=======
+    padding-top: 60px;
+
+    &.events {
+        background-image: url('../../assets/img/girl-bg.jpg');
+    }
+>>>>>>> b626d87502528699ccdaa8292687f59a95c9d386
 }

src/index.js

@@ -6,6 +6,7 @@ import { createBrowserHistory } from 'history';
 
 import * as serviceWorker from './serviceWorker';
 import './index.scss';
+
 import Router from './router';
 
 import { store } from "./store.js";

src/router.js

@@ -31,7 +31,7 @@ export class Router extends React.Component {
 		return(
 			<div className="container">
 			    <Switch>
-                    <Route exact path="/" render={props => (
+                    <Route exact path="/" render={ props => (
                         <Home events={events} />
                     )} />
 

src/styles/base.scss

@@ -139,4 +139,8 @@ button {
         color: $color-white;
         font-size: 5rem;
     }
+}
+
+i {
+	font-family: 'FontAwesome';
 }