Fix CSS

Author: ericmj

assets/css/app.css

@@ -1,5 +1,4 @@
 @import "./milligram.css";
-@import "./diff.css";
 
 html, body {
   display:flex;
@@ -383,6 +382,8 @@ table.package-list .button {
   margin-bottom: 0;
 }
 
+
+
 @media only screen
   and (min-device-width: 320px)
   and (max-device-width: 480px) {

assets/css/diff.css

@@ -6,70 +6,55 @@ defmodule DiffWeb.DiffLiveView do
   def render(assigns) do
     ~H"""
     <%= if assigns[:error] do %>
-      <div class="error-container">
-        <h2>Error</h2>
+      <div class="message-container">
+        <h2 class="message">Error</h2>
         <p><%= @error %></p>
       </div>
     <% else %>
       <%= if assigns[:view_mode] == :diffs_list do %>
-        <div class="diffs-container">
-          <h1>Package Diffs</h1>
-          <div class="diffs-list">
+        <div class="search-area">
+          <h1 class="package-header">Package Diffs</h1>
+          <div>
             <%= for {package, from, to, url} <- @diffs do %>
-              <div class="diff-item">
-                <a href={url} class="diff-link">
-                  <span class="package-name"><%= package %></span>
-                  <span class="version-range">
-                    <%= from %> → <%= to %>
-                  </span>
+              <div>
+                <a href={url} class="package-name">
+                  <%= package %> (<%= from %> → <%= to %>)
                 </a>
               </div>
             <% end %>
           </div>
         </div>
       <% else %>
-        <div class="diff-container">
-          <div class="diff-header">
-            <h1><%= @package %></h1>
-            <div class="version-range">
-              <span class="from-version"><%= @from %></span>
-              <span class="arrow">→</span>
-              <span class="to-version"><%= @to %></span>
-            </div>
+        <div class="search-area">
+          <h1 class="package-header"><%= @package %></h1>
+          <div class="package-sub-header">
+            <span><%= @from %></span>
+            <span>→</span>
+            <span><%= @to %></span>
           </div>
 
-        <div class="diff-stats">
-          <div class="stat">
-            <span class="label">Files changed:</span>
-            <span class="value"><%= @metadata.files_changed %></span>
-          </div>
-          <div class="stat additions">
-            <span class="label">Additions:</span>
-            <span class="value">+<%= @metadata.total_additions %></span>
-          </div>
-          <div class="stat deletions">
-            <span class="label">Deletions:</span>
-            <span class="value">-<%= @metadata.total_deletions %></span>
-          </div>
+        <div class="package-sub-header">
+          Files: <%= @metadata.files_changed %> |
+          +<%= @metadata.total_additions %> |
+          -<%= @metadata.total_deletions %>
         </div>
 
         <%= if @generating do %>
-          <div class="loading-container">
-            <div class="loading-spinner"></div>
-            <span>Generating diff patches...</span>
+          <div class="message-container">
+            <div class="message">Generating diff patches...</div>
           </div>
         <% end %>
 
         <%= if @loading do %>
-          <div class="loading-container">
-            <div class="loading-spinner"></div>
-            <span>Loading patches...</span>
+          <div class="message-container">
+            <div class="message">Loading patches...</div>
           </div>
         <% end %>
 
         <%= if @search_query != "" do %>
-          <div class="search-container">
+          <div class="search-form">
             <input
+              class="search-input"
               type="text"
               placeholder="Search files..."
               phx-keyup="search"
@@ -79,26 +64,28 @@ defmodule DiffWeb.DiffLiveView do
           </div>
         <% end %>
 
-        <div class="patch-list" id="patch-list">
+        <div class="ghd-container" id="patch-list">
           <%= for patch_id <- @loaded_patches do %>
-            <div class="patch-container" id={"patch-#{patch_id}"}>
+            <div id={"patch-#{patch_id}"}>
               <%= case Map.get(@patch_contents, patch_id) do %>
                 <% nil -> %>
-                  <div class="patch-loading">Loading patch <%= patch_id %>...</div>
+                  <div class="message-container">
+                    <div class="message">Loading patch <%= patch_id %>...</div>
+                  </div>
                 <% content -> %>
                   <%= raw(content) %>
               <% end %>
             </div>
           <% end %>
 
           <%= if @has_more_patches do %>
-            <div class="load-more-container">
-              <button phx-click="load-more" class="load-more-btn">
+            <div class="message-container">
+              <button phx-click="load-more" class="diff-button button">
                 Load more patches
               </button>
             </div>
           <% end %>
-          </div>
+        </div>
         </div>
       <% end %>
     <% end %>