From a3fe34508c3e02690f8d1cd2c115c7889d9ac029 Mon Sep 17 00:00:00 2001
From: Sabine Schmaltz <sabine@tarides.com>
Date: Mon, 20 Mar 2023 12:59:32 +0100
Subject: [PATCH] improve source and checksum links

---
 src/ocamlorg_frontend/components/icons.eml    |  6 +++
 .../pages/package_overview.eml                | 44 +++++++++++--------
 tailwind.config.js                            |  1 +
 3 files changed, 33 insertions(+), 18 deletions(-)

diff --git a/src/ocamlorg_frontend/components/icons.eml b/src/ocamlorg_frontend/components/icons.eml
index 0f0cbeb2ba..f389eae194 100644
--- a/src/ocamlorg_frontend/components/icons.eml
+++ b/src/ocamlorg_frontend/components/icons.eml
@@ -65,6 +65,12 @@ let community class_ =
     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
   </svg>
 
+let copy class_ =
+  <svg xmlns="http://www.w3.org/2000/svg" class="<%s class_ %>" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75" />
+  </svg>
+
+
 let copy_to_clipboard class_ =
   <svg xmlns="http://www.w3.org/2000/svg" class="<%s class_ %>" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
diff --git a/src/ocamlorg_frontend/pages/package_overview.eml b/src/ocamlorg_frontend/pages/package_overview.eml
index 9594cfaca8..044cce3c52 100644
--- a/src/ocamlorg_frontend/pages/package_overview.eml
+++ b/src/ocamlorg_frontend/pages/package_overview.eml
@@ -146,25 +146,33 @@ Package_layout.render
         | None -> ()
         | Some (uri, checksums) -> %>
         <h2 class="font-semibold mt-8 mb-3 text-base text-body-400">Sources</h2>
-        <div class="flex p-3 rounded-xl border border-gray-200 items-center justify-between">
-            <div class="flex">
-              <%s! Icons.package_sources "h-5 w-5 mr-2" %>
-            </div>
-            <div class="overflow-x-auto">
-                <%s Filename.basename uri %>
-                <br>
-                <% checksums |> List.iter begin fun checksum -> %>
-                <code><%s String.trim checksum %></code>
-                <% end; %>
-            </div>
-            <div class="flex">
-                <a href="<%s uri %>"
-                    class="hover:bg-primary-600 text-primary-600 overflow-hidden hover:rounded rounded  hover:text-white">
-                    <div class="p-2 bg-primary-100 text-base">
-                        <%s! Icons.download "h-6 w-6" %>
-                    </div>
-                </a>
+        <div class="flex flex-col space-y-2">
+          <a class="flex font-mono items-center gap-4 text-body-700 hover:text-primary-600 overflow-hidden rounded"
+             href="<%s uri %>">
+            <span class="flex-grow">
+              <%s Filename.basename uri %>
+            </span>
+
+            <div class="p-2 bg-primary-600 text-white rounded">
+                <%s! Icons.download "h-6 w-6" %>
             </div>
+          </a>
+
+          <% checksums |> List.iter begin fun checksum -> %>
+          <div class="flex items-center gap-4 bg-primary-200 text-gray-700 rounded"
+            x-data="{ copied: false }">
+            <code class="px-4 text-ellipsis overflow-hidden min-w-0" aria-label="checksum"><%s String.trim checksum %></code>
+
+            <button
+              @click="$clipboard('<%s checksum %>'); copied = true; setTimeout(() => copied = false, 2000)"
+              x-show="!copied" title="copy checksum to clipboard" class="py-1 px-2 text-primary-600 rounded">
+                <%s! Icons.copy "h-6 w-6" %>
+            </button>
+            <button x-show="copied" title="checksum copied to clipboard" class="py-1 px-2 text-primary-600 rounded">
+                <%s! Icons.copied_to_clipboard "h-4 w-4" %>
+            </button>
+          </div>
+          <% end; %>
         </div>
         <% ; %>
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 36376e1e3c..fec41bc622 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -45,6 +45,7 @@ module.exports = {
           700: "#DC5402",
           600: "#EE6A1A",
           300: "rgba(238, 106, 26, 0.48)",
+          200: "rgba(238, 106, 26, 0.15)",
           100: "rgba(238, 106, 26, 0.1)",
         },
         background: {