redesigned profile page

app/client/app.css

@@ -1068,3 +1068,13 @@ input[type="checkbox"]:checked + #two-label:after {
 .scroll-fix{
     margin-right: 20px;
 }
+
+.profile-card{
+    min-width: 300px;
+    max-height: 500px;
+}
+
+.profile-card-song{
+    overflow-y: scroll;
+}
+

app/client/templates/profile.html

@@ -3,14 +3,50 @@
     {{> header}}
     {{#if loaded}}
         <!--{{> avatar userId=profileUserId shape="circle" class="profile-img" initials=initials}}-->
-        <h1 class="black-text thin">{{username}}</h1>
-        <div class="card blue-grey darken-1">
-            <div class="card-content white-text">
-                <span class="card-title">User Info</span>
-                <p>Name: {{real_name}}</p>
-                <p>Username: {{username}}</p>
-                <p>First Joined: {{first_joined}}</p>
-                <p>Rank: {{rank}}</p>
+        <h1 id="profile-name" class="black-text thin">{{username}}</h1>
+        <div class="row">
+            <div class="col s12 m6 l4">
+                <div class="card blue-grey darken-1 profile-card">
+                    <div class="card-content white-text">
+                        <span class="card-title">User Info</span>
+                        <p>Name: {{real_name}}</p>
+                        <p>Username: {{username}}</p>
+                        <p>First Joined: {{first_joined}}</p>
+                        <p>Rank: {{rank}}</p>
+                    </div>
+                </div>
+            </div>
+            <div class="col s12 m6 l4">
+                <div class="card teal accent-3 profile-card">
+                    <div class="card-content white-text">
+                        <span class="card-title">Liked Songs</span>
+                        {{#each likedSongs}}
+                            <div class="profile-card-song">
+                                <div class="section">
+                                    <h5>Title</h5>
+                                    <p>Artist</p>
+                                </div>
+                                <div class="divider"></div>
+                            </div>
+                        {{/each}}
+                    </div>
+                </div>
+            </div>
+            <div class="col s12 m6 l4">
+                <div class="card red darken-2 profile-card">
+                    <div class="card-content white-text">
+                        <span class="card-title">Disliked Songs</span>
+                        {{#each dislikedSongs}}
+                            <div class="profile-card-song">
+                                <div class="section">
+                                    <h5>Title</h5>
+                                    <p>Artist</p>
+                                </div>
+                                <div class="divider"></div>
+                            </div>
+                        {{/each}}
+                    </div>
+                </div>
             </div>
         </div>
     {{else}}