From c561033cf246b72cdbaaab21307999246def06f7 Mon Sep 17 00:00:00 2001
From: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com>
Date: Fri, 18 Apr 2025 22:24:51 +0200
Subject: [PATCH] feat(PackageHeader): min height + outline button

---
 frontend/islands/TicketModal.tsx                     |  4 +++-
 .../routes/package/(_components)/PackageHeader.tsx   |  4 ++--
 frontend/static/styles.css                           | 12 ++++++++++++
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/frontend/islands/TicketModal.tsx b/frontend/islands/TicketModal.tsx
index 8f207ee2..74da9ab5 100644
--- a/frontend/islands/TicketModal.tsx
+++ b/frontend/islands/TicketModal.tsx
@@ -19,7 +19,7 @@ export function TicketModal(
   { user, kind, style, fields, children, extraMeta, title, description }: {
     children: ComponentChildren;
     kind: TicketKind;
-    style: "primary" | "danger";
+    style: "primary" | "danger" | "danger-outline";
     user: User | null;
     title: string;
     description: ComponentChildren;
@@ -63,6 +63,8 @@ export function TicketModal(
       <button
         ref={buttonRef}
         id={`${prefix}-ticket-modal`}
+        // "button-danger-outline" ensure that tailwind precess this class
+        // because it's ins't use somewhere else and here it's dynamic class
         class={`button-${style}`}
         type="button"
         onClick={() => setOpen((v) => !v)}
diff --git a/frontend/routes/package/(_components)/PackageHeader.tsx b/frontend/routes/package/(_components)/PackageHeader.tsx
index 1edbbc0a..b5c32183 100644
--- a/frontend/routes/package/(_components)/PackageHeader.tsx
+++ b/frontend/routes/package/(_components)/PackageHeader.tsx
@@ -91,7 +91,7 @@ export function PackageHeader({
         </div>
       )}
 
-      <div class="flex flex-col flex-wrap md:flex-row items-start justify-between gap-6">
+      <div class="flex flex-col flex-wrap md:flex-row items-start justify-between gap-6 md:min-h-48">
         <div class="space-y-3.5 flex-shrink">
           <div class="flex flex-row gap-x-3 gap-y-2 flex-wrap md:items-center">
             <h1 class="text-2xl md:text-3xl flex flex-wrap items-center font-sans gap-x-2">
@@ -226,7 +226,7 @@ export function PackageHeader({
             <TicketModal
               user={user}
               kind="package_report"
-              style="danger"
+              style="danger-outline"
               title="Report package"
               description={
                 <>
diff --git a/frontend/static/styles.css b/frontend/static/styles.css
index 013cdd1a..2866b734 100644
--- a/frontend/static/styles.css
+++ b/frontend/static/styles.css
@@ -135,6 +135,18 @@
       active:translate-y-[4px];
   }
 
+  .button-danger-outline {
+    @apply button border-1.5 border-red-500 bg-transparent text-red-500
+      hover:bg-red-100 disabled:bg-jsr-gray-100 outline-red-600
+      disabled:text-red-300 shadow-accent-sm disabled:shadow-transparent
+      disabled:border-red-300 transition-all duration-75 ease-in-out;
+  }
+
+  .button-danger-outline:not(:disabled) {
+    @apply active:shadow-accent-sm-close active:translate-x-[3px]
+      active:translate-y-[4px];
+  }
+
   .chip {
     @apply inline-block py-1 px-2.5 rounded-full whitespace-nowrap leading-none
       font-semibold text-sm;