refactor: temporarily remove details button and update styles of order history page

assets/css/theme.css

@@ -949,14 +949,14 @@ select {
   margin-top: 1rem;
 }
 
-.mt-8 {
-  margin-top: 2rem;
-}
-
 .mt-6 {
   margin-top: 1.5rem;
 }
 
+.mt-8 {
+  margin-top: 2rem;
+}
+
 .block {
   display: block;
 }
@@ -1021,6 +1021,10 @@ select {
   height: 100%;
 }
 
+.h-\[3rem\] {
+  height: 3rem;
+}
+
 .max-h-\[40px\] {
   max-height: 40px;
 }
@@ -1094,8 +1098,8 @@ select {
   width: max-content;
 }
 
-.w-1\/5 {
+.max-w-6xl {
-  width: 20%;
+  max-width: 72rem;
 }
 
 .max-w-\[100px\] {
@@ -1122,18 +1126,6 @@ select {
   max-width: 100%;
 }
 
-.max-w-6xl {
-  max-width: 72rem;
-}
-
-.max-w-2xl {
-  max-width: 42rem;
-}
-
-.max-w-3xl {
-  max-width: 48rem;
-}
-
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1156,6 +1148,21 @@ select {
   border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
 }
 
+.border-spacing-y-\[16px\] {
+  --tw-border-spacing-y: 16px;
+  border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
+}
+
+.border-spacing-y-\[1rem\] {
+  --tw-border-spacing-y: 1rem;
+  border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
+}
+
+.border-spacing-x-\[4px\] {
+  --tw-border-spacing-x: 4px;
+  border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
+}
+
 .-translate-y-1\/2 {
   --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1328,6 +1335,11 @@ select {
   border-color: rgb(252 165 165 / var(--tw-border-opacity));
 }
 
+.border-gray-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(156 163 175 / var(--tw-border-opacity));
+}
+
 .bg-black\/70 {
   background-color: rgb(0 0 0 / 0.7);
 }
@@ -1644,11 +1656,6 @@ select {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.text-slate-500 {
-  --tw-text-opacity: 1;
-  color: rgb(100 116 139 / var(--tw-text-opacity));
-}
-
 .underline {
   text-decoration-line: underline;
 }
@@ -1657,22 +1664,10 @@ select {
   text-decoration-line: line-through;
 }
 
-.no-underline {
-  text-decoration-line: none;
-}
-
 .underline-offset-2 {
   text-underline-offset: 2px;
 }
 
-.underline-offset-auto {
-  text-underline-offset: auto;
-}
-
-.underline-offset-1 {
-  text-underline-offset: 1px;
-}
-
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -1738,10 +1733,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
   margin-right: 1rem;
 }
 
-.file\:w-full::file-selector-button {
-  width: 100%;
-}
-
 .file\:rounded-full::file-selector-button {
   border-radius: 9999px;
 }
@@ -1750,11 +1741,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
   border-width: 0px;
 }
 
-.file\:bg-violet-50::file-selector-button {
-  --tw-bg-opacity: 1;
-  background-color: rgb(245 243 255 / var(--tw-bg-opacity));
-}
-
 .file\:bg-transparent::file-selector-button {
   background-color: transparent;
 }
@@ -1764,11 +1750,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
   padding-right: 1rem;
 }
 
-.file\:py-2::file-selector-button {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-}
-
 .file\:py-1::file-selector-button {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -1788,26 +1769,11 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
   font-weight: 600;
 }
 
-.file\:text-violet-700::file-selector-button {
-  --tw-text-opacity: 1;
-  color: rgb(109 40 217 / var(--tw-text-opacity));
-}
-
 .file\:text-blue-950::file-selector-button {
   --tw-text-opacity: 1;
   color: rgb(23 37 84 / var(--tw-text-opacity));
 }
 
-.placeholder\:text-gray-500::-moz-placeholder {
-  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity));
-}
-
-.placeholder\:text-gray-500::placeholder {
-  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity));
-}
-
 .last\:hidden:last-child {
   display: none;
 }
