From ca2aaba53a848b3e714b5fe2f4c39f40b8f4d599 Mon Sep 17 00:00:00 2001
From: Tobias Werth <werth@cs.fau.de>
Date: Sun, 18 Feb 2024 11:19:27 +0100
Subject: [PATCH] Add more styling to the 'rendered preview' badge.

---
 webapp/public/style_domjudge.css                      | 11 +++++++++++
 .../jury/partials/clarification_form.html.twig        |  2 +-
 webapp/templates/team/clarification_add.html.twig     |  2 +-
 .../templates/team/clarification_add_modal.html.twig  |  2 +-
 .../team/partials/clarification_content.html.twig     |  2 +-
 5 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/webapp/public/style_domjudge.css b/webapp/public/style_domjudge.css
index 22e03c303d..b019e8fa91 100644
--- a/webapp/public/style_domjudge.css
+++ b/webapp/public/style_domjudge.css
@@ -635,3 +635,14 @@ blockquote {
     margin-right: 2em;
     font-weight: normal;
 }
+
+.rendered-preview-badge {
+    position: relative;
+    float: right;
+    background-color: Gainsboro;
+    padding-left: 6px;
+    padding-right: 6px;
+    border-radius: 4px;
+    font-style: italic;
+    font-size: smaller;
+}
diff --git a/webapp/templates/jury/partials/clarification_form.html.twig b/webapp/templates/jury/partials/clarification_form.html.twig
index fac7ac4897..ca2423d258 100644
--- a/webapp/templates/jury/partials/clarification_form.html.twig
+++ b/webapp/templates/jury/partials/clarification_form.html.twig
@@ -5,7 +5,7 @@
 <div class="mb-3">
     <div class="card">
         <div class="card-body">
-            <label class="form-label text-muted"><small>rendered preview</small></label>
+            <label class="rendered-preview-badge">rendered preview</label>
             <div id="messagepreview">Start typing to see a preview of your message</div>
         </div>
     </div>
diff --git a/webapp/templates/team/clarification_add.html.twig b/webapp/templates/team/clarification_add.html.twig
index 5b8ebf6255..0e77a7e476 100644
--- a/webapp/templates/team/clarification_add.html.twig
+++ b/webapp/templates/team/clarification_add.html.twig
@@ -14,7 +14,7 @@
             <div class="mb-3">
                 <div class="card">
                     <div class="card-body">
-                        <label class="form-label text-muted"><small>rendered preview</small></label>
+                        <label class="rendered-preview-badge">rendered preview</label>
                         <div id="messagepreview">Start typing to see a preview of your message</div>
                     </div>
                 </div>
diff --git a/webapp/templates/team/clarification_add_modal.html.twig b/webapp/templates/team/clarification_add_modal.html.twig
index a6853507a5..ec9547a3f3 100644
--- a/webapp/templates/team/clarification_add_modal.html.twig
+++ b/webapp/templates/team/clarification_add_modal.html.twig
@@ -15,7 +15,7 @@
                     <div class="mb-3">
                         <div class="card">
                             <div class="card-body">
-                                <label class="form-label text-muted"><small>rendered preview</small></label>
+                                <label class="rendered-preview-badge">rendered preview</label>
                                 <div id="messagepreview">Start typing to see a preview of your message</div>
                             </div>
                         </div>
diff --git a/webapp/templates/team/partials/clarification_content.html.twig b/webapp/templates/team/partials/clarification_content.html.twig
index 65695c8afa..9536f8e70e 100644
--- a/webapp/templates/team/partials/clarification_content.html.twig
+++ b/webapp/templates/team/partials/clarification_content.html.twig
@@ -16,7 +16,7 @@
         <div class="mb-3">
             <div class="card">
                 <div class="card-body">
-                    <label class="form-label text-muted"><small>rendered preview</small></label>
+                    <label class="rendered-preview-badge">rendered preview</label>
                     <div id="messagepreview">Start typing to see a preview of your message</div>
                 </div>
             </div>