From 4d750c13d99f770292c25624b1053746a01aba9e Mon Sep 17 00:00:00 2001
From: Kasper Fabricius Kristensen
 <45367945+kasperkristensen@users.noreply.github.com>
Date: Mon, 8 Jul 2024 10:03:04 +0200
Subject: [PATCH] make whole card clickable (#7984)

---
 .../common/icon-avatar/icon-avatar.tsx        |   2 +-
 .../dashboard/src/i18n/translations/en.json   |  14 +-
 .../locations/location-list/location-list.tsx | 120 +++++++++---------
 3 files changed, 72 insertions(+), 64 deletions(-)

diff --git a/packages/admin-next/dashboard/src/components/common/icon-avatar/icon-avatar.tsx b/packages/admin-next/dashboard/src/components/common/icon-avatar/icon-avatar.tsx
index ab7f739e63..1226cbd7b0 100644
--- a/packages/admin-next/dashboard/src/components/common/icon-avatar/icon-avatar.tsx
+++ b/packages/admin-next/dashboard/src/components/common/icon-avatar/icon-avatar.tsx
@@ -14,7 +14,7 @@ export const IconAvatar = ({ children, className }: IconAvatarProps) => {
   return (
     <div
       className={clx(
-        "shadow-borders-base flex size-7 items-center justify-center rounded-md",
+        "shadow-borders-base bg-ui-bg-base flex size-7 items-center justify-center rounded-md",
         "[&>div]:bg-ui-bg-field [&>div]:text-ui-fg-subtle [&>div]:flex [&>div]:size-6 [&>div]:items-center [&>div]:justify-center [&>div]:rounded-[4px]",
         className
       )}
diff --git a/packages/admin-next/dashboard/src/i18n/translations/en.json b/packages/admin-next/dashboard/src/i18n/translations/en.json
index f7fa52b375..f2b39adf70 100644
--- a/packages/admin-next/dashboard/src/i18n/translations/en.json
+++ b/packages/admin-next/dashboard/src/i18n/translations/en.json
@@ -900,11 +900,15 @@
       }
     },
     "sidebar": {
-      "shippingConfiguration": "Shipping configuration",
-      "shippingProfiles": "Shipping profiles",
-      "shippingProfilesDesc": "Shipping rules for different types of products",
-      "shippingOptionTypes": "Shipping Option Types",
-      "shippingOptionTypesDesc": "Group options based on characteristic"
+      "header": "Shipping Configuration",
+      "shippingProfiles": {
+        "label": "Shipping Profiles",
+        "description": "Group products by shipping requirements"
+      },
+      "shippingOptionTypes": {
+        "label": "Shipping Option Types",
+        "description": "Group options based on characteristic"
+      }
     },
     "salesChannels": {
       "header": "Sales Channels",
diff --git a/packages/admin-next/dashboard/src/routes/locations/location-list/location-list.tsx b/packages/admin-next/dashboard/src/routes/locations/location-list/location-list.tsx
index 5c5f04cbd2..8ac1854d40 100644
--- a/packages/admin-next/dashboard/src/routes/locations/location-list/location-list.tsx
+++ b/packages/admin-next/dashboard/src/routes/locations/location-list/location-list.tsx
@@ -1,15 +1,17 @@
-import { Outlet, useLoaderData, useNavigate } from "react-router-dom"
-import { Container, Heading, IconButton } from "@medusajs/ui"
 import { ArrowUpRightOnBox, Buildings, ShoppingBag } from "@medusajs/icons"
+import { Container, Heading, Text } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
+import { Link, Outlet, useLoaderData } from "react-router-dom"
 
 import { useStockLocations } from "../../../hooks/api/stock-locations"
 import LocationListItem from "./components/location-list-item/location-list-item"
 import { LOCATION_LIST_FIELDS } from "./constants"
 import { shippingListLoader } from "./loader"
 
+import { ReactNode } from "react"
 import after from "virtual:medusa/widgets/location/list/after"
 import before from "virtual:medusa/widgets/location/list/before"
+import { IconAvatar } from "../../../components/common/icon-avatar"
 import { LocationListHeader } from "./components/location-list-header"
 
 export function LocationList() {
@@ -67,71 +69,73 @@ export function LocationList() {
   )
 }
 
+interface SidebarLinkProps {
+  to: string
+  labelKey: string
+  descriptionKey: string
+  icon: ReactNode
+}
+
+const SidebarLink = ({
+  to,
+  labelKey,
+  descriptionKey,
+  icon,
+}: SidebarLinkProps) => {
+  return (
+    <Link to={to} className="group outline-none">
+      <div className="flex flex-col gap-2 px-2 pb-2">
+        <div className="shadow-elevation-card-rest bg-ui-bg-component transition-fg hover:bg-ui-bg-component-hover active:bg-ui-bg-component-pressed group-focus-visible:shadow-borders-interactive-with-active rounded-md px-4 py-2">
+          <div className="flex items-center gap-4">
+            <IconAvatar>{icon}</IconAvatar>
+            <div className="flex flex-1 flex-col">
+              <Text size="small" leading="compact" weight="plus">
+                {labelKey}
+              </Text>
+              <Text
+                size="small"
+                leading="compact"
+                className="text-ui-fg-subtle"
+              >
+                {descriptionKey}
+              </Text>
+            </div>
+            <div className="flex size-7 items-center justify-center">
+              <ArrowUpRightOnBox className="text-ui-fg-muted" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </Link>
+  )
+}
+
 const LinksSection = () => {
   const { t } = useTranslation()
-  const navigate = useNavigate()
 
   return (
     <Container className="p-0">
       <div className="flex items-center justify-between px-6 py-4">
-        <Heading level="h2">
-          {t("stockLocations.sidebar.shippingConfiguration")}
-        </Heading>
+        <Heading level="h2">{t("stockLocations.sidebar.header")}</Heading>
       </div>
 
-      <div className="txt-small flex flex-col gap-2 px-2 pb-2">
-        <div className="shadow-elevation-card-rest bg-ui-bg-component rounded-md px-4 py-2">
-          <div className="flex items-center gap-3">
-            <div className="shadow-elevation-card-rest rounded-md">
-              <ShoppingBag />
-            </div>
-            <div className="flex flex-1 flex-col">
-              <span className="text-ui-fg-base font-medium">
-                {t("stockLocations.sidebar.shippingProfiles")}
-              </span>
-              <span className="text-ui-fg-subtle">
-                {t("stockLocations.sidebar.shippingProfilesDesc")}
-              </span>
-            </div>
-            <IconButton
-              size="2xsmall"
-              variant="transparent"
-              type="button"
-              onClick={() => navigate(`/settings/locations/shipping-profiles`)}
-            >
-              <ArrowUpRightOnBox className="text-ui-fg-muted" />
-            </IconButton>
-          </div>
-        </div>
-      </div>
+      <SidebarLink
+        to="/settings/locations/shipping-profiles"
+        labelKey={t("stockLocations.sidebar.shippingProfiles.label")}
+        descriptionKey={t(
+          "stockLocations.sidebar.shippingProfiles.description"
+        )}
+        icon={<ShoppingBag />}
+      />
 
-      <div className="txt-small flex flex-col gap-2 px-2 pb-2">
-        <div className="shadow-elevation-card-rest bg-ui-bg-component rounded-md px-4 py-2">
-          <div className="flex items-center gap-3">
-            <div className="shadow-elevation-card-rest rounded-md">
-              <Buildings />
-            </div>
-            <div className="flex flex-1 flex-col">
-              <span className="text-ui-fg-base font-medium">
-                {t("stockLocations.sidebar.shippingOptionTypes")}
-              </span>
-              <span className="text-ui-fg-subtle">
-                {t("stockLocations.sidebar.shippingOptionTypesDesc")}
-              </span>
-            </div>
-            <IconButton
-              size="2xsmall"
-              variant="transparent"
-              type="button"
-              onClick={() =>
-                navigate(`/settings/locations/shipping-option-types`)
-              }
-            >
-              <ArrowUpRightOnBox className="text-ui-fg-muted" />
-            </IconButton>
-          </div>
-        </div>
-      </div>
+      <SidebarLink
+        to="/settings/locations/shipping-option-types"
+        labelKey={t("stockLocations.sidebar.shippingOptionTypes.label")}
+        descriptionKey={t(
+          "stockLocations.sidebar.shippingOptionTypes.description"
+        )}
+        icon={<Buildings />}
+      />
     </Container>
   )
 }