From 9f19b8e8f9eecafb90d447694eaa0fd29bbea4be Mon Sep 17 00:00:00 2001
From: hom3mad3 <8156337+hom3mad3@users.noreply.github.com>
Date: Mon, 27 Jan 2025 12:52:22 +0100
Subject: [PATCH] a4-modals: adapt styles to changes in a4

---
 .../assets/scss/components/_a4-comments.scss  |  1 +
 .../assets/scss/components/_a4-modal.scss     | 58 +++++++++++++++++++
 adhocracy-plus/assets/scss/style.scss         |  1 +
 .../a4_candy_contrib/item_detail.html         |  2 +-
 4 files changed, 61 insertions(+), 1 deletion(-)
 create mode 100644 adhocracy-plus/assets/scss/components/_a4-modal.scss

diff --git a/adhocracy-plus/assets/scss/components/_a4-comments.scss b/adhocracy-plus/assets/scss/components/_a4-comments.scss
index 334aba048..6078182f1 100644
--- a/adhocracy-plus/assets/scss/components/_a4-comments.scss
+++ b/adhocracy-plus/assets/scss/components/_a4-comments.scss
@@ -143,6 +143,7 @@
 }
 
 .a4-comments__action-bar {
+    display: flex;
     padding: 0.5 * $spacer 0;
 }
 
diff --git a/adhocracy-plus/assets/scss/components/_a4-modal.scss b/adhocracy-plus/assets/scss/components/_a4-modal.scss
new file mode 100644
index 000000000..fdc50550f
--- /dev/null
+++ b/adhocracy-plus/assets/scss/components/_a4-modal.scss
@@ -0,0 +1,58 @@
+.a4-modal {
+    border: none;
+    box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.15);
+    padding: 2em 1.125em;
+
+    &::backdrop {
+        background-color: rgba(0, 0, 0, 0.5);
+    }
+
+    @media (min-width: $breakpoint) {
+        min-width: 500px;
+        max-width: 685px;
+    }
+}
+
+.a4-modal__toggle {
+    padding: 0.3em 0.6em;
+}
+
+.a4-modal__close {
+    position: absolute;
+    right: 1em;
+    top: 1em;
+    padding: 0;
+}
+
+.a4-modal__title {
+    margin: unset;
+    line-height: 1.5;
+}
+
+.a4-modal__description {
+    margin-bottom: 1em;
+}
+
+.a4-modal__footer {
+    padding-top: 1em;
+    display: flex;
+    justify-content: end;
+}
+
+.a4-modal__submit,
+.a4-url-modal__button {
+    @extend .btn;
+    @extend .btn--default; 
+}
+
+.a4-modal__cancel {
+    @extend .btn;
+    @extend .btn--light; 
+    margin-right: 1.5em !important;
+}
+
+.a4-modal__toggle-wrapper--no-icon {
+    button i {
+        display: none!important;
+    }
+}
\ No newline at end of file
diff --git a/adhocracy-plus/assets/scss/style.scss b/adhocracy-plus/assets/scss/style.scss
index 14af2779c..8b4faa2fc 100644
--- a/adhocracy-plus/assets/scss/style.scss
+++ b/adhocracy-plus/assets/scss/style.scss
@@ -61,6 +61,7 @@
 @import "components/a4-char_counter";
 @import "components/a4-comments";
 @import "components/a4-editpoll";
+@import "components/a4-modal";
 @import "components/a4-poll";
 @import "components/a4-termsofuse";
 @import "components/a4-textarea_with_counter";
diff --git a/apps/contrib/templates/a4_candy_contrib/item_detail.html b/apps/contrib/templates/a4_candy_contrib/item_detail.html
index 024fb2142..5b8c641c4 100644
--- a/apps/contrib/templates/a4_candy_contrib/item_detail.html
+++ b/apps/contrib/templates/a4_candy_contrib/item_detail.html
@@ -123,7 +123,7 @@ <h1 class="item-detail__title">{{ object.name }}</h1>
                                     {% block dropdown_items %}{% endblock %}
                                     <li>
                                         {% translate 'Report' as report_text %}
-                                        {% react_reports object text=report_text class='dropdown-item' %}
+                                        {% react_reports object text=report_text class='a4-modal__toggle-wrapper--no-icon' %}
                                     </li>
                                 </div>
                             </div>