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"
       )}
     </>
   )