fix: components showcase and hide scrollbars

components/Header/Header.tsx

@@ -3,13 +3,9 @@ import { motion } from 'framer-motion'
 import clsx from 'clsx'
 import { useMemo } from 'react'
 import { useEffect, useState } from 'react'
-import {
-  COMPONENTS_LINK,
-  DOCS_LINK,
-  MOCHI_GITHUB_LINK,
-} from '../../constants/url'
-import { useFetchNPMData } from '../../hooks/useFetchNPMData'
-import { Logo } from '../Logo'
+import { COMPONENTS_LINK, DOCS_LINK, MOCHI_GITHUB_LINK } from '@/constants/url'
+import { useFetchNPMData } from '@/hooks/useFetchNPMData'
+import { Logo } from '@/components/Logo'
 
 const desktopNavItems = [
   <a key="components-button" href={COMPONENTS_LINK}>

components/Hero/Hero.tsx

@@ -34,6 +34,7 @@ export const Hero = ({
         }}
         className="h-full w-full bg-cover bg-center absolute top-0 -right-24"
       />
+
       <div className="section-container w-full absolute p-4 xl:p-0">
         <div
           className={clsx(

components/Logo/Logo.tsx

@@ -1,4 +1,7 @@
-import { ImageWithFallback, ImageWithFallbackProps } from '../ImageWithFallback'
+import {
+  ImageWithFallback,
+  ImageWithFallbackProps,
+} from '@/components/ImageWithFallback'
 
 export const Logo = (props: Partial<ImageWithFallbackProps>) => {
   const { src, fallbackImgUrl, ...rest } = props

components/pages/home/DesignGuideView/DesignGuide.tsx

@@ -3,7 +3,7 @@ import { LinkCircledSolid } from '@mochi-ui/icons'
 import PaperplaneCircle from '@mochi-ui/icons/solid/paperplane-circle'
 import clsx from 'clsx'
 import { DesignGuideCardItem } from './DesignGuideCardItem'
-import { DOCS_LINK, MOCHI_DISCORD_LINK } from '../../../../constants/url'
+import { DOCS_LINK, MOCHI_DISCORD_LINK } from '@/constants/url'
 
 export const DesignGuide = ({ className }: { className?: string }) => {
   return (

components/pages/home/DesignGuideView/DesignGuideCardItem.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx'
 import { AnchorHTMLAttributes, ReactNode } from 'react'
-import { ImageWithFallback } from '../../../ImageWithFallback'
+import { ImageWithFallback } from '@/components/ImageWithFallback'
 
 type DesignGuideCardItemProps = Partial<
   Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'title'>

components/pages/home/EasyCustomizationView/CodeSnippet.tsx

@@ -102,7 +102,7 @@ export const CodeSnippet = () => {
             level="p6"
             className="!text-[13px]"
             fontWeight="md"
-            color="textTertiary"
+            color="textContrast"
           >
             custom-card.tsx
           </Typography>
@@ -114,9 +114,11 @@ export const CodeSnippet = () => {
             <CopySolid className="w-6 h-6 text-neutral-0" onClick={onCopy} />
           </Tooltip>
         </div>
-        <div className="h-full overflow-auto px-6 md:px-8">
+        <div className="h-full overflow-auto hide-scrollbar px-6 md:px-8">
           <pre className="!bg-transparent !m-0 !pt-0 !pb-2 !text-sm static language-javascript">
-            <code className="language-javascript !px-0">{demoCode}</code>
+            <code className="language-javascript !px-0 hide-scrollbar">
+              {demoCode}
+            </code>
           </pre>
         </div>
 

components/pages/home/RichComponentsView/Dropdown.tsx

@@ -31,7 +31,11 @@ export const DropdownShowcase = () => {
   }, [])
 
   return (
-    <DropdownMenu open={isOpened} onOpenChange={() => setIsOpened(!isOpened)}>
+    <DropdownMenu
+      open={isOpened}
+      modal={false}
+      onOpenChange={(open) => setIsOpened(open)}
+    >
       <div className="w-[240px] h-max max-w-full flex justify-end">
         <DropdownMenuTrigger asChild>
           <ProfileBadge
@@ -45,6 +49,11 @@ export const DropdownShowcase = () => {
       <DropdownMenuContent
         className="max-h-[645px] overflow-y-auto"
         align="end"
+        onInteractOutside={(event) => {
+          if (event.type === 'dismissableLayer.focusOutside') {
+            event.preventDefault()
+          }
+        }}
       >
         <DropdownMenuLabel
           leftIcon={<UserSolid className="!text-neutral-800" />}

components/pages/home/RichComponentsView/Modal.tsx

@@ -9,7 +9,7 @@ import {
 import { SolidDotSolid } from '@mochi-ui/icons'
 import clsx from 'clsx'
 import { useState } from 'react'
-import { ImageWithFallback } from '../../../ImageWithFallback'
+import { ImageWithFallback } from '@/components/ImageWithFallback'
 
 export const ModalShowcase = () => {
   const [isOpened, setIsOpened] = useState(true)
@@ -24,7 +24,11 @@ export const ModalShowcase = () => {
   }
 
   return (
-    <Modal open={isOpened} onOpenChange={() => setIsOpened(!isOpened)}>
+    <Modal
+      open={isOpened}
+      modal={false}
+      onOpenChange={() => setIsOpened(!isOpened)}
+    >
       <ModalTrigger asChild>
         <Button>Open Modal</Button>
       </ModalTrigger>

components/pages/home/RichComponentsView/RichComponents.tsx

@@ -56,7 +56,7 @@ export const RichComponents = ({ className }: { className?: string }) => {
           Various components
         </Typography>
         <div className="flex flex-col md:flex-row gap-4 md:gap-8 justify-stretch">
-          <div className="flex flex-row md:flex-col gap-2 overflow-auto w-full md:w-[280px] shrink-0 h-full">
+          <div className="flex flex-row md:flex-col gap-2 overflow-auto hide-scrollbar w-full md:w-[280px] shrink-0 h-full">
             {tabData.map((tab, index) => (
               <Button
                 key={tab.title}

components/pages/home/RoadmapView/Roadmap.tsx

@@ -1,7 +1,7 @@
 import { Typography } from '@mochi-ui/core'
 import clsx from 'clsx'
-import { ROADMAP } from '../../../../constants/roadmap'
-import { ImageWithFallback } from '../../../ImageWithFallback'
+import { ROADMAP } from '@/constants/roadmap'
+import { ImageWithFallback } from '@/components/ImageWithFallback'
 
 export const Roadmap = ({ className }: { className?: string }) => {
   return (
@@ -25,7 +25,7 @@ export const Roadmap = ({ className }: { className?: string }) => {
         </Typography>
       </div>
 
-      <div className="overflow-auto pl-6 sm:pl-4">
+      <div className="overflow-auto hide-scrollbar pl-6 sm:pl-4">
         <div
           className="overflow-visible pb-8 pt-4 sm:pt-8"
           style={{

hooks/useFetchNPMData.ts

@@ -1,6 +1,6 @@
 import useSWR from 'swr'
-import { NPM_DATA_ENDPOINT } from '../constants/npm'
-import { NPMDataResponse } from '../types/npm'
+import { NPM_DATA_ENDPOINT } from '@/constants/npm'
+import { NPMDataResponse } from '@/types/npm'
 
 export const SWR_KEY_FETCH_NPM_DATA = 'SWR_KEY_FETCH_NPM_DATA'
 

package.json

@@ -13,11 +13,11 @@
     "postinstall": "npx husky install"
   },
   "dependencies": {
-    "@mochi-ui/core": "^0.10.0",
-    "@mochi-ui/icons": "^0.6.0",
-    "@mochi-ui/theme": "^0.11.0",
-    "highlight.js": "^11.9.0",
+    "@mochi-ui/core": "^0.11.1",
+    "@mochi-ui/icons": "^0.7.0",
+    "@mochi-ui/theme": "^0.12.1",
     "clsx": "^2.0.0",
+    "highlight.js": "^11.9.0",
     "next": "14.0.3",
     "next-plausible": "^3.12.0",
     "react": "^18",

pages/examples/rich-components/dropdown.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { DropdownShowcase } from '../../../components/pages/home/RichComponentsView'
+import { DropdownShowcase } from '@/components/pages/home/RichComponentsView'
 
 const MochiUIModal = () => {
   const [isSSR, setIsSSR] = useState(true)
@@ -9,7 +9,7 @@ const MochiUIModal = () => {
   }, [])
 
   return !isSSR ? (
-    <div className="h-[450px] md:h-[478px] flex justify-center p-4 md:p-6 pt-12">
+    <div className="h-[450px] sm:h-[478px] flex justify-center p-4 sm:p-6 pt-8 sm:pt-12 bg-neutral-100">
       <DropdownShowcase />
     </div>
   ) : null

pages/examples/rich-components/modal.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { ModalShowcase } from '../../../components/pages/home/RichComponentsView'
+import { ModalShowcase } from '@/components/pages/home/RichComponentsView'
 
 const MochiUIModal = () => {
   const [isSSR, setIsSSR] = useState(true)
@@ -9,7 +9,7 @@ const MochiUIModal = () => {
   }, [])
 
   return !isSSR ? (
-    <div className="h-[450px] md:h-[478px] p-4 md:p-6 flex justify-center items-center">
+    <div className="h-[450px] sm:h-[478px] p-4 sm:p-6 flex justify-center items-center bg-neutral-100">
       <ModalShowcase />
     </div>
   ) : null

pages/index.tsx

@@ -8,26 +8,27 @@ import {
   TipColored,
 } from '@mochi-ui/icons'
 import Head from 'next/head'
-import { Header } from '../components/Header'
-import { Hero } from '../components/Hero'
-import { GridContent } from '../components/GridContent'
-import { Divider } from '../components/Divider'
-import { RichComponents } from '../components/pages/home/RichComponentsView'
-import { EasyCustomization } from '../components/pages/home/EasyCustomizationView'
-import { DesignGuide } from '../components/pages/home/DesignGuideView'
-import { CallToAction } from '../components/CallToAction'
 import { Inter } from 'next/font/google'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
+import clsx from 'clsx'
+import { Header } from '@/components/Header'
+import { Hero } from '@/components/Hero'
+import { GridContent } from '@/components/GridContent'
+import { Divider } from '@/components/Divider'
+import { RichComponents } from '@/components/pages/home/RichComponentsView'
+import { EasyCustomization } from '@/components/pages/home/EasyCustomizationView'
+import { DesignGuide } from '@/components/pages/home/DesignGuideView'
+import { CallToAction } from '@/components/CallToAction'
 import {
   COMPONENTS_LINK,
   DOCS_LINK,
   MOCHI_DISCORD_LINK,
   MOCHI_GITHUB_BUG_REPORT_LINK,
   MOCHI_GITHUB_ISSUES_LINK,
   MOCHI_GITHUB_LINK,
-} from '../constants/url'
-import { Roadmap } from '../components/pages/home/RoadmapView'
+} from '@/constants/url'
+import { Roadmap } from '@/components/pages/home/RoadmapView'
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -55,28 +56,20 @@ export default function Home() {
         />
       </Head>
 
-      <div className={inter.className}>
+      <div className={clsx('bg-white', inter.className)}>
         <Header />
 
         <main>
           <Hero
             title="Mochi UI Kit"
             description="Help designers and developers create eye-catching and adaptable products using different Web3 frameworks effortlessly."
             actions={[
-              <a
-                key="get-started-action"
-                href={DOCS_LINK}
-                className="inline-block"
-              >
+              <a key="get-started-action" href={DOCS_LINK}>
                 <Button>
-                  Get Started <ArrowRightLine />
+                  Get Started <ArrowRightLine className="h-3.5 w-3.5" />
                 </Button>
               </a>,
-              <a
-                key="preview-action"
-                href={COMPONENTS_LINK}
-                className="inline-block"
-              >
+              <a key="preview-action" href={COMPONENTS_LINK}>
                 <Button color="white">Preview Online</Button>
               </a>,
             ]}

styles/globals.css

@@ -4,20 +4,6 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --foreground-rgb: 0, 0, 0;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-  }
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-}
-
 body footer {
   padding-left: 16px !important;
   padding-right: 16px !important;
@@ -38,3 +24,13 @@ body footer > div {
 .hljs {
   background-color: transparent !important;
 }
+
+/* Scrollbar styles */
+
+.hide-scrollbar::-webkit-scrollbar {
+  /* Vertical scrollbar */
+  width: 0;
+
+  /* Horizontal scrollbar */
+  height: 0;
+}