@@ -1873,16 +1839,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
   text-decoration-line: none;
 }
 
-.hover\:file\:bg-violet-100::file-selector-button:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(237 233 254 / var(--tw-bg-opacity));
-}
-
-.hover\:file\:bg-blue-900::file-selector-button:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(30 58 138 / var(--tw-bg-opacity));
-}
-
 .hover\:file\:text-blue-900::file-selector-button:hover {
   --tw-text-opacity: 1;
   color: rgb(30 58 138 / var(--tw-text-opacity));
@@ -1986,18 +1942,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     padding-right: 0.5rem;
   }
 
-  .max-md\:leading-4 {
-    line-height: 1rem;
-  }
-
-  .max-md\:leading-8 {
-    line-height: 2rem;
-  }
-
-  .max-md\:leading-6 {
-    line-height: 1.5rem;
-  }
-
   .max-md\:leading-5 {
     line-height: 1.25rem;
   }
@@ -2007,10 +1951,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
   .max-sm\:hidden {
     display: none;
   }
-
-  .max-sm\:max-w-full {
-    max-width: 100%;
-  }
 }
 
 @media (min-width: 640px) {
@@ -2044,6 +1984,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     display: none;
   }
 
+  .md\:h-\[3rem\] {
+    height: 3rem;
+  }
+
   .md\:w-1\/2 {
     width: 50%;
   }

templates/customer/history.tpl

@@ -34,7 +34,7 @@
   <h6 class='text-lg'>{l s='Here are the orders you\'ve placed since your account was created.' d='Shop.Theme.Customeraccount'}</h6>
 
   {if $orders}
-    <table class="mt-2 w-full border-separate border-spacing-x-0 border-spacing-y-[12px]">
+    <table class="mt-2 w-full border-separate border-spacing-x-0 border-spacing-y-[1rem]">
       <thead class="thead-default">
         <tr>
           <th>{l s='Order reference' d='Shop.Theme.Checkout'}</th>
@@ -48,7 +48,7 @@
       </thead>
       <tbody>
         {foreach from=$orders item=order}
-          <tr class="even:bg-gray-200 text-sm md:text-base">
+          <tr class="even:bg-gray-200 text-sm md:text-base md:h-[3rem]">
             <td class="text-center">{$order.details.reference}</th>
             <td class="text-center">{$order.details.order_date}</td>
             <td class="text-center">{$order.totals.total.value}</td>
@@ -65,17 +65,17 @@
                 -
               {/if}
             </td>
-            <td class="text-center md:flex gap-2 items-center justify-center">
+            <td class="text-center">
-              <a href="{$order.details.details_url}" data-link-action="view-order-details">
+              <a href="{$order.details.details_url}" class="hidden" data-link-action="view-order-details">
                   <svg xmlns="http://www.w3.org/2000/svg" class="md:hidden icon icon-tabler icon-tabler-file-description" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><path d="M9 17h6" /><path d="M9 13h6" /></svg>
                   <h2 class="text-sm md:text-base max-md:hidden">
                     {l s='Details' d='Shop.Theme.Customeraccount'}
                   </h2>
               </a>
               {if $order.details.reorder_url}
-                <a href="{$order.details.reorder_url}">
+                <a href="{$order.details.reorder_url}" class="flex items-center">
                     <svg xmlns="http://www.w3.org/2000/svg" class="md:hidden icon icon-tabler icon-tabler-reorder" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 15m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z" /><path d="M10 15m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z" /><path d="M17 15m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z" /><path d="M5 11v-3a3 3 0 0 1 3 -3h8a3 3 0 0 1 3 3v3" /><path d="M16.5 8.5l2.5 2.5l2.5 -2.5" /></svg>
-                    <h2 class="text-sm md:text-sm max-md:hidden">
+                    <h2 class="text-sm md:text-sm max-md:hidden font-medium border border-blue-950 px-2 py-1 hover:border-blue-900">
                         {l s='Reorder' d='Shop.Theme.Actions'}
                     </h2>
                 </a>