From 317587e1fb571faaa5c6f0636d43a9b541194dae Mon Sep 17 00:00:00 2001
From: Jeremy Lecour <jlecour@evolix.fr>
Date: Sun, 28 Feb 2021 12:55:52 +0100
Subject: [PATCH] formattage de l'email

---
 app/views/emails/_email.html.erb | 150 +++++++++++++++----------------
 1 file changed, 74 insertions(+), 76 deletions(-)

diff --git a/app/views/emails/_email.html.erb b/app/views/emails/_email.html.erb
index 24deb67..be5f868 100644
--- a/app/views/emails/_email.html.erb
+++ b/app/views/emails/_email.html.erb
@@ -1,84 +1,82 @@
 <div id="<%= dom_id email %>" class="email_container" data-controller="email">
-  <button data-email-target="buttonAll" data-action="email#show_all">Show all headers</button>
+  <button data-email-target="buttonAll" data-action="email#show_all">Show raw headers</button>
   <button data-email-target="buttonMain" data-action="email#show_main" class="hidden">Show main headers only</button>
 
-  <table class="email_content">
-    <thead class="email_main_headers" data-email-target="headersMain">
-      <tr>
-        <th>Date</th>
-        <td><%= email.date %></td>
-      </tr>
-      <tr>
-        <th>From</th>
-        <td><%= email.from.join(', ') %></td>
-      </tr>
-      <tr>
-        <th>To</th>
-        <td><%= email.to.join(', ') %></td>
-      </tr>
-      <tr>
-        <th>Delivered-To</th>
-        <td><%= email.delivered_to.join(', ') %></td>
-      </tr>
-      <tr>
-        <th>Subject</th>
-        <td><%= email.subject %></td>
-      </tr>
-      <% if email.organisations.present? %>
+  <div class="my-6 shadow border-b border-gray-200 rounded-lg">
+    <table class="w-full rounded-t-lg bg-gray-50 border-b border-gray-200   email_content">
+      <tbody class="email_main_headers divide-y divide-gray-100" data-email-target="headersMain">
         <tr>
-          <th>Clients</th>
-          <td>
-            <% email.organisations.presence.each do |organisation| %>
-              <span class="email_attribute_organisation"><%= organisation %></span>
-            <% end %>
+          <th scope="row" class="w-56 px-4 py-2 align-top text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
+          <td class="text-sm"><%= email.date %></td>
+        </tr>
+        <tr>
+          <th scope="row" class="w-56 px-4 py-2 align-top text-left text-xs font-medium text-gray-500 uppercase tracking-wider">From</th>
+          <td class="text-sm"><%= email.from.join(', ') %></td>
+        </tr>
+        <tr>
+          <th scope="row" class="w-56 px-4 py-2 align-top text-left text-xs font-medium text-gray-500 uppercase tracking-wider">To</th>
+          <td class="text-sm"><%= email.to.join(', ') %></td>
+        </tr>
+        <tr>
+          <th scope="row" class="w-56 px-4 py-2 align-top text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Delivered-To</th>
+          <td class="text-sm"><%= email.delivered_to.join(', ') %></td>
+        </tr>
+        <tr>
+          <th scope="row" class="w-56 px-4 py-2 align-top text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Subject</th>
+          <td class="text-sm"><%= email.subject %></td>
+        </tr>
+        <% if email.organisations.present? %>
+          <tr>
+            <th scope="row" class="w-56 px-4 py-2 align-top text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Clients</th>
+            <td class="text-sm">
+              <% email.organisations.presence.each do |organisation| %>
+                <span class="flex px-2 inline-flex text-xs leading-5 font-semibold rounded-full email_attribute_organisation"><%= organisation %></span>
+              <% end %>
+            </td>
+          </tr>
+        <% end %>
+        <% if email.servers.present? %>
+          <tr>
+            <th scope="row" class="w-56 px-4 py-2 align-top text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Servers</th>
+            <td class="text-sm">
+              <% email.servers.presence.each do |server| %>
+                <span class="flex px-2 inline-flex text-xs leading-5 font-semibold rounded-full email_attribute_server"><%= server %></span>
+              <% end %>
+            </td>
+          </tr>
+        <% end %>
+        <% if email.issues.present? %>
+          <tr>
+            <th scope="row" class="w-56 px-4 py-2 align-top text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Issues</th>
+            <td class="text-sm">
+              <% email.issues.presence.each do |issue| %>
+                <span class="flex px-2 inline-flex text-xs leading-5 font-semibold rounded-full email_attribute_issue"><%= issue %></span>
+              <% end %>
+            </td>
+          </tr>
+        <% end %>
+        <tr>
+          <th scope="row" class="w-56 px-4 py-2 align-top text-left text-xs font-medium text-gray-500 uppercase tracking-wider">From Cron</th>
+          <td class="text-sm">
+            <span class="flex px-2 inline-flex text-xs leading-5 font-semibold rounded-full <%= email.cron? ? "email_attribute_cron" : "" %>"><%= email.cron? ? "Yes" : "No" %></span>
           </td>
         </tr>
+      </tbody>
+      <tbody class="email_additional_headers divide-y divide-gray-100 hidden" data-email-target="headersAll">
+        <% email.headers.each do |header| %>
+          <tr>
+            <th scope="row" class="w-56 px-4 py-2 align-top text-left text-xs font-medium text-gray-500 uppercase tracking-wider"><%= header["name"] %></th>
+            <td class="text-sm"><%= header["value"] %></td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+    <div class="p-4">
+      <% if email.plain_body.present? %>
+        <pre class="whitespace-pre-wrap text-sm"><%= email.plain_body %></pre>
+      <% else %>
+        <i>Empty body</i>
       <% end %>
-      <% if email.servers.present? %>
-        <tr>
-          <th>Servers</th>
-          <td>
-            <% email.servers.presence.each do |server| %>
-              <span class="email_attribute_server"><%= server %></span>
-            <% end %>
-          </td>
-        </tr>
-      <% end %>
-      <% if email.issues.present? %>
-        <tr>
-          <th>Issues</th>
-          <td>
-            <% email.issues.presence.each do |issue| %>
-              <span class="email_attribute_issue"><%= issue %></span>
-            <% end %>
-          </td>
-        </tr>
-      <% end %>
-      <tr>
-        <th>From Cron</th>
-        <td>
-          <span class="<%= email.cron? ? "email_attribute_cron" : "" %>"><%= email.cron? ? "Yes" : "No" %></span>
-        </td>
-      </tr>
-    </thead>
-    <thead class="email_additional_headers hidden" data-email-target="headersAll">
-      <% email.headers.each do |header| %>
-        <tr>
-          <th><%= header["name"] %></th>
-          <td><%= header["value"] %><td>
-        </tr>
-      <% end %>
-    </thead>
-    <tbody>
-      <tr>
-        <td colspan="2">
-          <% if email.plain_body.present? %>
-            <pre><%= email.plain_body %></pre>
-          <% else %>
-            <i>Empty body</i>
-          <% end %>
-        </td>
-      </tr>
-    </tbody>
-  </table>
+    </div>
+  </div>
 </div>