Fix summarization UI styles (#86)

Author: glanzel

adhocracy-plus/assets/scss/components/_project_header.scss

@@ -133,13 +133,13 @@
     align-items: center;
     text-align: center;
     padding: 2rem;
-    border: 2px dashed $silver-fog;
+    border: 2px dashed $gray-lightest;
     width: 80%;
     margin: auto;
 }
 
 .btn--summary {
-    border: 2px solid $black;
+    border: 2px solid $gray-lightest;
 }
 
 .summary-text {
@@ -177,12 +177,13 @@
     }
 
     &__header-text {
-        font-size: 1.5rem;
-        font-weight: bold;
+        font-size: $font-size-lg;
+        font-weight: $headings-font-weight;
     }
 
     &__accordion {
         border-top: 0;
+        border-color: $gray-lightest;
     }
 
     &__results-link {
@@ -203,8 +204,8 @@
     }
 
     &__title {
-        font-size: 1.75rem;
-        font-weight: bold;
+        font-size: $font-size-lg;
+        font-weight: $headings-font-weight;
         text-decoration: none !important;
     }
 
@@ -223,6 +224,10 @@
         flex-shrink: 0;
     }
 
+    &__info-icon {
+        font-size: 20px;
+    }
+
     &__arrow-toggle {
         padding-bottom: 0.15em;
         display: flex;
@@ -233,7 +238,7 @@
         width: 90%;
         margin: auto;
         padding: 1rem;
-        border: 1px solid $silver-fog;
+        border: 1px solid $gray-lightest;
         border-radius: 0.375rem;
     }
 
@@ -243,11 +248,23 @@
     }
 
     &__section-container {
-        border-top: 1px solid grey;
+        border-top: 1px solid $gray-lightest;
         margin-top: 0.5em;
         padding-top: 1em;
     }
 
+    hr {
+        border: 0;
+        border-top: 1px solid $gray-lightest;
+        opacity: 1;
+    }
+
+    &__feedback-divider {
+        border: 0;
+        border-top: 1px solid $gray-lightest;
+        opacity: 1;
+    }
+
     &__stats {
         background-color: $liqd-blue;
         font-size: 1.5rem;
@@ -334,7 +351,7 @@
     }
 
     &__container {
-        border-top: 1px solid $silver-fog;
+        border-top: 1px solid $gray-lightest;
         padding-top: 1em;
     }
 
@@ -368,6 +385,7 @@
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
+    color: $print-black;
     flex-wrap: wrap; // erlaubt, dass Label und Button-Gruppe getrennt umbrechen
 }
 
@@ -377,6 +395,10 @@
     white-space: nowrap; // beide Buttons bleiben in einer Zeile
 }
 
+.feedback-btn {
+    color: $print-black;
+}
+
 // Mobile / Tablet behaviour for AI summary elements
 @media (max-width: $breakpoint-md) {
     // Summary-Block auf mobilen Geräten: volle Breite wie Module darunter

apps/projects/templates/a4_candy_projects/_generate_summary_button.html

@@ -1,12 +1,16 @@
 <style>
 .loading-spinner {
     display: none;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
 }
 .htmx-request .hide-when-loading {
     display: none;
 }
 .htmx-request .loading-spinner {
-    display: block !important;
+    display: flex !important;
 }
 </style>
 
@@ -40,10 +44,10 @@
         </div>
     </div>
     <div class="htmx-indicator loading-spinner">
-        <div class="spinner-border spinner-border-sm" role="status">
+        <div class="spinner-border text-primary" role="status">
             <span class="a4-sr-only">Loading...</span>
         </div>
-        <span class="ml-2">Generating AI summary...</span>
+        <span>{% trans 'Generating AI summary...' %}</span>
     </div>
 </div>
 <div id="summary-content" class="summary__container"></div>

apps/projects/templates/a4_candy_projects/_summary_fragment.html

@@ -22,7 +22,7 @@
             <a href="{{ settings.a4_candy_cms_settings.ImportantPages.ai_explanation.url }}"
                class="summary__info-link" target="_blank"
                aria-label="{% trans 'Explanation of the AI summary' %}">
-                <i class="fas fa-info-circle" aria-hidden="true" style="font-size: 20px;"></i>
+                <i class="fas fa-info-circle summary__info-icon" aria-hidden="true"></i>
             </a>
             {% endif %}
         </div>
@@ -115,8 +115,8 @@
 
         <!-- Feedback -->
         {% if project %}
-        <hr class="my-4">
-        <div class="d-flex justify-content-end align-items-center text-muted small">
+        <hr class="my-4 summary__feedback-divider">
+        <div class="d-flex justify-content-end align-items-center small">
             {% include "a4_candy_projects/_feedback_icons.html" with summary_id=summary_id user_feedback=user_feedback %}
         </div>
         {% endif %}