docs: improve UX of recipe learning path (#5477)

* docs: improve UX of recipe learning path

* fix icon colors

www/packages/docs-ui/src/components/Notification/Item/Layout/Default/index.tsx

@@ -27,7 +27,7 @@ export const NotificationItemLayoutDefault: React.FC<
   closeButtonText = "Close",
 }) => {
   return (
-    <>
+    <div className="bg-medusa-bg-base w-full h-full shadow-flyout dark:shadow-flyout-dark rounded-docs_DEFAULT">
       <div className={clsx("flex gap-docs_1 p-docs_1")}>
         {type !== "none" && (
           <div
@@ -79,6 +79,6 @@ export const NotificationItemLayoutDefault: React.FC<
           <Button onClick={handleClose}>{closeButtonText}</Button>
         </div>
       )}
-    </>
+    </div>
   )
 }

www/packages/docs-ui/src/components/Notification/Item/index.tsx

@@ -36,8 +36,7 @@ export const NotificationItem = ({
   return (
     <div
       className={clsx(
-        "md:max-w-[320px] md:w-[320px] w-full bg-medusa-bg-base rounded-docs_DEFAULT",
-        "shadow-flyout dark:shadow-flyout-dark max-h-[calc(100vh-90px)]",
+        "md:max-w-[320px] md:w-[320px] w-full",
         "fixed md:right-docs_1 left-0 md:m-docs_1",
         placement === "bottom" && "md:bottom-docs_1 bottom-0",
         placement === "top" && "md:top-docs_1 top-0",

www/packages/docs-ui/src/components/Notification/index.tsx

@@ -24,7 +24,15 @@ export const NotificationContainer = () => {
     className?: string
   ) => {
     return (
-      <TransitionGroup className={className}>
+      <TransitionGroup
+        className={clsx(
+          "flex fixed flex-col gap-docs_0.5 right-0",
+          "md:w-auto w-full overflow-y-auto",
+          "max-h-[50%] md:max-h-[calc(100vh-57px)]",
+          notifications.length && "max-[768px]:h-[50%]",
+          className
+        )}
+      >
         {notifications.filter(condition).map((notification) => (
           <CSSTransition
             key={notification.id}
@@ -52,11 +60,11 @@ export const NotificationContainer = () => {
     <>
       {renderFilteredNotifications(
         (notification) => notification.placement === "top",
-        "flex fixed flex-col gap-docs_0.5 right-0 top-0 md:w-auto w-full max-h-[calc(100vh-57px)] overflow-y-auto"
+        "top-0"
       )}
       {renderFilteredNotifications(
         (notification) => notification.placement !== "top",
-        "flex flex-col gap-docs_0.5 fixed right-0 bottom-0 md:w-auto w-full max-h-[calc(100vh-57px)] overflow-y-auto"
+        "bottom-0"
       )}
     </>
   )

www/packages/tailwind/base.tailwind.config.js

@@ -560,6 +560,22 @@ module.exports = {
             opacity: 0.3,
           },
         },
+        minimize: {
+          from: {
+            transform: "scale(1)",
+          },
+          to: {
+            transform: "scale(0)",
+          },
+        },
+        maximize: {
+          from: {
+            transform: "scale(0)",
+          },
+          to: {
+            transform: "scale(1)",
+          },
+        },
       }),
       animation: {
         fadeIn: "fadeIn 500ms",
@@ -576,6 +592,8 @@ module.exports = {
         slideInLeft: "slideInLeft 500ms",
         slideOutLeft: "slideOutLeft 500ms",
         pulsingDots: "pulsingDots 1s alternate infinite",
+        minimize: "minimize 500ms",
+        maximize: "maximize 500ms",
       },
     },
     fontFamily: {
@@ -686,6 +704,9 @@ module.exports = {
               display: "none",
             },
           },
+          ".flip-y": {
+            transform: "rotateY(180deg)",
+          },
         })
         addComponents({
           ".btn-secondary-icon": {