Update Changelog table + Update diffy css for dark mode

nanego · Jun 18, 2024 · 5a5f4af · 5a5f4af
1 parent 256d449
commit 5a5f4af
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 12 deletions.
diff --git a/app/components/list/table_component.rb b/app/components/list/table_component.rb
@@ -74,8 +74,8 @@ class TableCell < TableTag
       TAG_NAME = :td.freeze
       CSS_CLASSES = "align-middle".freeze
       ALIGN_TYPES = {
-        right: "text-right",
-        left: "text-left",
+        right: "text-end",
+        left: "text-start",
       }.freeze
 
       def initialize(text = nil, **html_attributes)

diff --git a/app/views/changelog_entries/index.html.erb b/app/views/changelog_entries/index.html.erb
@@ -4,9 +4,7 @@
 } %>
 
 <div class="container">
-  <div class="page-header">
-    <h1><%= t('changelog_entries.title') %></h1>
-  </div>
+  <h1><%= t('changelog_entries.title') %></h1>
 
   <%= render List::DataTableComponent.new(decorate(@changelog_entries)) do |table| %>
 
@@ -42,7 +40,7 @@
     <% end %>
 
     <% table.with_column(t('label_details')) do |changelog_entry| %>
-      <%= link_to changelog_entry_path(changelog_entry), class: 'btn btn-outline-secondary' do %>
+      <%= link_to changelog_entry_path(changelog_entry), class: "btn btn-primary" do %>
         <span class="bi bi-eye" aria-hidden="true" data-controller="tooltip" data-bs-placement="left" title="<%= t("action.show") %>"></span>
         <span class="visually-hidden"><%= t("action.show") %></span>
       <% end %>

diff --git a/vendor/assets/diffy/diffy.css b/vendor/assets/diffy/diffy.css
@@ -2,8 +2,8 @@
   overflow:auto;
 }
 .diff ul{
-  background: #fafafa;
   overflow: auto;
+  background-color: rgb(248, 249, 250);
   font-size: 13px;
   list-style: none;
   margin:0;
@@ -21,12 +21,27 @@
   margin: 0;
   height: 1em;
 }
-.diff li.ins{background:#dfd; color:#080}
-.diff li.del{background:#fee; color:#b00}
-.diff li:hover{background:#ffc}
+.diff li.ins{background:rgba(25, 135, 84, 0.1); color:#080}
+.diff li.del{background:rgba(248, 81, 73, 0.1); color:#b00}
+.diff li:hover{background:rgba(255, 255, 204, 0.3);}
 /* try 'whitespace:pre;' if you don't want lines to wrap */
 .diff del, .diff ins, .diff span{white-space:pre-wrap;font-family:courier;}
-.diff del strong{font-weight:normal;background:#fcc;}
-.diff ins strong{font-weight:normal;background:#9f9;}
+.diff del strong{font-weight:normal;background:rgba(248, 81, 73, 0.2);}
+.diff ins strong{font-weight:normal;background-color: rgba(25, 135, 84, 0.2);}
 .diff li.diff-comment { display: none; }
 .diff li.diff-block-info { background: none repeat scroll 0 0 gray; }
+
+
+@media (prefers-color-scheme: dark) {
+  .diff ul {
+    background-color: rgb(43, 48, 53);
+  }
+
+  .diff li.del { color: rgb(234, 134, 143); }
+  .diff del strong{ background:rgba(248, 81, 73, 0.3);}
+
+  .diff li.ins { color: rgb(117, 183, 152); }
+  .diff ins strong { background-color: rgba(25, 135, 84, 0.50); }
+
+  .diff li:hover { color: white; }
+}