added new card to onboarding

src/admin/components/onboarding-flow/orders/order-detail.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import IconBadge from "../../shared/icon-badge";
 import ComputerDesktopIcon from "../../shared/icons/computer-desktop-icon";
 import DollarSignIcon from "../../shared/icons/dollar-sign-icon";
+import ToolsSolidIcon from "../../shared/icons/tools-solid";
 
 const OrderDetail = () => {
   return (
@@ -18,13 +19,14 @@ const OrderDetail = () => {
         Medusa is a completely customizable commerce solution. We've curated
         some essential guides to kickstart your development with Medusa.
       </p>
-      <div className="grid grid-cols-2 gap-4 mt-5 pb-5 mb-5 border-b border-gray-300 border-solid">
+      <div className="grid grid-cols-3 gap-4 mt-5 pb-5 mb-5 border-b border-gray-300 border-solid auto-rows-fr">
         <a
           href="https://docs.medusajs.com/starters/nextjs-medusa-starter?path=simple-quickstart"
           target="_blank"
+          className="flex"
         >
           <div
-            className="p-4 rounded-rounded flex items-center bg-slate-50"
+            className="p-4 rounded-rounded flex items-start bg-slate-50"
             style={{
               boxShadow:
                 "0px 0px 0px 1px rgba(17, 24, 28, 0.08), 0px 1px 2px -1px rgba(17, 24, 28, 0.08), 0px 2px 4px rgba(17, 24, 28, 0.04)",
@@ -40,8 +42,7 @@ const OrderDetail = () => {
                 Start Selling in 3 Steps
               </p>
               <p className="text-xs">
-                Go live with a backend, an admin,
-                <br /> and a storefront in three steps.
+                Go live with a backend, an admin, and a storefront by following these three steps.
               </p>
             </div>
           </div>
@@ -49,9 +50,10 @@ const OrderDetail = () => {
         <a
           href="https://docs.medusajs.com/recipes/?ref=onboarding"
           target="_blank"
+          className="flex"
         >
           <div
-            className="p-4 rounded-rounded items-center flex bg-slate-50"
+            className="p-4 rounded-rounded items-start flex bg-slate-50"
             style={{
               boxShadow:
                 "0px 0px 0px 1px rgba(17, 24, 28, 0.08), 0px 1px 2px -1px rgba(17, 24, 28, 0.08), 0px 2px 4px rgba(17, 24, 28, 0.04)",
@@ -64,11 +66,37 @@ const OrderDetail = () => {
             </div>
             <div>
               <p className="font-semibold text-gray-700">
-                Build a Custom Commerce Application
+                Build Custom Use Cases
               </p>
               <p className="text-xs">
-                Learn how to build a marketplace, subscription-based
-                <br /> purchases, or your custom use-case.
+                Learn how to build a marketplace, subscription-based purchases, or your custom use-case.
+              </p>
+            </div>
+          </div>
+        </a>
+        <a
+          href="https://docs.medusajs.com/beta/?ref=onboarding"
+          target="_blank"
+          className="flex"
+        >
+          <div
+            className="p-4 rounded-rounded flex items-start bg-slate-50"
+            style={{
+              boxShadow:
+                "0px 0px 0px 1px rgba(17, 24, 28, 0.08), 0px 1px 2px -1px rgba(17, 24, 28, 0.08), 0px 2px 4px rgba(17, 24, 28, 0.04)",
+            }}
+          >
+            <div className="mr-base">
+              <IconBadge>
+                <ToolsSolidIcon />
+              </IconBadge>
+            </div>
+            <div>
+              <p className="font-semibold text-gray-700">
+                Check out beta features
+              </p>
+              <p className="text-xs">
+                Learn about hidden beta features and how to enable them in your store.
               </p>
             </div>
           </div>

src/admin/components/shared/icons/tools-solid.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import IconProps from "../../../types/icon-type";
+
+const ToolsSolidIcon: React.FC<IconProps> = ({
+  size = "24",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path 
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.99753 6.06351C9.99737 5.44855 10.1413 4.84211 10.4177 4.29277C10.6941 3.74343 11.0953 3.26648 11.5893 2.90013C12.0832 2.53379 12.6561 2.28824 13.262 2.18315C13.8679 2.07807 14.49 2.11638 15.0784 2.29501C15.1714 2.32318 15.2556 2.37498 15.3226 2.44534C15.3896 2.5157 15.4373 2.60222 15.4609 2.69649C15.4846 2.79075 15.4834 2.88952 15.4575 2.98319C15.4316 3.07686 15.3819 3.16222 15.3132 3.23095L12.8233 5.72003C12.8706 6.07626 13.0303 6.42049 13.3041 6.69422C13.5778 6.96795 13.922 7.12769 14.279 7.17419L16.7673 4.6851C16.8361 4.6164 16.9214 4.56668 17.0151 4.54078C17.1088 4.51489 17.2075 4.5137 17.3018 4.53734C17.3961 4.56099 17.4826 4.60864 17.5529 4.67568C17.6233 4.74271 17.6751 4.82683 17.7033 4.91984C17.8902 5.53544 17.9234 6.18746 17.8 6.81886C17.6766 7.45026 17.4003 8.0418 16.9954 8.54174C16.5905 9.04167 16.0692 9.43477 15.4772 9.68663C14.8852 9.93849 14.2405 10.0415 13.5995 9.9865C12.8361 9.92201 12.1971 10.0615 11.8679 10.462L6.50576 16.9753C6.2862 17.2406 6.01366 17.4571 5.70559 17.611C5.39752 17.7649 5.06071 17.8528 4.71672 17.869C4.37273 17.8852 4.02915 17.8294 3.70797 17.7052C3.38679 17.5809 3.0951 17.391 2.85157 17.1475C2.60803 16.904 2.41803 16.6124 2.29372 16.2912C2.16941 15.9701 2.11353 15.6265 2.12967 15.2825C2.14581 14.9385 2.2336 14.6017 2.38743 14.2936C2.54126 13.9855 2.75773 13.7129 3.02299 13.4933L9.53556 8.13037C9.93528 7.8004 10.0755 7.16219 10.011 6.39874C10.0018 6.28723 9.99734 6.17539 9.99753 6.06351ZM4.08567 15.3442C4.08567 15.195 4.14493 15.0519 4.25041 14.9464C4.35589 14.8409 4.49895 14.7817 4.64813 14.7817H4.65413C4.8033 14.7817 4.94637 14.8409 5.05185 14.9464C5.15733 15.0519 5.21659 15.195 5.21659 15.3442V15.3501C5.21659 15.4993 5.15733 15.6424 5.05185 15.7479C4.94637 15.8534 4.8033 15.9126 4.65413 15.9126H4.64813C4.49895 15.9126 4.35589 15.8534 4.25041 15.7479C4.14493 15.6424 4.08567 15.4993 4.08567 15.3501V15.3442Z"
+        fill={color} />
+      <path 
+        d="M8.55462 7.48082L6.90398 5.83093V4.65651C6.90397 4.5594 6.87883 4.46395 6.83099 4.37945C6.78315 4.29495 6.71425 4.22427 6.631 4.17429L3.81868 2.4869C3.71112 2.42242 3.58509 2.39574 3.46063 2.41109C3.33616 2.42645 3.2204 2.48296 3.13173 2.57164L2.56926 3.13411C2.48058 3.22278 2.42407 3.33854 2.40871 3.46301C2.39336 3.58747 2.42004 3.7135 2.48452 3.82106L4.17191 6.63338C4.22189 6.71663 4.29257 6.78553 4.37707 6.83337C4.46157 6.88121 4.55702 6.90635 4.65413 6.90636H5.82705L7.37345 8.45276L8.55462 7.48007V7.48082Z"
+        fill={color}/>
+      <path
+        fillRule="evenodd"
+        clip-rule="evenodd" 
+        d="M10.4146 13.9971L13.5516 17.1334C13.7866 17.3685 14.0657 17.5549 14.3727 17.6821C14.6798 17.8093 15.009 17.8748 15.3414 17.8748C15.6737 17.8748 16.0029 17.8093 16.31 17.6821C16.617 17.5549 16.8961 17.3685 17.1311 17.1334C17.3661 16.8984 17.5526 16.6194 17.6798 16.3123C17.807 16.0052 17.8724 15.6761 17.8724 15.3437C17.8724 15.0113 17.807 14.6821 17.6798 14.3751C17.5526 14.068 17.3661 13.7889 17.1311 13.5539L14.6518 11.0753C14.2717 11.1292 13.8868 11.14 13.5043 11.1076C13.2089 11.0821 12.9929 11.1031 12.8541 11.1391C12.8102 11.1484 12.768 11.1643 12.7289 11.1863L10.4146 13.9971ZM12.9749 12.9772C13.0803 12.8719 13.2233 12.8127 13.3724 12.8127C13.5214 12.8127 13.6644 12.8719 13.7698 12.9772L15.176 14.3841C15.2312 14.4356 15.2756 14.4977 15.3063 14.5667C15.3371 14.6357 15.3536 14.7102 15.3549 14.7857C15.3563 14.8612 15.3424 14.9362 15.3141 15.0063C15.2858 15.0763 15.2437 15.1399 15.1903 15.1933C15.1369 15.2467 15.0732 15.2888 15.0032 15.3171C14.9332 15.3454 14.8581 15.3593 14.7826 15.358C14.7071 15.3566 14.6326 15.3401 14.5636 15.3094C14.4946 15.2786 14.4325 15.2343 14.381 15.179L12.9749 13.7729C12.8696 13.6674 12.8104 13.5245 12.8104 13.3754C12.8104 13.2264 12.8696 13.0834 12.9749 12.9779V12.9772Z"
+        fill={color} />
+    </svg>
+  );
+};
+
+export default ToolsSolidIcon;