Further color changes, new style for room selector colors.

app/client/stylesheets/app.css

@@ -325,7 +325,7 @@ input[type="range"] + .thumb {
 
 .room-slideout h5{
     text-align: center;
-    background-color: #1565c0 !important;
+    background-color: rgb(3, 169, 244) !important;
     margin: 0;
     padding-top: 5px;
     padding-bottom: 5px;
@@ -431,3 +431,41 @@ input[type="range"] + .thumb {
   background-color: #1565c0;
 }
 hr { border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); }
+
+.secondary-content {
+    float: right;
+    color: rgb(3, 169, 244);
+}
+
+input:focus:not([type]):not([readonly]) + label, input[type="text"]:focus:not([readonly]) + label, input[type="password"]:focus:not([readonly]) + label, input[type="email"]:focus:not([readonly]) + label, input[type="url"]:focus:not([readonly]) + label, input[type="time"]:focus:not([readonly]) + label, input[type="date"]:focus:not([readonly]) + label, input[type="datetime-local"]:focus:not([readonly]) + label, input[type="tel"]:focus:not([readonly]) + label, input[type="number"]:focus:not([readonly]) + label, input[type="search"]:focus:not([readonly]) + label, textarea.materialize-textarea:focus:not([readonly]) + label {
+	color: rgb(3, 169, 244);
+}
+
+input:not([type]), input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="time"], input[type="date"], input[type="datetime-local"], input[type="tel"], input[type="number"], input[type="search"], textarea.materialize-textarea {
+	background-color: transparent;
+	border: 1px;
+  border-bottom: 1px solid rgb(3, 169, 244) !important;
+  box-shadow: 0 1px 0 0 white !important;
+	border-radius: 0;
+	outline: none;
+	height: 3rem;
+	width: 100%;
+	font-size: 1rem;
+	margin: 0 0 15px 0;
+	padding: 0;
+	box-shadow: none;
+	box-sizing: content-box;
+	transition: all .3s;
+}
+
+.dropdown-content li > a, .dropdown-content li > span {
+	font-size: 16px;
+	color: rgb(3, 169, 244);
+	display: block;
+	line-height: 22px;
+	padding: 14px 16px;
+}
+
+.input-field .prefix.active {
+	color: white;
+}

app/client/templates/addSong.html

@@ -16,7 +16,7 @@
                 <hr>
                 <ul class="collection">
                     <li class="collection-item avatar youtube-search-result-li">
-                        <img src="http://static.boredpanda.com/blog/wp-content/uploads/2014/04/amazing-fox-photos-182.jpg" alt="" class="video-import-thumbnail">
+                        <img src="/notes.png" alt="" class="video-import-thumbnail">
                         <span class="title video-import-text">Title</span>
                         <p class="video-import-text">First Line <br>
                             Second Line

app/client/templates/footer.html

@@ -8,7 +8,7 @@
                 <a href="https://twitter.com/musareapp" target="_blank"><img src="/twitter.png" height="32dp" width="32dp" /></a>
                 <a href="https://discordapp.com/invite/0rQRiaFwLwffsKJu" target="_blank"><img src="/discord.svg" height="32dp" width="32dp" /></a>
             </div>
-            <div class="col l6 hide-on-med-and-down">
+            <!--<div class="col l6 hide-on-med-and-down">
               <h5 class="grey-text text-darken-2">Contact Us</h5>
                   <div class="row">
                     <div class="input-field col l4">
@@ -33,8 +33,8 @@
                       </button>
                     </div>
                   </div>
-            </div>
-            <div class="col l2 s12">
+            </div>-->
+            <div class="col l2 s12 right">
                 <h5 class="grey-text text-darken-2">Links</h5>
                 <ul>
                     <li><a class="grey-text text-darken-1" href="/faq">FAQ</a></li>

app/client/templates/header.html

@@ -3,7 +3,7 @@
         <!-- Dropdown Structure -->
         <ul id="contributeDrop" class="dropdown-content">
             <li><a href="https://www.github.com/Musare/Musare" target="_blank" class="grey-text text-darken-4">Github</a></li>
-            <li><a href="https://paypal.me/CNDonate" class="grey-text text-darken-4">Donate</a></li>
+            <li><a href="https://patreon.com/CosmosNode" class="grey-text text-darken-4">Patreon</a></li>
             <li><a href="/feedback" class="grey-text text-darken-4">Feedback</a></li>
         </ul>
         <ul id="aboutDrop" class="dropdown-content">
