fix(dashboard): Fix size of buttons and use Link to navigate (#11366)

**What**
- Fixes the wrong `size` being used for the allocate items button.
- Updates the buttons that link to somewhere to use a Link and asChild instead of an onClick.

.changeset/thick-deers-guess.md

@@ -0,0 +1,5 @@
+---
+"@medusajs/dashboard": patch
+---
+
+fix(dashboard): Fix size of buttons and use Link to navigate

packages/admin/dashboard/src/routes/orders/order-detail/components/order-summary-section/order-summary-section.tsx

@@ -1,6 +1,6 @@
 import { ReactNode, useMemo, useState } from "react"
 import { useTranslation } from "react-i18next"
-import { useNavigate } from "react-router-dom"
+import { Link, useNavigate } from "react-router-dom"
 
 import {
   ArrowDownRightMini,
@@ -18,9 +18,9 @@ import {
   AdminOrder,
   AdminOrderLineItem,
   AdminOrderPreview,
+  AdminPaymentCollection,
   AdminRegion,
   AdminReturn,
-  AdminPaymentCollection,
 } from "@medusajs/types"
 import {
   Badge,
@@ -188,16 +188,12 @@ export const OrderSummarySection = ({ order }: OrderSummarySectionProps) => {
         <div className="bg-ui-bg-subtle flex items-center justify-end gap-x-2 rounded-b-xl px-4 py-4">
           {showReturns &&
             (receivableReturns.length === 1 ? (
-              <Button
+              <Button asChild variant="secondary" size="small">
-                onClick={() =>
+                <Link
-                  navigate(
+                  to={`/orders/${order.id}/returns/${receivableReturns[0].id}/receive`}
-                    `/orders/${order.id}/returns/${receivableReturns[0].id}/receive`
+                >
-                  )
+                  {t("orders.returns.receive.action")}
-                }
+                </Link>
-                variant="secondary"
-                size="small"
-              >
-                {t("orders.returns.receive.action")}
               </Button>
             ) : (
               <ActionMenu
@@ -236,11 +232,10 @@ export const OrderSummarySection = ({ order }: OrderSummarySectionProps) => {
             ))}
 
           {showAllocateButton && (
-            <Button
+            <Button asChild variant="secondary" size="small">
-              onClick={() => navigate(`./allocate-items`)}
+              <Link to="allocate-items">
-              variant="secondary"
+                {t("orders.allocateItems.action")}
-            >
+              </Link>
-              {t("orders.allocateItems.action")}
             </Button>
           )}
 
@@ -262,17 +257,15 @@ export const OrderSummarySection = ({ order }: OrderSummarySectionProps) => {
           )}
 
           {showRefund && (
-            <Button
+            <Button size="small" variant="secondary" asChild>
-              size="small"
+              <Link to={`/orders/${order.id}/refund`}>
-              variant="secondary"
+                {t("orders.payment.refundAmount", {
-              onClick={() => navigate(`/orders/${order.id}/refund`)}
+                  amount: getStylizedAmount(
-            >
+                    pendingDifference * -1,
-              {t("orders.payment.refundAmount", {
+                    order?.currency_code
-                amount: getStylizedAmount(
+                  ),
-                  pendingDifference * -1,
+                })}
-                  order?.currency_code
+              </Link>
-                ),
-              })}
             </Button>
           )}
         </div>