a4-modals: adapt styles to changes in a4

adhocracy-plus/assets/scss/components/_a4-comments.scss

@@ -143,6 +143,7 @@
 }
 
 .a4-comments__action-bar {
+    display: flex;
     padding: 0.5 * $spacer 0;
 }
 

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;
+    }
+}

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";

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>