@@ -56,7 +56,7 @@
                             </div>
                             <div class="collapsible-body black-text">
                                 <a href="https://www.github.com/Musare/Musare" target="_blank">Github</a>
-                                <a href="https://paypal.me/CNDonate">Donate</a>
+                                <a href="https://patreon.com/CosmosNode">Patreon</a>
                                 <a href="/feedback">Feedback</a>
                             </div>
                         </li>

app/client/templates/home.html

@@ -10,8 +10,8 @@
                 {{#each rooms}}
                     {{#if private}}
                         {{#if isModerator}}
-                            <div class="col m4 l2 red">
-                                <div class="card hoverable">
+                            <div class="col m4 l2">
+                                <div class="card hoverable red white-text">
                                     <div class="card-image waves-effect waves-block waves-light">
                                         <a href=/{{type}}>
                                         <img onerror="this.src='/notes.png'" src={{currentSong.song.img}}>
@@ -22,11 +22,11 @@
                                         </a>
                                     </div>
                                     <div class="card-content">
-                                        <span class="card-title grey-text text-darken-4">{{display}}</span><div><span class="user-num">{{userNum}}</span> <i class="material-icons">perm_identity</i></div>
+                                        <span class="card-title white-text">{{display}}</span><div><span class="user-num">{{userNum}}</span> <i class="material-icons">perm_identity</i></div>
                                         <p>{{roomDesc}}</p>
                                     </div>
                                     <div class="card-action">
-                                        <a href=/{{type}} class="light-blue-text text-accent-4">Join Room</a>
+                                        <a href=/{{type}} class="white-text">Join Room</a>
                                     </div>
                                 </div>
                             </div>
@@ -61,8 +61,8 @@
                 {{#each privateRooms}}
                     {{#if private}}
                         {{#if isAllowedInPrivateRoom name}}
-                            <div class="col m4 l2 light-blue">
-                                <div class="card hoverable">
+                            <div class="col m4 l2">
+                                <div class="card hoverable light-blue white-text">
                                     <div class="card-image waves-effect waves-block waves-light">
                                         <a href=/private/{{name}}>
                                         <img src='/notes.png'>
@@ -71,12 +71,12 @@
                                         </figcaption>
                                         </a>
                                     </div>
-                                    <div class="card-content">
-                                        <span class="card-title grey-text text-darken-4">{{displayName}}</span><div><span class="user-num">{{userPrivateNum}}</span> <i class="material-icons">perm_identity</i></div>
+                                    <div class="card-content" style="overflow-x: hidden;">
+                                        <span class="card-title white-text">{{displayName}}</span><div><span class="user-num">{{userPrivateNum}}</span> <i class="material-icons">perm_identity</i></div>
                                         <p>{{roomDesc}}</p>
                                     </div>
                                     <div class="card-action">
-                                        <a href=/private/{{name}} class="light-blue-text text-accent-4">Join Room</a>
+                                        <a href=/private/{{name}} class="white-text">Join Room</a>
                                     </div>
                                 </div>
                             </div>

app/client/templates/manageSongs.html

@@ -38,7 +38,7 @@
                             <tr>
                                 <th align="left" scope="row">{{title}}</th>
                                 <td align="left">{{artist}}</td>
-                                <td align="left"><a href="https://www.youtube.com/watch?v={{id}}" target="_blank">{{id}}</a></td>
+                                <td align="left"><a href="https://www.youtube.com/watch?v={{id}}" target="_blank" class="white-text">{{id}}</a></td>
                                 <td align="left">{{mid}}</td>
                                 <td align="left">{{genres}}</td>
                                 <td align="left">{{likes}}</td>
@@ -95,7 +95,7 @@
             <div class="row">
                 <h4 class="center-align">Image Preview</h4>
                 <img id="song-preview"
-                     onerror="this.src='http://static.boredpanda.com/blog/wp-content/uploads/2014/04/amazing-fox-photos-182.jpg'"
+                     onerror="this.src='/notes.png'"
                      class="center-block" src="{{song_image}}"/>
             </div>
             <div class="row">

app/client/templates/manageStation.html

@@ -129,7 +129,7 @@
             <div class="row">
                 <h4 class="center-align">Image Preview</h4>
                 <img id="song-preview"
-                     onerror="this.src='http://static.boredpanda.com/blog/wp-content/uploads/2014/04/amazing-fox-photos-182.jpg'"
+                     onerror="this.src='/notes.png'"
                      class="center-block" src="{{song_image}}"/>
             </div>
             <div class="row">

app/client/templates/playlist.html

@@ -6,7 +6,7 @@
     <ul id="up-next">
         {{#each nextSong}}
             <p style="margin: -20px 0 0 15px; font-weight: 300;">Up Next</p>
-            <li class="pl-item" style="color: rgb(107, 197, 164) !important;">
+            <li class="pl-item" style="color: rgb(3, 169, 244) !important;">
                 <img src={{img}} style="width: 80px; float: left; margin: 0 10px 10px 0;">
                 <p style="float:right; margin-top: -20px;">{{formatTime duration}}</p>
                 <p class="pl-title" style="font-size: 1.2em">{{title}}</p>

app/client/templates/privateRoom.html

@@ -30,22 +30,18 @@
                     </div>
                 </div>
                 <div class="col s12 m10 l8 offset-l2 offset-m1">
-                    <div class="row">
-                        <div class="col s12 m12 l8">
-                            <h4 id="time-display"><span id="time-elapsed"></span> / <span id="time-total"></span></h4>
-                            <h3>{{{title}}}</h3>
-                            <div class="row">
-                                <form action="#" class="left col s4 m4 l4">
-                                    <p class="range-field" style="margin-top: 0">
-                                        <input type="range" id="volume_slider" min="0" max="100"/>
-                                    </p>
-                                </form>
-                            </div>
-                            <div class="seeker-bar-container white" id="preview-progress">
-                                <div class="seeker-bar light-blue" style="width: 0%"></div>
-                            </div>
-                        </div>
-                    </div>
+                  <h4 id="time-display"><span id="time-elapsed"></span> / <span id="time-total"></span></h4>
+                  <h3>{{{title}}}</h3>
+                  <div class="row">
+                      <form action="#" class="left col s4 m4 l4">
+                          <p class="range-field" style="margin-top: 0">
+                              <input type="range" id="volume_slider" min="0" max="100"/>
+                          </p>
+                      </form>
+                  </div>
+                  <div class="seeker-bar-container white" id="preview-progress">
+                      <div class="seeker-bar light-blue" style="width: 0%"></div>
+                  </div>
                 </div>
             </div>
         </div>
@@ -144,7 +140,7 @@
     </div>
 
     <!--room controls-->
-    <ul id='control-dropdown' style="background-color: #00bfa5 !important; display: none">
+    <ul id='control-dropdown' style="background-color: rgb(3, 169, 244) !important; display: none">
         {{#if playing}}
             <li><a id="pause"><i class="material-icons">pause</i></a></li>
         {{else}}

app/client/templates/queues.html

@@ -24,7 +24,7 @@
                             <tr>
                                 <th align="left" scope="row">{{title}}</th>
                                 <td align="left">{{artist}}</td>
-                                <td align="left"><a href="https://www.youtube.com/watch?v={{id}}" target="_blank">{{id}}</a></td>
+                                <td align="left"><a href="https://www.youtube.com/watch?v={{id}}" target="_blank" class="white-text">{{id}}</a></td>
                                 <td align="left">{{mid}}</td>
                                 <td align="left">{{genres}}</td>
                                 <td class="table-right-td">
@@ -81,7 +81,7 @@
             </div>
             <div class="row">
                 <h4 class="center-align">Image Preview</h4>
-                <img id="song-preview" onerror="this.src='http://static.boredpanda.com/blog/wp-content/uploads/2014/04/amazing-fox-photos-182.jpg'" class="center-block" src="{{song_image}}"/>
+                <img id="song-preview" onerror="this.src='/notes.png'" class="center-block" src="{{song_image}}"/>
             </div>
             <div class="row">
                 <h4 class="center-align">Edit Info</h4>

app/client/templates/room.html

@@ -100,7 +100,7 @@
         </ul>
     </div>
     <!--Admin room controls-->
-    <ul id='admin-dropdown' style="background-color: #26a69a !important; display: none">
+    <ul id='admin-dropdown' style="background-color: rgb(3, 169, 244) !important; display: none">
         <li><a id="pause"><i class="material-icons">pause</i></a></li>
         <li><a id="skip"><i class="material-icons">skip_next</i></a></li>
         <li><a id="shuffle"><i class="material-icons">shuffle</i></a></li>

app/server/server.js

@@ -4,7 +4,7 @@ Meteor.startup(function () {
     });
     Avatar.setOptions({
         fallbackType: "initials",
-        defaultImageUrl: "http://static.boredpanda.com/blog/wp-content/uploads/2014/04/amazing-fox-photos-182.jpg",
+        defaultImageUrl: "/notes.png",
         generateCSS: true,
         imageSizes: {
             'header': 40