fix: minor update

fluid-design-io · Apr 18, 2023 · 022033d · 022033d · vercel · Apr 18, 2023
1 parent a9a8ded
commit 022033d
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 62 deletions.
diff --git a/src/components/ThemeSwitch.tsx b/src/components/ThemeSwitch.tsx
@@ -56,36 +56,34 @@ export const ThemeSwitch = (props) => {
           weight='clear'
           iconOnly
         >
-          {mode === 'dark' && (
-            <motion.div
-              variants={iconVariants}
-              transition={{
-                type: 'spring',
-                stiffness: 150,
-                damping: 15,
-                mass: 0.2,
-              }}
-            >
-              <MdOutlineLightMode className={clsxm('h-4 w-4 fill-gray-100')} />
-            </motion.div>
-          )}
-          {mode === 'light' && (
-            <motion.div
-              variants={iconVariants}
-              transition={{
-                type: 'spring',
-                stiffness: 150,
-                damping: 15,
-                mass: 0.2,
-              }}
-            >
-              <MdDarkMode
-                className={clsxm(
-                  'h-4 w-4 fill-gray-600 transition-colors dark:fill-gray-100'
-                )}
-              />
-            </motion.div>
-          )}
+          <motion.div
+            variants={iconVariants}
+            transition={{
+              type: 'spring',
+              stiffness: 150,
+              damping: 15,
+              mass: 0.2,
+            }}
+            className='hidden dark:block'
+          >
+            <MdOutlineLightMode className={clsxm('h-4 w-4 fill-gray-100')} />
+          </motion.div>
+          <motion.div
+            variants={iconVariants}
+            transition={{
+              type: 'spring',
+              stiffness: 150,
+              damping: 15,
+              mass: 0.2,
+            }}
+            className='dark:hidden'
+          >
+            <MdDarkMode
+              className={clsxm(
+                'h-4 w-4 fill-gray-600 transition-colors dark:fill-gray-100'
+              )}
+            />
+          </motion.div>
         </Button>
       </AnimatePresence>
     </div>

diff --git a/src/components/dialog/DialogExamples.tsx b/src/components/dialog/DialogExamples.tsx
@@ -7,7 +7,7 @@ const Wrap = ({ className = '', children }) => {
   return (
     <div
       className={clsxm(
-        'flex h-full flex-wrap items-center justify-center gap-6 px-4 lg:px-6',
+        'flex flex-wrap items-center justify-center gap-6 py-8 px-4 lg:px-6',
         className
       )}
     >

diff --git a/src/components/toast/ToastExamples.tsx b/src/components/toast/ToastExamples.tsx
@@ -6,7 +6,7 @@ const Wrap = ({ className = '', children }) => {
   return (
     <div
       className={clsxm(
-        'flex h-full flex-wrap items-center justify-center gap-6 px-4 lg:px-6',
+        'flex flex-wrap items-center justify-center gap-6 py-8 px-4 lg:px-6',
         className
       )}
     >
@@ -91,13 +91,13 @@ const ToastSimple = () => {
 const ToastCustom = () => {
   const [presentToast] = useToast();
   const component = ({ dismiss }) => (
-    <div className='flex flex-col items-center justify-center gap-4 dark:text-white p-2'>
+    <div className='flex flex-col items-center justify-center gap-4 p-2 dark:text-white'>
       <h3 className='text-2xl font-bold'>Custom Body</h3>
       <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
         voluptates, quod, quia, voluptatibus quae voluptatem quibusdam
       </p>
-      <div className='flex justify-between w-full'>
+      <div className='flex w-full justify-between'>
         <div className='flex-grow' />
         <Button
           label='Dismiss'

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -1,4 +1,5 @@
 import Document, { Head, Html, Main, NextScript } from 'next/document';
+import Script from 'next/script';
 
 const modeScript = `
   let darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
@@ -54,7 +55,11 @@ class MyDocument extends Document {
             rel='preload'
             type='font/woff2'
           />
-          <script dangerouslySetInnerHTML={{ __html: modeScript }} />
+          <Script
+            id='mode-switch-script'
+            dangerouslySetInnerHTML={{ __html: modeScript }}
+            strategy='beforeInteractive'
+          />
         </Head>
         <body>
           <Main />

diff --git a/src/pages/docs/dialog.mdx b/src/pages/docs/dialog.mdx
@@ -5,7 +5,7 @@ export const meta = {
   templateTitle: 'Dialog',
   description:
     'Learn how to create engaging and interactive dialogs using Fluid Design. Discover all the features and options available to enhance the user experience.',
-  date: '2023-02-01',
+  date: '2023-04-01',
   author: 'Oliver Pan',
   tags: [
     'fluid ui',
@@ -28,11 +28,7 @@ Dialog (Modal) is used to display content that requires user interaction. They a
 
 ## Basic Usage
 
-<CodeFrame title='Simple'>
-  <FluidProvider>
-    <DialogExamples.Simple />
-  </FluidProvider>
-</CodeFrame>
+<DialogExamples.Simple />
 
 ```jsx
 import { Button, Dialog, useModal } from '@fluid-design/fluid-ui';
@@ -69,11 +65,7 @@ Since the modal is built using Headless UI, it supports focus trapping out of th
 This means that when a modal is open, the user will be unable to interact with the rest of the page until the modal is closed.
 The keyboard focus will be trapped inside the modal, and the user will be able to navigate the modal using the keyboard.
 
-<CodeFrame title='Nested'>
-  <FluidProvider>
-    <DialogExamples.Nested />
-  </FluidProvider>
-</CodeFrame>
+<DialogExamples.Nested />
 
 <CH.Code>
 
@@ -143,11 +135,7 @@ Having a form inside a modal is a common pattern.
 You can programmatically control weather the modal can be dismissed by clicking outside of
 the modal or pressing the escape key by passing the `onClose` prop to the `useModal` hook.
 
-<CodeFrame title='Form'>
-  <FluidProvider>
-    <DialogExamples.Form />
-  </FluidProvider>
-</CodeFrame>
+<DialogExamples.Form />
 
 ## Component API
 

diff --git a/src/pages/docs/toast.mdx b/src/pages/docs/toast.mdx
@@ -5,7 +5,7 @@ export const meta = {
   templateTitle: 'Toast',
   description:
     'Get started with creating accordions using Fluid Design. Learn how to use the accordion component to organize content and improve the user experience.',
-  date: '2023-02-01',
+  date: '2023-04-01',
   author: 'Oliver Pan',
   tags: [
     'fluid ui',
@@ -27,11 +27,7 @@ Toast is used to display a message to the user. They are usually displayed at th
 
 ## Basic Usage
 
-<CodeFrame title='Simple'>
-  <FluidProvider>
-    <ToastExamples.Simple />
-  </FluidProvider>
-</CodeFrame>
+<ToastExamples.Simple />
 
 ```jsx
 import { Button, useToast } from '@fluid-design/fluid-ui';
@@ -63,11 +59,7 @@ export const ToastSimple = () => {
 You can also have an unstyled toast with a custom component. This is useful if you want to have a toast with a custom layout.
 Blank role will not apply anything to the toast, which means you'll need to handle the `dismiss` button yourself.
 
-<CodeFrame title='Custom'>
-  <FluidProvider>
-    <ToastExamples.Custom />
-  </FluidProvider>
-</CodeFrame>
+<ToastExamples.Custom />
 
 ```jsx
 import { Button, useToast } from '@fluid-design/fluid-ui';