From d18185f49e2f32540225dda8e41e6a754c1a5d43 Mon Sep 17 00:00:00 2001
From: Thomas Rupprecht <rupprecht.thomas@gmail.com>
Date: Tue, 17 Jan 2023 15:05:47 +0100
Subject: [PATCH] Improve alerts and conversation (#1062)

* add role="alert"
* improve conversation styling
* replace alert with card for conversation
---
 includes/helper/message_helper.php               |  2 +-
 resources/assets/themes/base.scss                |  8 ++++----
 resources/views/errors/419.twig                  |  2 +-
 resources/views/errors/default.twig              |  2 +-
 resources/views/macros/base.twig                 |  2 +-
 resources/views/pages/messages/conversation.twig | 14 ++++++++------
 6 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/includes/helper/message_helper.php b/includes/helper/message_helper.php
index e4058b0b..52c63eb3 100644
--- a/includes/helper/message_helper.php
+++ b/includes/helper/message_helper.php
@@ -100,7 +100,7 @@ function alert($class, $msg, $immediately = false)
     }
 
     if ($immediately) {
-        return '<div class="alert alert-' . $class . '">' . $msg . '</div>';
+        return '<div class="alert alert-' . $class . '" role="alert">' . $msg . '</div>';
     }
 
     $session = session();
diff --git a/resources/assets/themes/base.scss b/resources/assets/themes/base.scss
index c94d7c09..d0d6963f 100644
--- a/resources/assets/themes/base.scss
+++ b/resources/assets/themes/base.scss
@@ -357,14 +357,14 @@ code {
 }
 
 .conversation {
+  align-content: flex-start;
   height: 55vh;
   overflow-x: hidden;
   overflow-y: auto;
-}
 
-.message {
-  max-width: 75%;
-  display: inline-block;
+  .alert {
+    max-width: 75%;
+  }
 }
 
 /* Hide the arrow up/down buttons rendered by the browser in the input field */
diff --git a/resources/views/errors/419.twig b/resources/views/errors/419.twig
index dcfec022..a9545af2 100644
--- a/resources/views/errors/419.twig
+++ b/resources/views/errors/419.twig
@@ -3,5 +3,5 @@
 {% block title %}{{ __("Authentication expired") }}{% endblock %}
 
 {% block content %}
-    <div class="alert alert-warning">{{ __("The provided CSRF token is invalid or has expired") }}</div>
+    <div class="alert alert-warning" role="alert">{{ __("The provided CSRF token is invalid or has expired") }}</div>
 {% endblock %}
diff --git a/resources/views/errors/default.twig b/resources/views/errors/default.twig
index 30960b7e..e3c76d15 100644
--- a/resources/views/errors/default.twig
+++ b/resources/views/errors/default.twig
@@ -5,7 +5,7 @@
 {% block content %}
     <div class="container">
         {% block content_container %}
-            <div class="alert alert-info">
+            <div class="alert alert-info" role="alert">
 
                 {% block content_headline %}
                     <h2>{% block content_headline_text %}Error {{ status }}{% endblock %}</h2>
diff --git a/resources/views/macros/base.twig b/resources/views/macros/base.twig
index 15f84ea2..2fc1ca2b 100644
--- a/resources/views/macros/base.twig
+++ b/resources/views/macros/base.twig
@@ -7,7 +7,7 @@
 {% endmacro %}
 
 {% macro alert(message, type, raw) %}
-    <div class="alert alert-{{ type|default('info') }}">
+    <div class="alert alert-{{ type|default('info') }}" role="alert">
         {%- if raw|default(false) -%}
             {{ message|raw }}
         {%- else -%}
diff --git a/resources/views/pages/messages/conversation.twig b/resources/views/pages/messages/conversation.twig
index d9eb03c9..41eb3c2a 100644
--- a/resources/views/pages/messages/conversation.twig
+++ b/resources/views/pages/messages/conversation.twig
@@ -13,19 +13,21 @@
         </div>
 
         <div class="row">
-            <div class="col-12 col-lg-8 offset-lg-2">
-                <div class="row conversation">
+            <div class="col-12 col-lg-10 col-xl-8 offset-lg-1 offset-xl-2">
+                <div class="row conversation mb-2">
                     {% for msg in messages %}
                         {% set own_message = msg.user_id == user.id %}
                         <div class="col-12"{% if loop.last %} id="newest"{% endif %}>
                             <div class="d-flex{% if own_message %} justify-content-end{% endif %}">
-                                <div class="message alert {% if own_message %}alert-primary{% else %}alert-secondary{% endif %}">
-                                    <p>{{ msg.text | nl2br }}</p>
-                                    <div class="text-end">
+                                <div class="card {% if own_message %}text-bg-primary{% else %}text-bg-secondary{% endif %} mb-3">
+                                    <div class="card-body">
+                                        <p class="card-text">{{ msg.text | nl2br }}</p>
+                                    </div>
+                                    <div class="card-footer d-flex justify-content-end align-items-center fw-light">
                                         <small class="opacity-75">{{ msg.created_at.format(__('Y-m-d H:i')) }}</small>
                                         {% if own_message %}
                                             <form action="{{ url('/messages/' ~ other_user.id ~ '/' ~ msg.id) }}"
-                                                enctype="multipart/form-data" method="post" class="float-end"
+                                                enctype="multipart/form-data" method="post" class="ms-2"
                                             >
                                                 {{ csrf() }}
                                                 {{ f.submit(m.icon('trash'), {'btn_type': 'primary', 'size': 'sm'}) }}