From e481c93c7e7dd273a3e548778e5b7ae75ee23c0c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=A9douard=20wautier?= <edouardwautier@Ed-Pro.local>
Date: Thu, 14 Dec 2023 13:00:08 +0100
Subject: [PATCH] Adding styles for headings and texts for readability and look

---
 .../conversation/ConversationMessage.tsx      |  5 ++-
 front/styles/global.css                       | 42 +++++++++++++++++++
 2 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/front/components/assistant/conversation/ConversationMessage.tsx b/front/components/assistant/conversation/ConversationMessage.tsx
index de6abf275a9b..a888d7e19362 100644
--- a/front/components/assistant/conversation/ConversationMessage.tsx
+++ b/front/components/assistant/conversation/ConversationMessage.tsx
@@ -196,7 +196,10 @@ export function ConversationMessage({
             </div>
             <div className="text-sm font-medium">{name}</div>
           </div>
-          <div className="min-w-0 break-words pl-8 text-base font-normal sm:p-0">
+          <div
+            id="MessageBlock"
+            className="min-w-0 break-words pl-8 text-base font-normal sm:p-0"
+          >
             {children}
           </div>
         </div>
diff --git a/front/styles/global.css b/front/styles/global.css
index 25ff2026c65f..48cbecdc6fea 100644
--- a/front/styles/global.css
+++ b/front/styles/global.css
@@ -67,3 +67,45 @@ main {
     transform: translate3d(8px, 3px, 0);
   }
 }
+
+#MessageBlock {
+  @apply text-base font-normal leading-7 text-element-800;
+
+  h1 {
+    @apply text-5xl font-bold;
+    @apply pb-3 pt-4;
+  }
+  h2 {
+    @apply text-4xl font-bold;
+    @apply pb-2 pt-3;
+  }
+  h3 {
+    @apply text-2xl font-semibold;
+    @apply pb-2 pt-3;
+  }
+  h4 {
+    @apply text-xl font-semibold;
+    @apply pb-2 pt-2.5;
+  }
+  h5 {
+    @apply text-xl font-bold;
+    @apply pb-1.5 pt-2;
+  }
+  h6 {
+    @apply text-lg font-semibold;
+    @apply pb-1.5 pt-2;
+  }
+  strong {
+    @apply font-semibold text-element-900;
+  }
+  a {
+    @apply font-semibold text-action-500;
+    transition: all 0.2s ease-in-out;
+    &:hover {
+      @apply text-action-400;
+    }
+    &:active {
+      @apply text-action-600;
+    }
+  }
+}