improve friendship management

app/views/friend/button.scala.html

@@ -7,13 +7,13 @@
 } else {
 @if(status.pending) {
 @trans.pendingRequest()
-<a class="friend_button" href="@routes.Friend.no(userId)">@trans.cancel()</a>
+<a class="button cancel" href="@routes.Friend.no(userId)">@trans.cancel()</a>
 } else {
 @if(status.requested) {
-<a href="@routes.Friend.yes(userId)">@trans.accept()</a>
-<a href="@routes.Friend.no(userId)">@trans.decline()</a>
+<a class="button accept" href="@routes.Friend.yes(userId)">@trans.accept()</a>
+<a class="decline" href="@routes.Friend.no(userId)">@trans.decline()</a>
 } else {
-<a href="@routes.Friend.yes(userId)">@trans.addFriend()</a>
+<a class="button request" href="@routes.Friend.yes(userId)">@trans.addFriend()</a>
 }
 }
 }

app/views/friend/quickRequests.scala.html

@@ -3,18 +3,15 @@
 @defining(friendRequesters) { users =>
 
 @if(users.nonEmpty) {
-<div class="quick_requests">
-  <span clas="title">@trans.friendRequests()</span>
-  <table>
-    <tbody>
+<div class="lichess_goodies">
+  <div id="quick_requests" class="box">
+    <strong clas="title">@trans.friendRequests()</strong>
+    <ul>
       @users.map { id =>
-      <tr>
-        <td>@userIdLink(id.some)</td>
-        <td>@friend.button(id)</td>
-      </tr>
+      <li>@userIdLink(id.some)</li>
       }
-    </tbody>
-  </table>
+    </ul>
+  </div>
 </div>
 }
 }

app/views/user/opponents.scala.html

@@ -5,7 +5,7 @@
 @user.layout(title = title) {
 <div id="friend" class="content_box friend_box no_padding">
   <h1>@userLink(u, withOnline = false) @trans.favoriteOpponents()</h1>
-  <table class="slist">
+  <table class="slist best_opponents">
     @if(sugs.size > 0) {
     <tbody class="infinitescroll">
       @sugs.map { sug =>

app/views/user/show.scala.html

@@ -77,6 +77,9 @@ evenMoreCss = evenMoreCss) {
         }
       </div>
       }
+      @if(ctx.isAuth && !ctx.is(u)) {
+      @friend.button(u.id)
+      }
       <div class="stats">
         <p class="numbers">
           @trans.nbWins(strong(u.nbWinsH)),

public/javascripts/big.js

@@ -310,7 +310,7 @@ var lichess_sri = Math.random().toString(36).substring(5); // 8 chars
     $('#friend_box').friends();
 
     $('#lichess').on('click', 'div.friend_button a', function() {
-      var $a = $(this).text('...');
+      var $a = $(this).css('opacity', 0.2);
       $.ajax({
         url: $a.attr('href'),
         type: 'post',

public/stylesheets/common.css

@@ -141,7 +141,6 @@ div.footer div.right {
   padding: 0.4em 1em;
   text-decoration: none;
   cursor: pointer;
-  font-size: 1.1em;
 }
 
 a.easy_button {
@@ -333,11 +332,13 @@ div.header div.side_menu a.active {
 #reconnecting {
   display: none;
   font-style: italic;
-  border-left: 1px solid #ccc;
 }
 #nb_connected_players {
   float: left;
   color: #999;
+}
+#nb_connected_players,
+#reconnecting {
   border-left: 1px solid #ccc;
 }
 a.goto_nav {
@@ -567,6 +568,13 @@ a#sound_state.unavailable {
   right: 0.3em;
 }
 
+#quick_requests {
+  margin-top: 2em;
+}
+#quick_requests a {
+  margin: 5px 0;
+}
+
 #friend_box {
   position: fixed;
   bottom: 0px;
@@ -723,7 +731,7 @@ table.slist thead {
 div.pagination span.current,
 #top span.new_messages.unread,
 div.hooks td.action:hover,
-div.hooks table.empty_table tr:hover,
+div.hooks table.empty tr:hover,
 div.progressbar.flashy div,
 .button.strong:hover,
 div.locale_menu a.active,

public/stylesheets/dark.css

@@ -37,6 +37,7 @@ body.dark div.content_box
 
 body.dark #top,
 body.dark #nb_connected_players,
+body.dark #reconnecting,
 body.dark #connecting,
 body.dark div.lichess_chat_top,
 body.dark div.lichess_chat .nano,

public/stylesheets/user-list.css

@@ -56,3 +56,9 @@ div.user_lists .users a.send {
 div.user_lists .users li:hover a.send {
   color: #888;
 }
+table.best_opponents a.request {
+  opacity: 0;
+}
+table.best_opponents tr:hover a.request {
+  opacity: 1;
+}

public/stylesheets/user-show.css

@@ -112,3 +112,6 @@ div.user_show .mod_zone strong {
   display: block;
   margin-top: 0.5em;
 }
+div.user_show div.friend_button {
+  margin-top: 24px;
+}

todo

@@ -66,7 +66,6 @@ from MoralIntentions email:
 - The possibility of team matches (with solutions for players who are in several teams), where the team leader has to choose the board order, where the team results are shown and where the team player (who has played all of the games of the match) with the highest Percentage Score gets crowned Player of the Match of team "A".  
 safari has high bounce rate
 send message to sockets when a friendship is created or revoked
-translation bar colors in dark mode
 convert background board css to single image (needs gimp)
 
 DEPLOY p21