Add Etcher logo to application footer (#302)

Fixes: https://github.com/resin-io/etcher/issues/252
Signed-off-by: Juan Cruz Viotti <jviottidc@gmail.com>

build/css/main.css

@@ -1254,7 +1254,7 @@ mark,
 .text-right, .section-header {
   text-align: right; }
 
-.text-center, .alert, .alert-ribbon {
+.text-center, .alert, .alert-ribbon, .section-footer {
   text-align: center; }
 
 .text-justify {
@@ -6332,6 +6332,9 @@ body {
   color: #ddd; }
 
 .section-footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   position: fixed;
   bottom: 20px;
   left: 0;
@@ -6343,7 +6346,7 @@ body {
   .section-footer .col-xs {
     padding: 0; }
   .section-footer hero-icon .icon {
-    margin: 0; }
+    margin: 0 13px; }
   .section-footer [open-external]:hover {
     color: #85898c;
     text-decoration: underline; }

lib/index.html

@@ -36,18 +36,20 @@
 
     <main class="wrapper" ui-view></main>
 
-    <footer class="section-footer row between-xs middle-xs">
-      <div class="col-xs">
-        <div class="box text-left">
-          <hero-icon path="../assets/images/resin.svg" width="85px" height="auto" open-external="https://resin.io"></hero-icon>
-        </div>
-      </div>
+    <footer class="section-footer">
+      <hero-icon path="../assets/images/etcher.svg"
+        width="83px"
+        height="13px"
+        open-external="https://etcher.io"></hero-icon>
 
-      <div class="col-xs">
-        <div class="box text-right">
-          <p class="caption"><span open-external="https://github.com/resin-io/etcher">AN OPEN SOURCE PROJECT</span> BY <span open-external="https://resin.io">RESIN.IO</span></p>
-        </div>
-      </div>
+      <span class="caption">
+        IS <span open-external="https://github.com/resin-io/etcher">AN OPEN SOURCE PROJECT</span> BY
+      </span>
+
+      <hero-icon path="../assets/images/resin.svg"
+        width="79px"
+        height="23px"
+        open-external="https://resin.io"></hero-icon>
     </footer>
   </body>
 </html>

lib/scss/main.scss

@@ -74,6 +74,12 @@ body {
 }
 
 .section-footer {
+  @extend .text-center;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
   position: fixed;
   bottom: 20px;
   left: 0;
@@ -89,9 +95,8 @@ body {
     padding: 0;
   }
 
-  // Align icon to the left
   hero-icon .icon {
-    margin: 0;
+    margin: 0 13px;
   }
 
   [open-external]:hover {