Fixed: Date Picker Dark Mode Issue Fixed.

StaticMania · Jun 24, 2024 · 958831c · 958831c
1 parent cd05afe
commit 958831c
Show file tree

Hide file tree

Showing 30 changed files with 168 additions and 133 deletions.
diff --git a/app/components/MobileMenu.tsx b/app/components/MobileMenu.tsx
@@ -12,6 +12,7 @@ import {
   AccordionIcon,
   AccordionPanel,
   AccordionTitle,
+  Button,
   Drawer,
   DrawerContent,
   DrawerOverlay,
@@ -78,11 +79,11 @@ const MobileMenu = () => {
         <button onClick={() => setShowDrawer(!showDrawer)}>
           {active ? (
             <span>
-              <X size={24} color="#455468" />
+              <X size={24} className="text-metal-900 dark:text-white" />
             </span>
           ) : (
             <span>
-              <List size={24} color="#455468" />
+              <List size={24} className="text-metal-900 dark:text-white" />
             </span>
           )}
         </button>
@@ -91,11 +92,9 @@ const MobileMenu = () => {
       <Drawer onClose={() => setShowDrawer(!showDrawer)} isOpen={showDrawer} position="right">
         <DrawerOverlay />
         <DrawerContent className="space-y-3 rounded-none p-6">
-          <button
-            onClick={() => setShowDrawer(!showDrawer)}
-            className="mb-4 max-w-max rounded-lg bg-metal-900 p-3 dark:bg-metal-800">
-            <ArrowLeft className="size-5 text-white dark:text-white" />
-          </button>
+          <Button onClick={() => setShowDrawer(!showDrawer)} color="secondary" className="mb-4 max-w-max p-3">
+            <ArrowLeft className="size-5 text-white dark:text-metal-900" />
+          </Button>
           <Accordion flush openFirstPanel>
             <AccordionPanel className="!border-b-0">
               <AccordionContainer className="p-0">

diff --git a/app/docs/components/datePicker/variant/DateRangePicker.tsx b/app/docs/components/datePicker/variant/DateRangePicker.tsx
@@ -44,7 +44,7 @@ export const DatePickerComponent = () => {
     <Popover showArrow={false} placement="bottom-start">
       <PopoverTrigger asChild>
         <Button
-           className="w-[286px] justify-start gap-2 rounded-xl border border-metal-50 px-4 text-left text-body-4 font-normal text-metal-600 hover:bg-white active:focus:scale-100 dark:border-metal-900 dark:bg-metal-900 dark:text-white dark:hover:bg-metal-800"
+          className="w-[286px] justify-start gap-2 rounded-xl border border-metal-50 px-4 text-left text-body-4 font-normal text-metal-600 hover:bg-white active:focus:scale-100 dark:border-metal-900 dark:bg-metal-900 dark:text-white dark:hover:bg-metal-800"
           variant="outline"
           color="secondary">
           <Calendar size={20} className="text-metal-400 dark:text-white" />

diff --git a/app/docs/components/drawer/variant/DefaultDrawer.tsx b/app/docs/components/drawer/variant/DefaultDrawer.tsx
@@ -18,7 +18,7 @@ const DefaultDrawer = () => {
               Elevate your web projects with Keep React&apos;s 40+ customizable components. Access open-source resources
               for efficient development and bring your ideas to life with ease.
             </p>
-            <Button onClick={() => setIsOpen(false)} className="bg-metal-900 dark:bg-metal-800" color="secondary">
+            <Button onClick={() => setIsOpen(false)} color="secondary">
               Explore Now
             </Button>
           </div>
@@ -49,7 +49,7 @@ export const DrawerComponent = () => {
               Elevate your web projects with Keep React&apos;s 40+ customizable components. Access open-source resources
               for efficient development and bring your ideas to life with ease.
             </p>
-            <Button onClick={() => setIsOpen(false)} className="bg-metal-900 dark:bg-metal-800" color="secondary">
+            <Button onClick={() => setIsOpen(false)} color="secondary">
               Explore Now
             </Button>
           </div>

diff --git a/app/docs/components/drawer/variant/DrawerPosition.tsx b/app/docs/components/drawer/variant/DrawerPosition.tsx
@@ -30,7 +30,7 @@ const DrawerPosition = () => {
               Elevate your web projects with Keep React&apos;s 40+ customizable components. Access open-source resources
               for efficient development and bring your ideas to life with ease.
             </p>
-            <Button onClick={() => setIsOpen(false)} className="bg-metal-900 dark:bg-metal-800" color="secondary">
+            <Button onClick={() => setIsOpen(false)} color="secondary">
               Explore Now
             </Button>
           </div>
@@ -73,7 +73,7 @@ export const DrawerComponent = () => {
               Elevate your web projects with Keep React&apos;s 40+ customizable components. Access open-source resources
               for efficient development and bring your ideas to life with ease.
             </p>
-            <Button onClick={() => setIsOpen(false)} className="bg-metal-900 dark:bg-metal-800" color="secondary">
+           <Button onClick={() => setIsOpen(false)} color="secondary">
               Explore Now
             </Button>
           </div>

diff --git a/app/docs/components/dropdown/variant/CustomDropdown.tsx b/app/docs/components/dropdown/variant/CustomDropdown.tsx
@@ -1,4 +1,4 @@
-import { Avatar, Button, Dropdown, DropdownAction, DropdownContent, DropdownItem, DropdownList } from '../../../../src'
+import { Avatar, Dropdown, DropdownAction, DropdownContent, DropdownItem, DropdownList } from '../../../../src'
 
 const dropdownData = [
   {
@@ -36,11 +36,7 @@ const dropdownData = [
 const CustomDropdown = () => {
   return (
     <Dropdown>
-      <DropdownAction asChild>
-        <Button color="secondary" size="xs">
-          Dropdown
-        </Button>
-      </DropdownAction>
+      <DropdownAction>Dropdown</DropdownAction>
       <DropdownContent>
         <DropdownList>
           {dropdownData.map((data) => (
@@ -61,16 +57,12 @@ const CustomDropdown = () => {
 }
 
 const CustomDropdownCode = `
-import { Avatar, Dropdown, DropdownAction, DropdownContent, DropdownItem, DropdownList ,Button } from 'keep-react'
+import { Avatar, Dropdown, DropdownAction, DropdownContent, DropdownItem, DropdownList } from 'keep-react'
 
 export const DropdownComponent = () => {
   return (
     <Dropdown>
-      <DropdownAction>
-        <Button color="secondary" size="xs">
-          Dropdown
-        </Button>
-      </DropdownAction>
+      <DropdownAction>Dropdown</DropdownAction>
       <DropdownContent>
         <DropdownList>
           {dropdownData.map((data) => (

diff --git a/app/docs/components/dropdown/variant/DefaultDropdown.tsx b/app/docs/components/dropdown/variant/DefaultDropdown.tsx
@@ -1,13 +1,9 @@
-import { Button, Divider, Dropdown, DropdownAction, DropdownContent, DropdownItem, DropdownList } from '../../../../src'
+import { Divider, Dropdown, DropdownAction, DropdownContent, DropdownItem, DropdownList } from '../../../../src'
 
 const DefaultDropdown = () => {
   return (
     <Dropdown>
-      <DropdownAction asChild>
-        <Button color="secondary" size="xs">
-          Dropdown
-        </Button>
-      </DropdownAction>
+      <DropdownAction>Dropdown</DropdownAction>
       <DropdownContent>
         <DropdownList>
           <DropdownItem>Contacts</DropdownItem>
@@ -26,16 +22,12 @@ const DefaultDropdown = () => {
 }
 
 const DefaultDropdownCode = `
-import { Divider, Dropdown, DropdownAction, DropdownContent, DropdownItem, DropdownList, Button }  from 'keep-react'
+import { Divider, Dropdown, DropdownAction, DropdownContent, DropdownItem, DropdownList }  from 'keep-react'
 
 export const DropdownComponent = () => {
   return (
     <Dropdown>
-      <DropdownAction asChild>
-        <Button color="secondary" size="xs">
-          Dropdown
-        </Button>
-      </DropdownAction>
+      <DropdownAction>Dropdown</DropdownAction>
       <DropdownContent>
         <DropdownList>
           <DropdownItem>Contacts</DropdownItem>

diff --git a/app/docs/components/dropdown/variant/DropdownTrigger.tsx b/app/docs/components/dropdown/variant/DropdownTrigger.tsx
@@ -1,15 +1,11 @@
 'use client'
 import { ChartPieSlice, Copy, Pen, Phone, SignOut, UserCircle, Users } from 'phosphor-react'
-import { Button, Divider, Dropdown, DropdownAction, DropdownContent, DropdownItem, DropdownList } from '../../../../src'
+import { Divider, Dropdown, DropdownAction, DropdownContent, DropdownItem, DropdownList } from '../../../../src'
 
 const DropdownTrigger = () => {
   return (
     <Dropdown trigger="hover">
-      <DropdownAction asChild>
-        <Button color="secondary" size="xs">
-          Dropdown
-        </Button>
-      </DropdownAction>
+      <DropdownAction>Dropdown</DropdownAction>
       <DropdownContent>
         <DropdownList>
           <DropdownItem>
@@ -51,16 +47,12 @@ const DropdownTrigger = () => {
 const DropdownTriggerCode = `
 'use client'
 import { ChartPieSlice, Copy, Pen, Phone, SignOut, UserCircle, Users } from 'phosphor-react'
-import { Divider, Dropdown, DropdownAction, DropdownContent, DropdownItem, DropdownList, Button } from 'keep-react'
+import { Divider, Dropdown, DropdownAction, DropdownContent, DropdownItem, DropdownList } from 'keep-react'
 
 export const DropdownComponent = () => {
   return (
     <Dropdown trigger="hover">
-      <DropdownAction asChild>
-        <Button color="secondary" size="xs">
-          Dropdown
-        </Button>
-      </DropdownAction>
+     <DropdownAction>Dropdown</DropdownAction>
       <DropdownContent>
         <DropdownList>
           <DropdownItem>

diff --git a/app/docs/components/dropdown/variant/DropdownWithIcon.tsx b/app/docs/components/dropdown/variant/DropdownWithIcon.tsx
@@ -1,15 +1,11 @@
 'use client'
 import { ChartPieSlice, Copy, Pen, Phone, SignOut, UserCircle, Users } from 'phosphor-react'
-import { Button, Divider, Dropdown, DropdownAction, DropdownContent, DropdownItem, DropdownList } from '../../../../src'
+import { Divider, Dropdown, DropdownAction, DropdownContent, DropdownItem, DropdownList } from '../../../../src'
 
 const DropdownWithIcon = () => {
   return (
     <Dropdown>
-      <DropdownAction asChild>
-        <Button color="secondary" size="xs">
-          Dropdown
-        </Button>
-      </DropdownAction>
+      <DropdownAction>Dropdown</DropdownAction>
       <DropdownContent>
         <DropdownList>
           <DropdownItem>
@@ -51,16 +47,12 @@ const DropdownWithIcon = () => {
 const DropdownWithIconCode = `
 'use client'
 import { ChartPieSlice, Copy, Pen, Phone, SignOut, UserCircle, Users } from 'phosphor-react'
-import { Divider, Dropdown, DropdownAction, DropdownContent, DropdownItem, DropdownList, Button} from 'keep-react'
+import { Divider, Dropdown, DropdownAction, DropdownContent, DropdownItem, DropdownList} from 'keep-react'
 
 export const DropdownComponent = () => {
   return (
     <Dropdown>
-      <DropdownAction asChild>
-        <Button color="secondary" size="xs">
-          Dropdown
-        </Button>
-      </DropdownAction>
+      <DropdownAction>Dropdown</DropdownAction>
       <DropdownContent>
         <DropdownList>
           <DropdownItem>