From 9c68857934540b4df954aba860cfa344cb096dde Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gr=C3=A9goire=20Delattre?= <gregoire.delattre@gmail.com>
Date: Thu, 24 Nov 2016 00:12:34 +0100
Subject: [PATCH] Add a bootswatch theme

---
 package.json                            |  1 +
 src/public/js/components/movies/list.js |  4 ++--
 src/public/js/components/navbar.js      |  2 +-
 src/public/less/app.less                | 12 +++++++++---
 yarn.lock                               |  4 ++++
 5 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index b7fb322..f8f40e3 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
     "dependencies": {
         "babel-polyfill": "^6.16.0",
         "bootstrap": "^3.3.6",
+        "bootswatch": "^3.3.7",
         "font-awesome": "^4.7.0",
         "history": "^4.4.0",
         "jquery": "^2.2.4",
diff --git a/src/public/js/components/movies/list.js b/src/public/js/components/movies/list.js
index afd19f9..bbcda28 100644
--- a/src/public/js/components/movies/list.js
+++ b/src/public/js/components/movies/list.js
@@ -55,11 +55,11 @@ function MovieDetails(props) {
         <h3 className="visible-xs">{props.movie.title}</h3>
         <p>
           <i className="fa fa-clock-o"></i>
-          {props.movie.runtime} min
+          &nbsp;{props.movie.runtime} min
         </p>
         <p>
           <i className="fa fa-star-o"></i>
-          {props.movie.rating} <small>({props.movie.votes} counts)</small>
+          &nbsp;{props.movie.rating} <small>({props.movie.votes} counts)</small>
         </p>
         <p className="movie-plot">{props.movie.plot}</p>
       </div>
diff --git a/src/public/js/components/navbar.js b/src/public/js/components/navbar.js
index 830fa8d..859ca48 100644
--- a/src/public/js/components/navbar.js
+++ b/src/public/js/components/navbar.js
@@ -12,7 +12,7 @@ export default class NavBar extends React.Component {
     const isLoggedIn = username !== "" ? true : false;
     return (
       <div>
-        <Navbar fluid inverse fixedTop collapseOnSelect>
+        <Navbar fluid fixedTop collapseOnSelect>
           <Navbar.Header>
             <LinkContainer to="/">
               <Navbar.Brand><a href="#">Canapé</a></Navbar.Brand>
diff --git a/src/public/less/app.less b/src/public/less/app.less
index dabe803..7f7cf31 100644
--- a/src/public/less/app.less
+++ b/src/public/less/app.less
@@ -1,13 +1,15 @@
 @import "~bootstrap/less/bootstrap.less";
+@import "~bootswatch/superhero/variables.less";
+@import "~bootswatch/superhero/bootswatch.less";
 @import "~font-awesome/less/font-awesome.less";
 
 body {
-  padding-top: 70px;
+  padding-top: @navbar-height + 10px;
 }
 
 .thumbnail-selected {
-    border-color:#f1c40f;
-    background-color:#f1c40f;
+    border-color: @brand-primary;
+    background-color: @brand-primary;
 }
 
 .movie-plot {
@@ -20,3 +22,7 @@ body {
     bottom: 1%;
     right: 1%;
 }
+
+.navbar {
+    opacity: 0.95;
+}
diff --git a/yarn.lock b/yarn.lock
index 11d8cf9..59f4ae6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -773,6 +773,10 @@ bootstrap@^3.3.6:
   version "3.3.7"
   resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.3.7.tgz#5a389394549f23330875a3b150656574f8a9eb71"
 
+bootswatch:
+  version "3.3.7"
+  resolved "https://registry.yarnpkg.com/bootswatch/-/bootswatch-3.3.7.tgz#eb6f9a9a8523b87a706ea91deec3e0d7eaa8ab1f"
+
 brace-expansion@^1.0.0:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.6.tgz#7197d7eaa9b87e648390ea61fc66c84427420df9"