From 2022ca9d319d5d233f987b2e54cd0e164ff18e2d Mon Sep 17 00:00:00 2001
From: Aki Wu <wuminzhe@gmail.com>
Date: Sun, 7 Apr 2024 22:00:47 +0800
Subject: [PATCH] fix ui

---
 .../stylesheets/application.tailwind.css       | 18 ++++++++++++++++--
 app/models/message.rb                          |  2 +-
 app/views/layouts/application.html.erb         |  2 +-
 app/views/messages/_message.html.erb           | 10 ++++++----
 app/views/messages/_show_message.html.erb      |  2 +-
 app/views/messages/index.html.erb              |  2 +-
 6 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css
index 2fef6da..a805d8a 100644
--- a/app/assets/stylesheets/application.tailwind.css
+++ b/app/assets/stylesheets/application.tailwind.css
@@ -6,8 +6,22 @@ html, body {
   /* background-color: rgb(252, 251, 248); */
 }
 
-table, dd {
-  font-family: "Ubuntu Mono", monospace;
+dd {
+  font-family: "Noto Sans Mono", monospace;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+  font-variation-settings:
+    "wdth" 100;
+}
+
+.mono {
+  font-family: "Noto Sans Mono", monospace;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+  font-variation-settings:
+    "wdth" 100;
 }
 
 .pagination a {
diff --git a/app/models/message.rb b/app/models/message.rb
index 0e4e963..f22b2f0 100644
--- a/app/models/message.rb
+++ b/app/models/message.rb
@@ -35,7 +35,7 @@ class Message < ApplicationRecord
 
   def status_label
     if status == 'accepted'
-      'Accepted'
+      'Pending'
     elsif status == 'root_ready'
       'Root Ready'
     elsif status == 'dispatch_success'
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 821e855..0c69f67 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -7,7 +7,7 @@
     <%= csp_meta_tag %>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono&display=swap" rel="stylesheet">
 
     <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
     <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
diff --git a/app/views/messages/_message.html.erb b/app/views/messages/_message.html.erb
index f5ed201..4e59203 100644
--- a/app/views/messages/_message.html.erb
+++ b/app/views/messages/_message.html.erb
@@ -1,18 +1,20 @@
   <tr id="message_<%= message.identifier %>" class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
-    <td class="whitespace-nowrap px-6 py-4"><%= link_to short(message.msg_hash), message_by_tx_or_hash_path(message.msg_hash), class: 'underline' %></td>
+    <td class="whitespace-nowrap px-6 py-4 mono"><%= link_to short(message.msg_hash), message_by_tx_or_hash_path(message.msg_hash), class: 'underline' %></td>
     <td class="whitespace-nowrap px-6 py-4">
-      <div class="<%= status_style(message.status) %>">
+      <div class="<%= status_style(message.status) %>" style="width: fit-content">
         <%= link_to message.status_label, "#{request.path}?status=#{message.status}" %>
       </div>
     </td>
     <td class="whitespace-nowrap px-6 py-4">
       <%= link_to message.from_network.name, network_messages_path(message.from_network.name), class: 'underline'  %> > <%= link_to message.to_network.name, network_messages_path('_', message.to_network.name), class: 'underline'  %> 
-    <td class="whitespace-nowrap px-6 py-4 text-left"><%= address_link_short(message.from_network, message.from) %></td>
-    <td class="whitespace-nowrap px-6 py-4 text-left"><%= address_link_short(message.to_network, message.to) %></td>
+    <td class="whitespace-nowrap px-6 py-4 text-left mono"><%= address_link_short(message.from_network, message.from) %></td>
+    <td class="whitespace-nowrap px-6 py-4 text-left mono"><%= address_link_short(message.to_network, message.to) %></td>
     <td class="whitespace-nowrap px-6 py-4 text-left"><%= time_ago_in_words(message.block_timestamp) %> ago</td>
     <td class="whitespace-nowrap px-6 py-4">
       <% if message.dispatch_block_timestamp %>
         <%= time_consumption(message) %>
+      <% else %>
+        -
       <% end %>
     </td>
     <td class="whitespace-nowrap px-6 py-2"><%= link_to "MORE", message_by_tx_or_hash_path(message.msg_hash), class: "underline" %></td>
diff --git a/app/views/messages/_show_message.html.erb b/app/views/messages/_show_message.html.erb
index 068ad21..aea5524 100644
--- a/app/views/messages/_show_message.html.erb
+++ b/app/views/messages/_show_message.html.erb
@@ -6,7 +6,7 @@
             <dt class="text-sm font-medium leading-6 text-gray-900">Direction</dt>
             <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-3 sm:mt-0">
       <%= link_to message.from_network.name, network_messages_path(message.from_network.name), class: 'underline'  %>
-      ->
+      >
       <%= link_to message.to_network.name, network_messages_path('_', message.to_network.name), class: 'underline'  %>
             </dd>
           </div>
diff --git a/app/views/messages/index.html.erb b/app/views/messages/index.html.erb
index 48dee93..27cbec5 100644
--- a/app/views/messages/index.html.erb
+++ b/app/views/messages/index.html.erb
@@ -6,7 +6,7 @@
       <div class="relative overflow-hidden">
 
 
-        <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+        <table class="w-full text-xs text-left rtl:text-right text-gray-500 dark:text-gray-400">
           <thead class="text-xs text-gray-700 uppercase dark:text-gray-400">
             <tr>
               <th scope="col" class="px-6 py-3">Hash</th>