From 4ae389fb7a782f3a4dbed84fd123ccc734056d14 Mon Sep 17 00:00:00 2001
From: Bastard Operator <bofh@nogafam.es>
Date: Mon, 25 Jan 2021 01:06:04 +0100
Subject: [PATCH] UI improvements on /matches page

* Added separators for items
* Added final separator with different color (to separate different states of accounts)
---
 src/routes/_pages/matches/index.html |  4 +--
 src/scss/themes/ozark.scss           | 39 ++++++++++++++++++++++++++--
 static/fedilove-no-react.js          |  6 +++++
 3 files changed, 44 insertions(+), 5 deletions(-)

diff --git a/src/routes/_pages/matches/index.html b/src/routes/_pages/matches/index.html
index 21f33896..fd5e1330 100644
--- a/src/routes/_pages/matches/index.html
+++ b/src/routes/_pages/matches/index.html
@@ -12,9 +12,7 @@
       </span>
     </a>
     <div class="account__relationship">
-      <button aria-label="[intl:relAction]" title="[intl:relAction]" class="icon-button active" tabindex="[index]">
-        <i role="img" class="fa fa-user-times fa-fw" aria-hidden="true"></i>
-      </button>
+      <button aria-label="[intl:relAction]" title="[intl:relAction]" class="icon-button active dismiss" tabindex="[index]">X</button>
     </div>
   </div>
 </div>
diff --git a/src/scss/themes/ozark.scss b/src/scss/themes/ozark.scss
index 1a76bdad..04c3943c 100644
--- a/src/scss/themes/ozark.scss
+++ b/src/scss/themes/ozark.scss
@@ -503,8 +503,29 @@ div.main-content.meet, div.main-content.account {
 
 div.main-content.matches {
 
+  div#manage-matches {
+    background: #fdfdfd;
+    padding: 1em .2em;
+    border-radius: .4em;
+    height: 100vh;
+  }
+
+  div.accsep {
+    height: 2px;
+    background: #b7b6b638;
+    margin: 1em .5em;
+  }
+  div.accsep-close {
+    height: .4em;
+    width: 30%;
+    background: #ff0054d4;
+    margin: 2em auto;
+    border-radius: 3em;
+    border-top: .2em solid #eeeeeed4;
+    border-bottom: .2em solid #d50449d4;
+  }
+
   div.account {
-    margin: 1em 0;
 
     div.account__wrapper {
       display: flex;
@@ -518,15 +539,29 @@ div.main-content.matches {
         width: 100%;
         max-width: 10em;
         padding-left: 1em;
+        text-decoration: none;
+
         span.display-name {
           margin: auto 0;
+          span.display-name__account {
+            color: gray;
+            text-decoration: none;
+            font-size: .9em;
+          }
         }
       }
       div.account__relationship {
         width: 100%;
         button {
           position: absolute;
-          right: 0;
+          right: 1em;
+        }
+        button.dismiss {
+          color: red;
+          border-radius: 100%;
+          width: 2em;
+          height: 2em;
+          padding: 0;
         }
       }
     }
diff --git a/static/fedilove-no-react.js b/static/fedilove-no-react.js
index 4e2d5c26..b696c1dd 100644
--- a/static/fedilove-no-react.js
+++ b/static/fedilove-no-react.js
@@ -705,6 +705,7 @@ function fedilove_customization() {
                 $('#manage-matches').html('');
                 filledOnce = true;
             }
+            var i = 0;
             for (var account of accounts) {
                 var acct = account.acct;
                 if (acct.charAt(0) !== '@')
@@ -719,6 +720,11 @@ function fedilove_customization() {
                 htm = htm.replace(/\[userHandle\]/g,		acct);
                 htm = htm.replace(/\[displayName\]/g,		dname);
                 $('#manage-matches').append(htm);
+                if (i < accounts.length -1)
+                    $('#manage-matches').append('<div class="accsep"></div>');
+                else
+                    $('#manage-matches').append('<div class="accsep-close"></div>');
+                i++;
             }
         };
         fediloveMastodon.API.getRequestsToFollowMe(function(data) {