added font Awesome and change sidebar

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

@@ -39,8 +39,8 @@ export class Sidebar extends React.Component {
     }
 
     render() {
-        console.log(this.props)
-	//const { showProfile } = this.props;
+        //console.log(this.props)
+	    //const { showProfile } = this.props;
         return (
             <div className="menu">
                 <nav>
@@ -65,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.scss

@@ -96,8 +96,4 @@
     &.events {
         background-image: url('../../assets/img/girl-bg.jpg');
     }
-
-    .event-content {
-        min-height: 180px;
-    }
 }

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/styles/base.scss

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