From c612fe6df5170a71dcd5f126e48c47743fa31578 Mon Sep 17 00:00:00 2001
From: Eliseu Amaro <mail@eliseuama.ro>
Date: Mon, 6 Sep 2021 20:51:12 +0100
Subject: [PATCH] [PLUGINS][Reply][CSS] Help text added. Styling reply page
 done.

---
 plugins/Reply/Controller/Reply.php |  8 +++++++-
 plugins/Reply/Reply.php            |  2 ++
 public/assets/css/base.css         | 32 ++++++++++++++++++++++++------
 3 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/plugins/Reply/Controller/Reply.php b/plugins/Reply/Controller/Reply.php
index 3ac34bedb9..3ecd09e95b 100644
--- a/plugins/Reply/Controller/Reply.php
+++ b/plugins/Reply/Controller/Reply.php
@@ -56,7 +56,13 @@ class Reply extends Controller
         }
 
         $form = Form::create([
-            ['content',     TextareaType::class, ['label' => ' ']],
+
+            ['content',     TextareaType::class, [
+                    'label'       => _m('Reply'),
+                    'label_attr' => ['class' => 'section-form-label'],
+                    'help'        => _m('Please input your reply.'),
+                ]
+            ],
             ['attachments', FileType::class,     ['label' => ' ', 'multiple' => true, 'required' => false]],
             ['replyform',   SubmitType::class,   ['label' => _m('Submit')]],
         ]);
diff --git a/plugins/Reply/Reply.php b/plugins/Reply/Reply.php
index e975944397..95f98d219f 100644
--- a/plugins/Reply/Reply.php
+++ b/plugins/Reply/Reply.php
@@ -31,6 +31,7 @@ use Plugin\Reply\Controller\Reply as ReplyController;
 use Symfony\Component\Form\Extension\Core\Type\HiddenType;
 use Symfony\Component\Form\Extension\Core\Type\SubmitType;
 use Symfony\Component\HttpFoundation\Request;
+use function App\Core\I18n\_m;
 
 class Reply extends NoteHandlerPlugin
 {
@@ -57,6 +58,7 @@ class Reply extends NoteHandlerPlugin
             ['content',     HiddenType::class, ['label' => ' ', 'required' => false]],
             ['attachments', HiddenType::class, ['label' => ' ', 'required' => false]],
             ['note_id',     HiddenType::class, ['data' => $note->getId()]],
+
             ['reply',       SubmitType::class,
                 [
                     'label' => ' ',
diff --git a/public/assets/css/base.css b/public/assets/css/base.css
index 0b245c860d..9dda316fb3 100644
--- a/public/assets/css/base.css
+++ b/public/assets/css/base.css
@@ -51,7 +51,7 @@
         --bg1: #F4F2E8;
         --bg2: #B5BBB4;
         --bg3: #6C766B;
-        --bg-button: #C0C5BC66 !important;
+        --bg-button: #F4F2E866 !important;
 
         --translucent: #F4F2E866;
         --white: #002B36;
@@ -215,6 +215,22 @@ summary:hover .icon-details-open {
 }
 
 /* NOTES */
+#replyform {
+    padding: var(--unit-size);
+    margin-top: var(--unit-size);
+    background-color: var(--translucent);
+    border-radius: var(--unit-size);
+    display: flex;
+    flex-direction: column;
+    font-size: var(--small-size);
+}
+#replyform textarea {
+    width: 100%;
+    resize: vertical;
+    margin-top: var(--unit-size);
+    padding: var(--unit-size);
+}
+
 .h-entry {
     margin-top: var(--unit-size);
 }
@@ -230,6 +246,12 @@ summary:hover .icon-details-open {
     animation-timing-function: ease-in-out;
 }
 
+.h-entry .embed header {
+    padding: var(--unit-size);
+}
+.h-entry .embed .p-summary {
+    padding: var(--unit-size);
+}
 .h-entry,
 .note {
     background-color: var(--translucent);
@@ -412,10 +434,6 @@ summary:hover .icon-details-open {
     font-size: var(--small-size);
 }
 
-.section-form-scope {
-    margin-left: 5px;
-}
-
 .section-form-options {
     display: block !important;
     margin-bottom: var(--unit-size);
@@ -453,9 +471,10 @@ input {
     padding: 2px 8px;
     border: 2px solid var(--bg2) !important;
     border-radius: var(--unit-size) !important;
-    background-color: var(--translucent) !important;
+    background-color: var(--translucent);
 }
 button {
+    background: var(--bg-button);
     padding: 5px 10px;
 }
 
@@ -686,6 +705,7 @@ input[type=file] {
         background-position: center;
         background-repeat: no-repeat;
         background-size: 100% 100%;
+        z-index: auto;
     }
 
     @media (prefers-color-scheme: dark) {