From 2a25b4d95f2b7a4d53138718c94124f47f041b36 Mon Sep 17 00:00:00 2001
From: Kasper Fabricius Kristensen
 <45367945+kasperkristensen@users.noreply.github.com>
Date: Wed, 15 Jan 2025 18:57:43 +0100
Subject: [PATCH] chore(dashboard,icons): Update icons and switch icon in
 CategoryTree (#10961)

Co-authored-by: Oli Juhl <59018053+olivermrbl@users.noreply.github.com>
---
 .changeset/weak-poems-run.md                  |   6 +
 .../common/sortable-tree/tree-item.tsx        |   4 +-
 .../components/__tests__/house-star.spec.tsx  |  17 +++
 .../__tests__/shield-check.spec.tsx           |  17 +++
 .../__tests__/tag-illustration.spec.tsx       |  17 +++
 .../icons/src/components/house-star.tsx       |  33 +++++
 .../icons/src/components/index.ts             |   3 +
 .../icons/src/components/shield-check.tsx     |  23 +++
 .../src/components/square-blue-solid.tsx      |  13 +-
 .../src/components/square-green-solid.tsx     |  13 +-
 .../src/components/square-grey-solid.tsx      |  13 +-
 .../src/components/square-orange-solid.tsx    |  13 +-
 .../src/components/square-purple-solid.tsx    |  13 +-
 .../icons/src/components/square-red-solid.tsx |  13 +-
 .../icons/src/components/tag-illustration.tsx | 133 ++++++++++++++++++
 15 files changed, 293 insertions(+), 38 deletions(-)
 create mode 100644 .changeset/weak-poems-run.md
 create mode 100644 packages/design-system/icons/src/components/__tests__/house-star.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/shield-check.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/tag-illustration.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/house-star.tsx
 create mode 100644 packages/design-system/icons/src/components/shield-check.tsx
 create mode 100644 packages/design-system/icons/src/components/tag-illustration.tsx

diff --git a/.changeset/weak-poems-run.md b/.changeset/weak-poems-run.md
new file mode 100644
index 0000000000..40ca7dbabe
--- /dev/null
+++ b/.changeset/weak-poems-run.md
@@ -0,0 +1,6 @@
+---
+"@medusajs/icons": patch
+"@medusajs/dashboard": patch
+---
+
+chore(icons,dashboard): Pull latest icons and update branch icon in category tree
diff --git a/packages/admin/dashboard/src/components/common/sortable-tree/tree-item.tsx b/packages/admin/dashboard/src/components/common/sortable-tree/tree-item.tsx
index 1e455df246..1516e68a42 100644
--- a/packages/admin/dashboard/src/components/common/sortable-tree/tree-item.tsx
+++ b/packages/admin/dashboard/src/components/common/sortable-tree/tree-item.tsx
@@ -4,7 +4,7 @@ import {
   DotsSix,
   FolderIllustration,
   FolderOpenIllustration,
-  Swatch,
+  TagIllustration,
   TriangleRightMini,
 } from "@medusajs/icons"
 import { Badge, clx, IconButton } from "@medusajs/ui"
@@ -136,7 +136,7 @@ const Icon = ({ childrenCount, collapsed, clone }: IconProps) => {
           <FolderIllustration />
         )
       ) : (
-        <Swatch className="text-ui-fg-muted" />
+        <TagIllustration />
       )}
     </div>
   )
