From d7b46735acc24e08e4e6d9f8b45913ab74365521 Mon Sep 17 00:00:00 2001
From: Eliseu Amaro <mail@eliseuama.ro>
Date: Fri, 31 Dec 2021 17:02:18 +0000
Subject: [PATCH] [CARDS][Note] Removing unnecessary elements on replies block,
 and fixing gaps between note-info and the note border itself

---
 .../templates/reply/add_reply.html.twig        | 18 ------------------
 .../assets/default_theme/css/pages/feeds.css   | 17 ++++++++++-------
 templates/cards/note/view.html.twig            |  5 ++---
 3 files changed, 12 insertions(+), 28 deletions(-)
 delete mode 100644 components/Conversation/templates/reply/add_reply.html.twig

diff --git a/components/Conversation/templates/reply/add_reply.html.twig b/components/Conversation/templates/reply/add_reply.html.twig
deleted file mode 100644
index 293b3da428..0000000000
--- a/components/Conversation/templates/reply/add_reply.html.twig
+++ /dev/null
@@ -1,18 +0,0 @@
-{% extends 'stdgrid.html.twig' %}
-{% import "/cards/note/view.html.twig" as noteView %}
-
-{% block title %}{{ 'Reply to ' | trans }}{{ note.getActorNickname() }}{{ '\'s note.' | trans }}{% endblock %}
-
-{% block stylesheets %}
-    {{ parent() }}
-    <link rel="stylesheet" href="{{ asset('assets/default_theme/css/pages/feeds.css') }}" type="text/css">
-{% endblock stylesheets %}
-
-{% block body %}
-    {{ parent() }}
-    <div class="page">
-        <div class="main">
-            {{ noteView.macro_note_minimal(note) }}
-        </div>
-    </div>
-{% endblock body %}
diff --git a/public/assets/default_theme/css/pages/feeds.css b/public/assets/default_theme/css/pages/feeds.css
index 3e3701a346..415ef4a108 100644
--- a/public/assets/default_theme/css/pages/feeds.css
+++ b/public/assets/default_theme/css/pages/feeds.css
@@ -14,9 +14,6 @@
 .notes hr {
     margin-top: var(--s);
 }
-article[id^="note-anchor-"]:target {
-    border: 2px solid var(--accent) !important;
-}
 .note-wrapper {
     width: 100%;
     height: inherit;
@@ -42,12 +39,14 @@ article[id^="note-anchor-"]:target {
     margin-top: var(--s);
 }
 .h-entry:not(embed) {
-    border: 2px solid var(--border) !important;
-    box-shadow: var(--shadow);
+    box-shadow: inset 0 0 0 2px var(--border);
 }
 .h-entry img {
     background: repeating-conic-gradient(#ffffff66 0deg 90deg, #ffffff33 0deg 180deg) 0 0/40px 40px round;
 }
+.h-entry[id^="note-anchor-"]:target {
+    border: 2px solid var(--accent) !important;
+}
 .embed {
     display: flex;
     flex-wrap: wrap;
@@ -102,18 +101,22 @@ article[id^="note-anchor-"]:target {
     padding: 0 var(--s) 0 var(--s);
     border-left: 1px solid var(--border);
 }
-.replies > strong > small {
+.note-replies-start {
+    font-size: 0.937rem;
+    font-weight: 700;
     opacity: 0.5;
 }
 .note-info,
 embed header {
     display: flex;
     border-bottom: unset;
-    border-radius: 0 var(--s) 0 0;
+    border-radius: 0 2px 0 0;
     line-height: initial;
     padding: 8px var(--s) 8px 0;
 }
 .note-info {
+    margin-top: 2px;
+    margin-right: 2px;
     background: var(--gradient-backwards);
 }
 .note-info > * {
diff --git a/templates/cards/note/view.html.twig b/templates/cards/note/view.html.twig
index 551284e541..534550e41e 100644
--- a/templates/cards/note/view.html.twig
+++ b/templates/cards/note/view.html.twig
@@ -35,9 +35,8 @@
 
 {% block note_replies %}
     {% if replies is defined and replies is not empty %}
-        <div class="u-in-reply-to replies" tabindex="0"
-             title="{{ 'Begin replies to ' | trans }}{{ nickname }}{{ '\'s note!' | trans }}">
-            <strong><small>{{ 'Replies to ' | trans }}{{ nickname }}</small></strong>
+        <div class="u-in-reply-to replies">
+            <span class="note-replies-start" tabindex="0">{{ 'Replies to ' | trans }}{{ nickname }}{{ '\'s note' | trans }}</span>
             {% for conversation in replies %}
                 {{ _self.macro_note(conversation['note'], conversation['replies']) }}
                 <hr tabindex="0" title="{{ 'End of reply' | trans }}">