restyled station box

app/app.css

@@ -300,30 +300,41 @@ footer a:hover{
   color: white;
   font-weight: 600;
 }
-#dashboard .station{
-  width: 150px;
-  height: 150px;
-  background-color: rgba(255,255,255,0.7);
-  border-radius: 100px;
-  margin-top: 100px;
-  margin-left: 300px;
+#dashboard .logout{
+  margin-left: 20px;
   cursor: pointer;
 }
-#dashboard .station h3{
-  text-align: center;
+#dashboard .station{
+  background-color: rgba(255,255,255,0.3);
+  height: 250px;
   color: white;
+  margin-top: 1em;
+}
+#dashboard .station .station-name{
+  text-align: center;
+  font-size: 3em;
   font-weight: 600;
-  font-size: 3.5em;
-  line-height: 150px;
 }
 #dashboard .station .song-info{
-  color: darkcyan;
-  margin-left: 70px;
+  text-align: center;
 }
 #dashboard .station .song-title{
-  font-size: 2em;
-  font-weight: 900;
+  font-size: 2.5em;
 }
 #dashboard .station .song-artist{
-  font-size: 1.5em;
+  font-size: 2em;
+}
+#dashboard .station .button-tunein{
+  outline: 0;
+  border: 0;
+  border: 2px solid white;
+  padding: 10px 15px;
+  border-radius: 3px;
+  width: 250px;
+  cursor: pointer;
+  font-size: 18px;
+  color: #fff;
+  background-color: transparent;
+  display: block;
+  margin: 0 auto;
 }

app/app.html

@@ -81,12 +81,19 @@
 
 <template name="dashboard">
   <div class="landing">
-    <div id="name-container"> <h1>{{currentUser.username}}{{currentUser.services.facebook.first_name}} {{currentUser.services.facebook.last_name}}{{currentUser.services.github.username}}</h1></div>
-    <div class="station">
-      <h3>EDM</h3>
-      <div class="song-info"></div>
+    <div id="name-container"> <h1>{{currentUser.username}}{{currentUser.services.facebook.first_name}} {{currentUser.services.facebook.last_name}}{{currentUser.services.github.username}}<i class="fa fa-power-off logout" tooltip="Logout"></i></h1></div>
+    <div class="row">
+      <div class="col-md-4">
+        <div class="station">
+          <p class="station-name">EDM</p>
+          <div class="song-info">
+            <p class="song-title">Immortals</p>
+            <p class="song-artist">Fall Out Boy</p>
+          </div>
+          <button class="button-tunein">Tune in to station!</button>
+        </div>
+      </div>
     </div>
-    <a href="#" class="logout">Logout</a>
 
     <ul class="bg-bubbles">
     	<li></li>

app/app.js

@@ -61,15 +61,6 @@ if (Meteor.isClient) {
     "click .logout": function(e){
         e.preventDefault();
         Meteor.logout();
-    },
-
-    "click .station": function() {
-      $(".station").css({
-        "width": "250px",
-        "height": "250px",
-        "border-radius": "150px",
-      })
-      $(".station .song-info").html("<h6 class='song-title'>Immortals</h6><p class='song-artist'>Fall Out Boy</p>")
     }
   })
 }