diff --git a/packages/design-system/icons/src/components/__tests__/house-star.spec.tsx b/packages/design-system/icons/src/components/__tests__/house-star.spec.tsx
new file mode 100644
index 0000000000..79114305d8
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/house-star.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import HouseStar from "../house-star"
+
+  describe("HouseStar", () => {
+    it("should render the icon without errors", async () => {
+      render(<HouseStar data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/shield-check.spec.tsx b/packages/design-system/icons/src/components/__tests__/shield-check.spec.tsx
new file mode 100644
index 0000000000..defb50cfd9
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/shield-check.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import ShieldCheck from "../shield-check"
+
+  describe("ShieldCheck", () => {
+    it("should render the icon without errors", async () => {
+      render(<ShieldCheck data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/tag-illustration.spec.tsx b/packages/design-system/icons/src/components/__tests__/tag-illustration.spec.tsx
new file mode 100644
index 0000000000..842b222e16
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/tag-illustration.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import TagIllustration from "../tag-illustration"
+
+  describe("TagIllustration", () => {
+    it("should render the icon without errors", async () => {
+      render(<TagIllustration data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/house-star.tsx b/packages/design-system/icons/src/components/house-star.tsx
new file mode 100644
index 0000000000..97c8b81ac9
--- /dev/null
+++ b/packages/design-system/icons/src/components/house-star.tsx
@@ -0,0 +1,33 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const HouseStar = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M13.056 7.008v-1.29c0-.277-.13-.539-.351-.707L8.038 1.465a.89.89 0 0 0-1.076 0L2.296 5.01a.89.89 0 0 0-.352.708v6.448c0 .981.796 1.777 1.778 1.777H6.42"
+        />
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="m10.903 8.708.892 1.808 1.997.29-1.445 1.408.341 1.989-1.785-.939-1.786.939.341-1.989-1.444-1.408 1.996-.29z"
+        />
+      </svg>
+    )
+  }
+)
+HouseStar.displayName = "HouseStar"
+export default HouseStar
diff --git a/packages/design-system/icons/src/components/index.ts b/packages/design-system/icons/src/components/index.ts
index a56759909d..33c5637ada 100644
--- a/packages/design-system/icons/src/components/index.ts
+++ b/packages/design-system/icons/src/components/index.ts
@@ -177,6 +177,7 @@ export { default as Hashtag } from "./hashtag"
 export { default as HeartBroken } from "./heart-broken"
 export { default as Heart } from "./heart"
 export { default as History } from "./history"
+export { default as HouseStar } from "./house-star"
 export { default as House } from "./house"
 export { default as InboxSolid } from "./inbox-solid"
 export { default as InformationCircleSolid } from "./information-circle-solid"
@@ -253,6 +254,7 @@ export { default as ServerStackSolid } from "./server-stack-solid"
 export { default as ServerStack } from "./server-stack"
 export { default as Server } from "./server"
 export { default as Share } from "./share"
+export { default as ShieldCheck } from "./shield-check"
 export { default as Shipbob } from "./shipbob"
 export { default as ShoppingBag } from "./shopping-bag"
 export { default as ShoppingCartSolid } from "./shopping-cart-solid"
@@ -287,6 +289,7 @@ export { default as SunSolid } from "./sun-solid"
 export { default as Sun } from "./sun"
 export { default as SwatchSolid } from "./swatch-solid"
 export { default as Swatch } from "./swatch"
+export { default as TagIllustration } from "./tag-illustration"
 export { default as TagSolid } from "./tag-solid"
 export { default as Tag } from "./tag"
 export { default as Tailwind } from "./tailwind"
diff --git a/packages/design-system/icons/src/components/shield-check.tsx b/packages/design-system/icons/src/components/shield-check.tsx
new file mode 100644
index 0000000000..123f753f59
--- /dev/null
+++ b/packages/design-system/icons/src/components/shield-check.tsx
@@ -0,0 +1,23 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const ShieldCheck = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          fill={color}
+          d="M12.64 2 7.974.507c-.31-.1-.638-.099-.948 0L2.36 2a1.55 1.55 0 0 0-1.081 1.482v5.796c0 3.118 4.396 4.781 5.742 5.217a1.56 1.56 0 0 0 .958 0c1.348-.435 5.744-2.098 5.744-5.216V3.482c0-.68-.434-1.275-1.082-1.482m-2.383 3.902-3.02 4a.67.67 0 0 1-.986.086l-1.43-1.333a.667.667 0 0 1 .908-.976l.89.829 2.574-3.41a.667.667 0 0 1 1.064.804"
+        />
+      </svg>
+    )
+  }
+)
+ShieldCheck.displayName = "ShieldCheck"
+export default ShieldCheck
diff --git a/packages/design-system/icons/src/components/square-blue-solid.tsx b/packages/design-system/icons/src/components/square-blue-solid.tsx
index 76698731f3..d03e862473 100644
--- a/packages/design-system/icons/src/components/square-blue-solid.tsx
+++ b/packages/design-system/icons/src/components/square-blue-solid.tsx
@@ -13,13 +13,14 @@ const SquareBlueSolid = React.forwardRef<SVGSVGElement, IconProps>(
       >
         <rect width={8} height={8} x={3.5} y={3.5} fill="#60A5FA" rx={2} />
         <rect
-          width={7}
-          height={7}
-          x={4}
-          y={4}
+          width={7.5}
+          height={7.5}
+          x={3.75}
+          y={3.75}
           stroke={color}
-          strokeOpacity={0.12}
-          rx={1.5}
+          strokeOpacity={0.24}
+          strokeWidth={0.5}
+          rx={1.75}
         />
       </svg>
     )
diff --git a/packages/design-system/icons/src/components/square-green-solid.tsx b/packages/design-system/icons/src/components/square-green-solid.tsx
index 43ac6e4dc5..2dd1884067 100644
--- a/packages/design-system/icons/src/components/square-green-solid.tsx
+++ b/packages/design-system/icons/src/components/square-green-solid.tsx
@@ -13,13 +13,14 @@ const SquareGreenSolid = React.forwardRef<SVGSVGElement, IconProps>(
       >
         <rect width={8} height={8} x={3.5} y={3.5} fill="#10B981" rx={2} />
         <rect
-          width={7}
-          height={7}
-          x={4}
-          y={4}
+          width={7.5}
+          height={7.5}
+          x={3.75}
+          y={3.75}
           stroke={color}
-          strokeOpacity={0.12}
-          rx={1.5}
+          strokeOpacity={0.24}
+          strokeWidth={0.5}
+          rx={1.75}
         />
       </svg>
     )
diff --git a/packages/design-system/icons/src/components/square-grey-solid.tsx b/packages/design-system/icons/src/components/square-grey-solid.tsx
index 44d73db761..57447ddb2c 100644
--- a/packages/design-system/icons/src/components/square-grey-solid.tsx
+++ b/packages/design-system/icons/src/components/square-grey-solid.tsx
@@ -13,13 +13,14 @@ const SquareGreySolid = React.forwardRef<SVGSVGElement, IconProps>(
       >
         <rect width={8} height={8} x={3.5} y={3.5} fill="#A1A1AA" rx={2} />
         <rect
-          width={7}
-          height={7}
-          x={4}
-          y={4}
+          width={7.5}
+          height={7.5}
+          x={3.75}
+          y={3.75}
           stroke={color}
-          strokeOpacity={0.12}
-          rx={1.5}
+          strokeOpacity={0.24}
+          strokeWidth={0.5}
+          rx={1.75}
         />
       </svg>
     )
diff --git a/packages/design-system/icons/src/components/square-orange-solid.tsx b/packages/design-system/icons/src/components/square-orange-solid.tsx
index f2cec51cdc..65dbc7360d 100644
--- a/packages/design-system/icons/src/components/square-orange-solid.tsx
+++ b/packages/design-system/icons/src/components/square-orange-solid.tsx
@@ -13,13 +13,14 @@ const SquareOrangeSolid = React.forwardRef<SVGSVGElement, IconProps>(
       >
         <rect width={8} height={8} x={3.5} y={3.5} fill="#F97316" rx={2} />
         <rect
-          width={7}
-          height={7}
-          x={4}
-          y={4}
+          width={7.5}
+          height={7.5}
+          x={3.75}
+          y={3.75}
           stroke={color}
-          strokeOpacity={0.12}
-          rx={1.5}
+          strokeOpacity={0.24}
+          strokeWidth={0.5}
+          rx={1.75}
         />
       </svg>
     )
diff --git a/packages/design-system/icons/src/components/square-purple-solid.tsx b/packages/design-system/icons/src/components/square-purple-solid.tsx
index 8bc3bc4aa3..8ded5ff77a 100644
--- a/packages/design-system/icons/src/components/square-purple-solid.tsx
+++ b/packages/design-system/icons/src/components/square-purple-solid.tsx
@@ -13,13 +13,14 @@ const SquarePurpleSolid = React.forwardRef<SVGSVGElement, IconProps>(
       >
         <rect width={8} height={8} x={3.5} y={3.5} fill="#A78BFA" rx={2} />
         <rect
-          width={7}
-          height={7}
-          x={4}
-          y={4}
+          width={7.5}
+          height={7.5}
+          x={3.75}
+          y={3.75}
           stroke={color}
-          strokeOpacity={0.12}
-          rx={1.5}
+          strokeOpacity={0.24}
+          strokeWidth={0.5}
+          rx={1.75}
         />
       </svg>
     )
diff --git a/packages/design-system/icons/src/components/square-red-solid.tsx b/packages/design-system/icons/src/components/square-red-solid.tsx
index df33a4c63f..9bdf2bd233 100644
--- a/packages/design-system/icons/src/components/square-red-solid.tsx
+++ b/packages/design-system/icons/src/components/square-red-solid.tsx
@@ -13,13 +13,14 @@ const SquareRedSolid = React.forwardRef<SVGSVGElement, IconProps>(
       >
         <rect width={8} height={8} x={3.5} y={3.5} fill="#F43F5E" rx={2} />
         <rect
-          width={7}
-          height={7}
-          x={4}
-          y={4}
+          width={7.5}
+          height={7.5}
+          x={3.75}
+          y={3.75}
           stroke={color}
-          strokeOpacity={0.12}
-          rx={1.5}
+          strokeOpacity={0.24}
+          strokeWidth={0.5}
+          rx={1.75}
         />
       </svg>
     )
diff --git a/packages/design-system/icons/src/components/tag-illustration.tsx b/packages/design-system/icons/src/components/tag-illustration.tsx
new file mode 100644
index 0000000000..73e97da437
--- /dev/null
+++ b/packages/design-system/icons/src/components/tag-illustration.tsx
@@ -0,0 +1,133 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const TagIllustration = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <g filter="url(#a)">
+          <path
+            fill="#818CF8"
+            d="M12.863 6.686 8.315 2.138A2.16 2.16 0 0 0 6.777 1.5H2.884c-.763 0-1.384.62-1.384 1.384v3.893c0 .581.226 1.127.638 1.538l4.548 4.548c.41.412.957.637 1.537.637s1.128-.226 1.538-.637l3.102-3.102c.412-.41.637-.957.637-1.538 0-.58-.226-1.127-.637-1.537"
+          />
+          <path
+            fill="url(#b)"
+            fillOpacity={0.2}
+            d="M12.863 6.686 8.315 2.138A2.16 2.16 0 0 0 6.777 1.5H2.884c-.763 0-1.384.62-1.384 1.384v3.893c0 .581.226 1.127.638 1.538l4.548 4.548c.41.412.957.637 1.537.637s1.128-.226 1.538-.637l3.102-3.102c.412-.41.637-.957.637-1.538 0-.58-.226-1.127-.637-1.537"
+          />
+        </g>
+        <path
+          stroke="#000"
+          strokeOpacity={0.15}
+          strokeWidth={0.5}
+          d="M6.863 12.687 2.313 8.137a1.9 1.9 0 0 1-.564-1.361V2.884c0-.625.509-1.134 1.134-1.134h3.893c.515 0 .997.2 1.361.564l4.549 4.548c.363.364.563.847.563 1.361 0 .515-.2.998-.563 1.361l-3.103 3.103a1.9 1.9 0 0 1-1.36.563c-.515 0-.998-.2-1.361-.563Z"
+        />
+        <g filter="url(#c)">
+          <path
+            fill="#818CF8"
+            d="M5.257 6.246a.99.99 0 0 1-.989-.989.99.99 0 0 1 .989-.989.99.99 0 0 1 .989.99.99.99 0 0 1-.989.988m3.385 3.979a.59.59 0 0 1-.838 0L6.222 8.643a.593.593 0 1 1 .84-.84l1.581 1.582a.593.593 0 0 1 0 .84m1.582-1.582a.59.59 0 0 1-.838 0L7.804 7.06a.593.593 0 1 1 .84-.84l1.581 1.582a.593.593 0 0 1 0 .84"
+          />
+          <path
+            fill="url(#d)"
+            fillOpacity={0.15}
+            d="M5.257 6.246a.99.99 0 0 1-.989-.989.99.99 0 0 1 .989-.989.99.99 0 0 1 .989.99.99.99 0 0 1-.989.988m3.385 3.979a.59.59 0 0 1-.838 0L6.222 8.643a.593.593 0 1 1 .84-.84l1.581 1.582a.593.593 0 0 1 0 .84m1.582-1.582a.59.59 0 0 1-.838 0L7.804 7.06a.593.593 0 1 1 .84-.84l1.581 1.582a.593.593 0 0 1 0 .84"
+          />
+        </g>
+        <defs>
+          <linearGradient
+            id="b"
+            x1={7.5}
+            x2={7.5}
+            y1={1.5}
+            y2={13.5}
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#fff" />
+            <stop offset={1} stopColor="#fff" stopOpacity={0} />
+          </linearGradient>
+          <linearGradient
+            id="d"
+            x1={7.333}
+            x2={7.333}
+            y1={4.268}
+            y2={10.399}
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop />
+            <stop offset={1} stopOpacity={0} />
+          </linearGradient>
+          <filter
+            id="a"
+            width={12}
+            height={12}
+            x={1.5}
+            y={1.5}
+            colorInterpolationFilters="sRGB"
+            filterUnits="userSpaceOnUse"
+          >
+            <feFlood floodOpacity={0} result="BackgroundImageFix" />
+            <feBlend
+              in="SourceGraphic"
+              in2="BackgroundImageFix"
+              result="shape"
+            />
+            <feColorMatrix
+              in="SourceAlpha"
+              result="hardAlpha"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            />
+            <feOffset dy={-0.5} />
+            <feComposite in2="hardAlpha" k2={-1} k3={1} operator="arithmetic" />
+            <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0" />
+            <feBlend in2="shape" result="effect1_innerShadow_9148_1663" />
+          </filter>
+          <filter
+            id="c"
+            width={6.13}
+            height={6.13}
+            x={4.268}
+            y={4.268}
+            colorInterpolationFilters="sRGB"
+            filterUnits="userSpaceOnUse"
+          >
+            <feFlood floodOpacity={0} result="BackgroundImageFix" />
+            <feBlend
+              in="SourceGraphic"
+              in2="BackgroundImageFix"
+              result="shape"
+            />
+            <feColorMatrix
+              in="SourceAlpha"
+              result="hardAlpha"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            />
+            <feOffset dy={-0.5} />
+            <feComposite in2="hardAlpha" k2={-1} k3={1} operator="arithmetic" />
+            <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0" />
+            <feBlend in2="shape" result="effect1_innerShadow_9148_1663" />
+            <feColorMatrix
+              in="SourceAlpha"
+              result="hardAlpha"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            />
+            <feOffset dy={0.5} />
+            <feComposite in2="hardAlpha" k2={-1} k3={1} operator="arithmetic" />
+            <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0" />
+            <feBlend
+              in2="effect1_innerShadow_9148_1663"
+              result="effect2_innerShadow_9148_1663"
+            />
+          </filter>
+        </defs>
+      </svg>
+    )
+  }
+)
+TagIllustration.displayName = "TagIllustration"
+export default TagIllustration