From 154b8608d0183b404395683ee8c3654f537ee85c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kasper=20Rynning-T=C3=B8nnesen?= <kasper@kasperrt.no>
Date: Thu, 11 Feb 2016 13:47:37 +0100
Subject: [PATCH] Changed footer buttons and added icons to them

---
 php/footer.php       | 15 +++++++++++----
 php/header.php       |  1 +
 static/css/style.css |  9 +++++++--
 3 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/php/footer.php b/php/footer.php
index 2dea2ea9..22e4b831 100755
--- a/php/footer.php
+++ b/php/footer.php
@@ -77,13 +77,19 @@
                 </p>
                 <ul id="footer-buttons">
                   <li>
-                    <a class="modal-trigger waves-effect cyan darken-2 help-button-footer" title="Need help with the site?" onclick="$('#help').openModal()">Help, how does this work?!</a>
+                    <a class="modal-trigger waves-effect cyan darken-2 btn help-button-footer" title="Need help with the site?" onclick="$('#help').openModal()">
+                      <i class="material-icons left footer-button-icon">info_outline</i>HELP
+                    </a>
                   </li>
                   <li>
-                    <a class="modal-trigger waves-effect blue-grey darken-2 help-button-footer" id="embed-button" title="Want to embed this channel?" onclick="$('#embed').openModal()">Embed this channel</a>
+                    <a class="modal-trigger waves-effect blue-grey darken-2 btn help-button-footer" id="embed-button" title="Want to embed this channel?" onclick="$('#embed').openModal()">
+                    <i class="material-icons left footer-button-icon">code</i>EMBED
+                    </a>
                   </li>
                   <li>
-                    <a class="modal-trigger waves-effect red darken-2 help-button-footer" id="contact-button" title="Contact us" onclick="$('#contact').openModal()">Contact us</a>
+                    <a class="modal-trigger waves-effect red darken-2 btn help-button-footer" id="contact-button" title="Contact us" onclick="$('#contact').openModal()">
+                    <i class="mdi-communication-email left footer-button-icon"></i>CONTACT
+                    </a>
                   </li>
                 </ul>
                 <p id="latest-commit" class="grey-text text-lighten-4 truncate"></p>
@@ -107,7 +113,8 @@
                         <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank" id="donate_form">
                           <input type="hidden" name="cmd" value="_s-xclick">
                           <input type="hidden" name="hosted_button_id" value="JEXDYP59N5VWE">
-                          <a title="Like what we made? Help us by donating (a) beer!" class="waves-effect waves-light btn orange light-blue share" onclick="document.getElementById('donate_form').submit();">Donate
+                          <a title="Like what we made? Help us by donating (a) beer!" class="waves-effect waves-light btn orange light-blue share" onclick="document.getElementById('donate_form').submit();">
+                          <i class="mdi-action-payment left footer-button-icon"></i>Donate
                           </a>
                         </form>
                         <p>
diff --git a/php/header.php b/php/header.php
index 512dc170..169781dc 100755
--- a/php/header.php
+++ b/php/header.php
@@ -17,6 +17,7 @@
 <meta property="og:description" content="The Shared (free) YouTube radio. Being built around the YouTube search and video API it enables the creation of collaborative and shared live playlists, with billions of videos and songs to choose from, all for free and without registration. Enjoy!"/>
 <meta property="og:type" content="website"/>
 <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.min.css">
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 <link type="text/css" rel="stylesheet" href="/static/css/materialize.min.css" />
 <link rel="stylesheet" type="text/css" href="/static/css/style.css" title="Default" />
 <link rel="icon" id="favicon" type="image/png" href="/static/images/favicon.png"/>
diff --git a/static/css/style.css b/static/css/style.css
index 4af14487..427af930 100755
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -118,16 +118,21 @@ footer{
 }
 
 .help-button-footer{
-  padding: 10px;
+  width:17em;
   background: #1e88e5;
   border-radius: 2px;
   color:white;
-  width:200px;
   text-align: center;
 }
 
 #footer-buttons li a{
   margin-top:10px;
+  padding-left:10px;
+}
+
+.footer-button-icon{
+  font-size:33px !important;
+  margin-right:10px;
 }
 
 footer.page-footer,