Vanishing messages and profile design improvements

app/public/style.css

@@ -154,11 +154,6 @@ h2 {
   padding-left: 10px;
 }
 
-.content-header {
-  font-weight: bold;
-  padding-bottom: 5px;
-}
-
 .wall {
   padding: 14px;
   flex-grow: 1;
@@ -167,11 +162,11 @@ h2 {
 
 .friends-communities {
   min-width: 200px;
+  max-width: 200px;
   background: #fbb;
   color: #600;
   padding: 14px;
   border-radius: 0 5px 5px 0;
-  flex-grow: 1;
 }
 
 .friends-communities .link-profile-pic {
@@ -179,13 +174,18 @@ h2 {
 }
 
 .vanishing-chat {
+  min-width: 200px;
   max-width: 200px;
   background: #fe7;
   color: #650;
-  padding: 14px;
+  padding: 14px 0;
   border-radius: 5px 0 0 5px;
 }
 
+.column-side-padding {
+  padding: 0 14px;
+}
+
 .vanishing-chat .link-profile-pic {
   border: 1px solid #650;
 }
@@ -285,7 +285,6 @@ h2 {
   margin-bottom: 5px;
   text-decoration: none;
   color: #000;
-  background: none;
   padding: 0;
 }
 
@@ -299,6 +298,25 @@ h2 {
   margin-right: 5px;
 }
 
+.vanishing-button {
+  width: 100%;
+  text-align: left;
+  display: flex;
+  align-items: center;
+  padding: 5px 14px;
+  background: none;
+  color: #000;
+}
+
+.vanishing-button:hover {
+  text-decoration: none;
+  background: #ed6;
+}
+
+.vanishing-button .link-profile-pic {
+  width: 48px;
+}
+
 .compose-post {
   border-radius: 5px;
   border: 1px solid #aaaaaa;

app/views/_posts.ejs

@@ -8,18 +8,14 @@
         </a>
       </div>
       <div class="post-content">
-        <div class="content-header">
-          <a href="<%= profileUrl(post.author) %>" class="no-link-style">
-            <%= post.authorProfile.name %>
-          </a>
-        </div>
-        <div>
-          <% let text = post.content.text.slice(0, 140) %>
-          <% if (post.content.text.length > 140) text += "..." %>
-          <% text.split("\n").map((line, index) => { %>
-            <%- index > 0 ? "<br />" : "" %><%= line %>
-          <% }) %>
-        </div>
+        <a href="<%= profileUrl(post.author) %>" class="no-link-style">
+          <b><%= post.authorProfile.name %></b>
+        </a>
+        <% let text = post.content.text.slice(0, 140) %>
+        <% if (post.content.text.length > 140) text += "..." %>
+        <% text.split("\n").map((line, index) => { %>
+          <%- index > 0 ? "<br />" : "" %><%= line %>
+        <% }) %>
       </div>
     </div>
   <% }) %>

app/views/home.ejs

@@ -7,12 +7,15 @@
       You don't have any vanishing messages yet
     <% } else { %>
       <div class="js-vanishing-messages">
-        <h2>Vanishing Messages</h2>
+        <h2 class="column-side-padding">Vanishing Messages</h2>
         <% vanishingMessages.reverse().map(message => { %>
           <div>
-            <button class="link-block js-vanishing-message" data-key="<%= message.key %>">
+            <button class="vanishing-button js-vanishing-message" data-key="<%= message.key %>">
               <img class="link-profile-pic" src="<%= profileImageUrl(message.value.authorProfile) %>" class="post-profile-pic" />
-              <div><%= message.value.authorProfile.name %></div>
+              <div style="flex-grow: 1;">
+                <%= message.value.authorProfile.name %> <br />
+                <small>👁 new message</small>
+              </div>
             </button>
             <div class="overlay"></div>
             <div class="modal">

app/views/profile.ejs

@@ -1,4 +1,4 @@
-<%- include('_header') %>
+<%- include('_header', { main_class: "screen-center" }) %>
 
 <div class="columns">
   <div class="wall">
@@ -67,7 +67,7 @@
   </div>
 
   <div class="friends-communities">
-    <h2 style="margin-top: 30px">Friends</h2>
+    <h2>Friends</h2>
     <%- include('_friends', { friends: friends.friends }) %>
   </div>
 </div>