docs: change logo (#10208)

* docs: changed logo

* remove unused component

www/apps/api-reference/config/index.ts

@@ -23,4 +23,5 @@ export const config: DocsConfig = {
     title: "API Reference",
     key: "api-reference",
   },
+  logo: `${process.env.NEXT_PUBLIC_BASE_PATH}/images/logo.png`,
 }

www/apps/book/config/index.ts

@@ -17,4 +17,5 @@ export const config: DocsConfig = {
   breadcrumbOptions: {
     showCategories: false,
   },
+  logo: `${process.env.NEXT_PUBLIC_BASE_PATH}/images/logo.png`,
 }

www/apps/resources/config/index.ts

@@ -20,4 +20,5 @@ export const config: DocsConfig = {
   breadcrumbOptions: {
     showCategories: true,
   },
+  logo: `${process.env.NEXT_PUBLIC_BASE_PATH}/images/logo.png`,
 }

www/apps/ui/src/config/site.ts

@@ -28,4 +28,5 @@ export const siteConfig: SiteConfig = {
   breadcrumbOptions: {
     showCategories: true,
   },
+  logo: `${process.env.NEXT_PUBLIC_BASE_PATH}/images/logo.png`,
 }

www/apps/user-guide/config/index.ts

@@ -20,4 +20,5 @@ export const config: DocsConfig = {
   breadcrumbOptions: {
     showCategories: true,
   },
+  logo: `${process.env.NEXT_PUBLIC_BASE_PATH}/images/logo.png`,
 }

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

@@ -10,6 +10,8 @@ export type BorderedIconProps = {
   iconWrapperClassName?: string
   iconClassName?: string
   iconColorClassName?: string
+  iconWidth?: number
+  iconHeight?: number
 } & React.HTMLAttributes<HTMLSpanElement>
 
 export const BorderedIcon = ({
@@ -19,6 +21,8 @@ export const BorderedIcon = ({
   iconClassName,
   iconColorClassName = "",
   wrapperClassName,
+  iconWidth = 28,
+  iconHeight = 28,
 }: BorderedIconProps) => {
   return (
     <span
@@ -33,8 +37,8 @@ export const BorderedIcon = ({
           <Image
             src={icon || ""}
             className={clsx(iconClassName, "bordered-icon rounded-docs_xs")}
-            width={28}
-            height={28}
+            width={iconWidth}
+            height={iconHeight}
             alt=""
           />
         )}

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

@@ -13,7 +13,6 @@ import {
 } from "../.."
 import { MainNavEditDate } from "./EditDate"
 import { MainNavItems } from "./Items"
-import { MedusaIcon } from "../Icons/MedusaLogo"
 import { MainNavDesktopMenu } from "./DesktopMenu"
 import { SidebarLeftIcon } from "../Icons/SidebarLeft"
 import { MainNavMobileMenu } from "./MobileMenu"
@@ -52,8 +51,10 @@ export const MainNav = ({ className, itemsClassName }: MainNavProps) => {
           )}
           <Link href={`${config.baseUrl}`}>
             <BorderedIcon
-              IconComponent={MedusaIcon}
+              icon={config.logo}
               iconWrapperClassName="my-[14px]"
+              iconWidth={20}
+              iconHeight={20}
             />
           </Link>
         </div>

www/packages/docs-ui/src/components/Sidebar/Top/MedusaMenu/index.tsx

@@ -14,7 +14,6 @@ import {
   SidebarLeft,
   TimelineVertical,
 } from "@medusajs/icons"
-import { MedusaIcon } from "../../../Icons/MedusaLogo"
 import { HouseIcon } from "../../../Icons/House"
 import { Menu } from "../../../Menu"
 
@@ -51,7 +50,7 @@ export const SidebarTopMedusaMenu = () => {
         tabIndex={-1}
         onClick={toggleOpen}
       >
-        <BorderedIcon IconComponent={MedusaIcon} />
+        <BorderedIcon icon="/images/logo.png" />
         <span className="text-compact-small-plus text-medusa-fg-base flex-1">
           Medusa Docs
         </span>

www/packages/docs-ui/src/providers/SiteConifg/index.tsx

@@ -37,6 +37,7 @@ export const SiteConfigProvider = ({
           showCategories: true,
         },
         reportIssueLink: GITHUB_ISSUES_LINK,
+        logo: "",
       },
       globalConfig,
       initConfig || {}

www/packages/types/src/config.ts

@@ -21,4 +21,5 @@ export declare type DocsConfig = {
     releaseUrl: string
   }
   reportIssueLink?: string
+  logo: string
 }