From 6bfe4d6ce85036888ea36f9f197eb8d13aa27951 Mon Sep 17 00:00:00 2001 From: Mateo Wartelle Date: Fri, 29 Sep 2023 21:48:16 -0500 Subject: [PATCH 1/7] docs: documnetation page for FileInput Component --- app/docs/forms/checkbox/checkbox.mdx | 92 +++++++++ app/docs/forms/checkbox/index.tsx | 8 + app/docs/forms/checkbox/page.tsx | 19 ++ app/docs/forms/file-input/fileinput.mdx | 132 +++++++++++++ app/docs/forms/file-input/index.tsx | 8 + app/docs/forms/file-input/page.tsx | 19 ++ app/docs/forms/textarea/index.tsx | 8 + app/docs/forms/textarea/page.tsx | 19 ++ app/docs/forms/textarea/textarea.mdx | 245 ++++++++++++++++++++++++ app/docs/forms/toggle/index.tsx | 39 ++++ app/docs/forms/toggle/page.tsx | 19 ++ app/docs/forms/toggle/toggle.mdx | 90 +++++++++ app/docs/layout.tsx | 19 +- src/components/ToggleSwitch/theme.ts | 1 + 14 files changed, 716 insertions(+), 2 deletions(-) create mode 100644 app/docs/forms/checkbox/checkbox.mdx create mode 100644 app/docs/forms/checkbox/index.tsx create mode 100644 app/docs/forms/checkbox/page.tsx create mode 100644 app/docs/forms/file-input/fileinput.mdx create mode 100644 app/docs/forms/file-input/index.tsx create mode 100644 app/docs/forms/file-input/page.tsx create mode 100644 app/docs/forms/textarea/index.tsx create mode 100644 app/docs/forms/textarea/page.tsx create mode 100644 app/docs/forms/textarea/textarea.mdx create mode 100644 app/docs/forms/toggle/index.tsx create mode 100644 app/docs/forms/toggle/page.tsx create mode 100644 app/docs/forms/toggle/toggle.mdx diff --git a/app/docs/forms/checkbox/checkbox.mdx b/app/docs/forms/checkbox/checkbox.mdx new file mode 100644 index 000000000..502bde5a0 --- /dev/null +++ b/app/docs/forms/checkbox/checkbox.mdx @@ -0,0 +1,92 @@ +import { CodePreview } from '~/app/components/code-preview'; +import { Checkbox, Label, theme } from '~/src'; + +The `` component can be used to receive one or more selected options from the user in the form of a square box available in multiple styles, sizes, colors, and variants coded with the utility classes from Tailwind CSS and with support for dark mode. + +To start using the component make sure that you have imported it from Flowbite React: + +```jsx +'use client'; + +import { Checkbox } from 'flowbite-react'; +``` + +## Table of Contents + +## Checkbox example + +Use this default example of a `` element in a checked and unchecked state. + + +
+ + +
+
+ + +
+ + +## Disabled state + +This example can be used for the disabled state of the checkbox component by applying the disabled attribute to the input element. + + +
+ + +
+
+ + +
+ + +## Checkbox link + +Use this example if you want to add an anchor link inside the label of the `` component. + +## Helper text + +Get started with this example if you want to add a secondary helper text for the `` component. + +## Bordered + +Use this example of a `` inside a card element to enable a larger area of clicking activation. + +## Checkbox list group + +Use this example to show a list of `` items grouped inside a card. + +## Horizontal list group + +Use this example to show a list of `` items inside a card horizontally. + +## Checkbox dropdown + +Use this example to show a list of `` items inside a dropdown menu. + +## Inline layout + +You can align the checkbox elements horizontally by using a wrapper tag and applying the flex class. + +## Colors + +Use the `text-{color}-{shade}` classes from Tailwind CSS to change the color of the `` component. + +## Advanced layout + +Use this example of an advanced layout of checkbox elements where the label parent element can be styled when the checkbox is checked. + +## Theme + +To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme). + +
+  {JSON.stringify(theme.checkbox, null, 2)}
+
+ +## References + +- [Flowbite File Input](https://flowbite.com/docs/forms/checkbox/) diff --git a/app/docs/forms/checkbox/index.tsx b/app/docs/forms/checkbox/index.tsx new file mode 100644 index 000000000..c255b324c --- /dev/null +++ b/app/docs/forms/checkbox/index.tsx @@ -0,0 +1,8 @@ +'use client'; + +import type { FC } from 'react'; +import CheckboxDocs from './checkbox.mdx'; + +const CheckboxPageContent: FC = () => ; + +export default CheckboxPageContent; diff --git a/app/docs/forms/checkbox/page.tsx b/app/docs/forms/checkbox/page.tsx new file mode 100644 index 000000000..70254e819 --- /dev/null +++ b/app/docs/forms/checkbox/page.tsx @@ -0,0 +1,19 @@ +import type { Metadata, NextPage } from 'next'; +import { DocsContentLayout } from '~/app/components/docs-content-layout'; +import CheckboxPageContent from '.'; + +export const metadata: Metadata = { + description: + 'Get started with the checkbox component to allow the user to select one or more options in the form of a square box available in multiple sizes and colors', + title: 'React Checkbox - Flowbite', +}; + +const CheckboxPage: NextPage = () => { + return ( + + + + ); +}; + +export default CheckboxPage; diff --git a/app/docs/forms/file-input/fileinput.mdx b/app/docs/forms/file-input/fileinput.mdx new file mode 100644 index 000000000..5cecdbbdd --- /dev/null +++ b/app/docs/forms/file-input/fileinput.mdx @@ -0,0 +1,132 @@ +import { CodePreview } from '~/app/components/code-preview'; +import { FileInput, Label, theme } from '~/src'; + +The `` component can be used to upload one or more files from the device storage of the user available in multiple sizes, styles, and variants and built with the utility-first classes from Tailwind CSS including support for dark mode. + +Make sure that you have included Flowbite as a plugin inside your Tailwind CSS project to apply all the necessary styles for the `` component. + +To start using the component make sure that you have imported it from Flowbite React: + +```jsx +'use client'; + +import { FileInput } from 'flowbite-react'; +``` + +## Table of Contents + +## File upload example + +Get started with a simple `` component to let users upload one single file. + + +
+
+
+ +
+ + +## Helper text + +Add a descriptive helper text to inform users the allowed extensions and sizes of the files. + + +
+
+
+ +
+ + +## Multiple files + +Apply the multiple attribute to the `` component to allow more files to be uploaded. + + +
+
+
+ +
+ + +## Sizes + +Choose from the small, default, and large `` sizing options. + + +
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+ + +## Dropzone + +The dropzone `` component can be used to upload one or more files by clicking anywhere in the area. + + +
+ +
+ + +## Theme + +To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme). + +
+  {JSON.stringify(theme.fileInput, null, 2)}
+
+ +## References + +- [Flowbite File Input](https://flowbite.com/docs/forms/file-input/) diff --git a/app/docs/forms/file-input/index.tsx b/app/docs/forms/file-input/index.tsx new file mode 100644 index 000000000..c3d1ca921 --- /dev/null +++ b/app/docs/forms/file-input/index.tsx @@ -0,0 +1,8 @@ +'use client'; + +import type { FC } from 'react'; +import FileInputDocs from './fileinput.mdx'; + +const FileInputPageContent: FC = () => ; + +export default FileInputPageContent; diff --git a/app/docs/forms/file-input/page.tsx b/app/docs/forms/file-input/page.tsx new file mode 100644 index 000000000..5aac16a26 --- /dev/null +++ b/app/docs/forms/file-input/page.tsx @@ -0,0 +1,19 @@ +import type { Metadata, NextPage } from 'next'; +import { DocsContentLayout } from '~/app/components/docs-content-layout'; +import FileInputPageContent from '.'; + +export const metadata: Metadata = { + description: + 'Get started with the file input component to let the user to upload one or more files from their device storage based on multiple styles and sizes', + title: 'React File Input - Flowbite', +}; + +const FileInputPage: NextPage = () => { + return ( + + + + ); +}; + +export default FileInputPage; diff --git a/app/docs/forms/textarea/index.tsx b/app/docs/forms/textarea/index.tsx new file mode 100644 index 000000000..d8047d3b0 --- /dev/null +++ b/app/docs/forms/textarea/index.tsx @@ -0,0 +1,8 @@ +'use client'; + +import type { FC } from 'react'; +import TextareDocs from './textarea.mdx'; + +const TextareaPageContent: FC = () => ; + +export default TextareaPageContent; diff --git a/app/docs/forms/textarea/page.tsx b/app/docs/forms/textarea/page.tsx new file mode 100644 index 000000000..c6e08011f --- /dev/null +++ b/app/docs/forms/textarea/page.tsx @@ -0,0 +1,19 @@ +import type { Metadata, NextPage } from 'next'; +import { DocsContentLayout } from '~/app/components/docs-content-layout'; +import TextareaPageContent from '.'; + +export const metadata: Metadata = { + description: + 'Use the textarea component as a multi-line text field input and use it inside form elements available in multiple sizes, styles, and variants', + title: 'React Textarea - Flowbite', +}; + +const FileInputPage: NextPage = () => { + return ( + + + + ); +}; + +export default FileInputPage; diff --git a/app/docs/forms/textarea/textarea.mdx b/app/docs/forms/textarea/textarea.mdx new file mode 100644 index 000000000..43aa0e1c4 --- /dev/null +++ b/app/docs/forms/textarea/textarea.mdx @@ -0,0 +1,245 @@ +import { CodePreview } from '~/app/components/code-preview'; +import { Textarea, Label, Button, theme } from '~/src'; + +The ` + + + + + + + +## Comment box + +Most often the ` + +
+ +
+ + + +
+
+ + +

Remember, contributions to this topic should follow our Community Guidelines.

+ + + +## Chatroom input + +If you want to build a chatroom component you will usually want to use a ` + + + + + +## Theme + +To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme). + +
+  {JSON.stringify(theme.textarea, null, 2)}
+
+ +## References + +- [Flowbite File Input](https://flowbite.com/docs/forms/textarea/) diff --git a/app/docs/forms/toggle/index.tsx b/app/docs/forms/toggle/index.tsx new file mode 100644 index 000000000..144d782a1 --- /dev/null +++ b/app/docs/forms/toggle/index.tsx @@ -0,0 +1,39 @@ +'use client'; + +import type { FC } from 'react'; +import { useState } from 'react'; +import ToggleSwitchDocs from './toggle.mdx'; + +const ToggleSwitchPageContent: FC = () => { + const [switch1, setSwitch1] = useState(false); + const [switch2, setSwitch2] = useState(true); + const [red, setRed] = useState(true); + const [green, setGreen] = useState(true); + const [purple, setPurple] = useState(true); + const [yellow, setYellow] = useState(true); + const [teal, setTeal] = useState(true); + const [orange, setOrange] = useState(true); + + const state = { + switch1, + setSwitch1, + switch2, + setSwitch2, + red, + setRed, + green, + setGreen, + purple, + setPurple, + yellow, + setYellow, + teal, + setTeal, + orange, + setOrange, + }; + + return ; +}; + +export default ToggleSwitchPageContent; diff --git a/app/docs/forms/toggle/page.tsx b/app/docs/forms/toggle/page.tsx new file mode 100644 index 000000000..c3d681094 --- /dev/null +++ b/app/docs/forms/toggle/page.tsx @@ -0,0 +1,19 @@ +import type { Metadata, NextPage } from 'next'; +import { DocsContentLayout } from '~/app/components/docs-content-layout'; +import ToggleSwitchPageContent from '.'; + +export const metadata: Metadata = { + description: + 'Use the toggle component to switch between a binary state of true or false using a single click available in multiple sizes, variants, and colors', + title: 'React Toggle - Flowbite', +}; + +const FileInputPage: NextPage = () => { + return ( + + + + ); +}; + +export default FileInputPage; diff --git a/app/docs/forms/toggle/toggle.mdx b/app/docs/forms/toggle/toggle.mdx new file mode 100644 index 000000000..402041944 --- /dev/null +++ b/app/docs/forms/toggle/toggle.mdx @@ -0,0 +1,90 @@ +import { CodePreview } from '~/app/components/code-preview'; +import { ToggleSwitch, Label, theme } from '~/src'; + +The `` component can be used to receive a simple “yes” or “no” type of answer from the user by choosing a single option from two options available in multiple sizes, styles, and colors coded with the utility classes from Tailwind CSS and with dark mode support. + +To start using the component make sure that you have imported it from Flowbite React: + +```jsx +'use client'; + +import { ToggleSwitch } from 'flowbite-react'; +``` + +## Table of Contents + +## Toggle Example + +Get started with the default `` component example as a checkbox element to receive a true or false selection from the user. + + + + + +## Checked state + +Apply the checked attribute to the `` component to activate the selection by default. + + +
+ +
+ + +## Disabled state + +Apply the disabled attribute to disallow the users from making any further selections. + + +
+
+ +
+
+ +
+
+ + +## Colors + +Change the color of the `` component by updating the color prop. + + +
+ + + + + + +
+ + +## Sizes + +Get started with small, default, or large sizes of the `` component based on your needs. + + +
+
+ +
+
+ +
+ +
+ + +## Theme + +To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme). + +
+  {JSON.stringify(theme.toggleSwitch, null, 2)}
+
+ +## References + +- [Flowbite File Input](https://flowbite.com/docs/forms/toggle/) diff --git a/app/docs/layout.tsx b/app/docs/layout.tsx index 280f055f3..49ee2a8b9 100644 --- a/app/docs/layout.tsx +++ b/app/docs/layout.tsx @@ -303,7 +303,7 @@ const DocsSidebar: FC = ({ isCollapsed, setCollapsed }) => { - + = ({ isCollapsed, setCollapsed }) => { }} className={twMerge( 'flex w-full items-center justify-between bg-transparent p-0 text-sm font-semibold uppercase tracking-wide', - pathname.includes('/forms/') && + pathname.includes('/docs/forms/') && 'text-primary-700 hover:text-primary-700 dark:text-primary-500 dark:hover:text-primary-500', )} > Forms +<<<<<<< HEAD @@ -330,11 +331,25 @@ const DocsSidebar: FC = ({ isCollapsed, setCollapsed }) => { +======= + + + Checkbox + File Input +<<<<<<< HEAD +>>>>>>> d98472b (docs: fileInput add theme + references. Add sidebar forms section under components) +======= + Textarea + Toggle +>>>>>>> 7a3178e (docs: textarea, checkbox, toggle form pages) +<<<<<<< HEAD +======= +>>>>>>> d98472b (docs: fileInput add theme + references. Add sidebar forms section under components)   diff --git a/src/components/ToggleSwitch/theme.ts b/src/components/ToggleSwitch/theme.ts index 9f99e674a..3ade9e277 100644 --- a/src/components/ToggleSwitch/theme.ts +++ b/src/components/ToggleSwitch/theme.ts @@ -32,6 +32,7 @@ export const toggleSwitchTheme: FlowbiteToggleSwitchTheme = { teal: 'bg-gradient-to-r from-teal-400 via-teal-500 to-teal-600 hover:bg-gradient-to-br focus:ring-4', info: 'bg-cyan-600 border-cyan-600', pink: 'bg-pink-600 border-pink-600', + orange: 'bg-orange-500 border-orange-500', }, }, sizes: { From 2daed2ba96a150a6be914e0e3e6b01e009a427f1 Mon Sep 17 00:00:00 2001 From: Mateo Wartelle Date: Sat, 30 Sep 2023 08:49:03 -0500 Subject: [PATCH 2/7] docs: finish textarea --- app/docs/forms/checkbox/checkbox.mdx | 17 +++++++++++++++++ app/docs/forms/toggle/index.tsx | 9 +++++++++ app/docs/forms/toggle/toggle.mdx | 6 +++--- app/docs/layout.tsx | 20 ++++---------------- 4 files changed, 33 insertions(+), 19 deletions(-) diff --git a/app/docs/forms/checkbox/checkbox.mdx b/app/docs/forms/checkbox/checkbox.mdx index 502bde5a0..30dd62000 100644 --- a/app/docs/forms/checkbox/checkbox.mdx +++ b/app/docs/forms/checkbox/checkbox.mdx @@ -1,5 +1,6 @@ import { CodePreview } from '~/app/components/code-preview'; import { Checkbox, Label, theme } from '~/src'; +import Link from 'next/link'; The `` component can be used to receive one or more selected options from the user in the form of a square box available in multiple styles, sizes, colors, and variants coded with the utility classes from Tailwind CSS and with support for dark mode. @@ -47,6 +48,22 @@ This example can be used for the disabled state of the checkbox component by app Use this example if you want to add an anchor link inside the label of the `` component. + +
+ + +
+ + ## Helper text Get started with this example if you want to add a secondary helper text for the `` component. diff --git a/app/docs/forms/toggle/index.tsx b/app/docs/forms/toggle/index.tsx index 144d782a1..ba5afd622 100644 --- a/app/docs/forms/toggle/index.tsx +++ b/app/docs/forms/toggle/index.tsx @@ -13,6 +13,9 @@ const ToggleSwitchPageContent: FC = () => { const [yellow, setYellow] = useState(true); const [teal, setTeal] = useState(true); const [orange, setOrange] = useState(true); + const [small, setSmall] = useState(false); + const [medium, setMedium] = useState(false); + const [large, setLarge] = useState(false); const state = { switch1, @@ -31,6 +34,12 @@ const ToggleSwitchPageContent: FC = () => { setTeal, orange, setOrange, + small, + setSmall, + medium, + setMedium, + large, + setLarge, }; return ; diff --git a/app/docs/forms/toggle/toggle.mdx b/app/docs/forms/toggle/toggle.mdx index 402041944..83da6417c 100644 --- a/app/docs/forms/toggle/toggle.mdx +++ b/app/docs/forms/toggle/toggle.mdx @@ -68,12 +68,12 @@ Get started with small, default, or large sizes of the `` componen
- +
- +
- +
diff --git a/app/docs/layout.tsx b/app/docs/layout.tsx index 49ee2a8b9..456bab689 100644 --- a/app/docs/layout.tsx +++ b/app/docs/layout.tsx @@ -303,7 +303,7 @@ const DocsSidebar: FC = ({ isCollapsed, setCollapsed }) => { - + = ({ isCollapsed, setCollapsed }) => { }} className={twMerge( 'flex w-full items-center justify-between bg-transparent p-0 text-sm font-semibold uppercase tracking-wide', - pathname.includes('/docs/forms/') && + pathname.includes('/forms/') && 'text-primary-700 hover:text-primary-700 dark:text-primary-500 dark:hover:text-primary-500', )} > Forms -<<<<<<< HEAD + Checkbox + File Input Floating Label{' '} @@ -331,25 +332,12 @@ const DocsSidebar: FC = ({ isCollapsed, setCollapsed }) => { -======= - - - Checkbox - File Input -<<<<<<< HEAD ->>>>>>> d98472b (docs: fileInput add theme + references. Add sidebar forms section under components) -======= Textarea Toggle ->>>>>>> 7a3178e (docs: textarea, checkbox, toggle form pages) -<<<<<<< HEAD - -======= ->>>>>>> d98472b (docs: fileInput add theme + references. Add sidebar forms section under components)   From bc8c716965d63b8377039fe9343c1ce1384eb55c Mon Sep 17 00:00:00 2001 From: Mateo Wartelle Date: Sat, 30 Sep 2023 19:00:55 -0500 Subject: [PATCH 3/7] docs: add Checkbox docs all except colors + dropdown --- app/docs/forms/checkbox/checkbox.mdx | 189 +++++++++++++++++++++++++++ 1 file changed, 189 insertions(+) diff --git a/app/docs/forms/checkbox/checkbox.mdx b/app/docs/forms/checkbox/checkbox.mdx index 30dd62000..9d876d22e 100644 --- a/app/docs/forms/checkbox/checkbox.mdx +++ b/app/docs/forms/checkbox/checkbox.mdx @@ -72,14 +72,111 @@ Get started with this example if you want to add a secondary helper text for the Use this example of a `` inside a card element to enable a larger area of clicking activation. + +
+
+ + +
+
+ + +
+
+ + ## Checkbox list group Use this example to show a list of `` items grouped inside a card. + +
+

Technology

+
    +
  • +
    + + +
    +
    • +
  • +
    + + +
    +
    • +
  • +
    + + +
    +
    • +
  • +
    + + +
    +
    • +
+
+ + ## Horizontal list group Use this example to show a list of `` items inside a card horizontally. + +
+

Identification

+
    +
  • +
    + + +
    +
    • +
  • +
    + + +
    +
    • +
  • +
    + + +
    +
    • +
  • +
    + + +
    +
    • +
+
+ + ## Checkbox dropdown Use this example to show a list of `` items inside a dropdown menu. @@ -88,6 +185,27 @@ Use this example to show a list of `` items inside a dropdown menu. You can align the checkbox elements horizontally by using a wrapper tag and applying the flex class. + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + ## Colors Use the `text-{color}-{shade}` classes from Tailwind CSS to change the color of the `` component. @@ -96,6 +214,77 @@ Use the `text-{color}-{shade}` classes from Tailwind CSS to change the color of Use this example of an advanced layout of checkbox elements where the label parent element can be styled when the checkbox is checked. + +
+

Choose technology:

+
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+
+ + ## Theme To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme). From ca5c20c53fd6632331807c99935088d08d9b0025 Mon Sep 17 00:00:00 2001 From: Mateo Wartelle Date: Sat, 30 Sep 2023 19:42:45 -0500 Subject: [PATCH 4/7] docs: checkbox dropdown --- app/docs/forms/checkbox/checkbox.mdx | 56 +++++++++++++++++++++++++++- 1 file changed, 55 insertions(+), 1 deletion(-) diff --git a/app/docs/forms/checkbox/checkbox.mdx b/app/docs/forms/checkbox/checkbox.mdx index 9d876d22e..9d892e71c 100644 --- a/app/docs/forms/checkbox/checkbox.mdx +++ b/app/docs/forms/checkbox/checkbox.mdx @@ -1,5 +1,5 @@ import { CodePreview } from '~/app/components/code-preview'; -import { Checkbox, Label, theme } from '~/src'; +import { Checkbox, Label, Dropdown, TextInput, theme } from '~/src'; import Link from 'next/link'; The `` component can be used to receive one or more selected options from the user in the form of a square box available in multiple styles, sizes, colors, and variants coded with the utility classes from Tailwind CSS and with support for dark mode. @@ -181,6 +181,60 @@ Use this example to show a list of `` items inside a card horizontally Use this example to show a list of `` items inside a dropdown menu. + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Delete user + +
+ + ## Inline layout You can align the checkbox elements horizontally by using a wrapper tag and applying the flex class. From 5261fc0e5cd046c177fae52b8529392fa2c6a925 Mon Sep 17 00:00:00 2001 From: Mateo Wartelle Date: Sat, 30 Sep 2023 20:02:29 -0500 Subject: [PATCH 5/7] docs: checkbox dropdown --- app/docs/forms/checkbox/checkbox.mdx | 22 +++++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/app/docs/forms/checkbox/checkbox.mdx b/app/docs/forms/checkbox/checkbox.mdx index 9d892e71c..95137758d 100644 --- a/app/docs/forms/checkbox/checkbox.mdx +++ b/app/docs/forms/checkbox/checkbox.mdx @@ -1,6 +1,7 @@ import { CodePreview } from '~/app/components/code-preview'; import { Checkbox, Label, Dropdown, TextInput, theme } from '~/src'; import Link from 'next/link'; +import { MdSearch } from 'react-icons/md'; The `` component can be used to receive one or more selected options from the user in the form of a square box available in multiple styles, sizes, colors, and variants coded with the utility classes from Tailwind CSS and with support for dark mode. @@ -181,11 +182,15 @@ Use this example to show a list of `` items inside a card horizontally Use this example to show a list of `` items inside a dropdown menu. - +
- + @@ -230,7 +235,18 @@ Use this example to show a list of `` items inside a dropdown menu. - Delete user + + + Delete user +
From 5342aa9432b63e700b82d57eff4a9f4af72e39f2 Mon Sep 17 00:00:00 2001 From: Mateo Wartelle Date: Sat, 30 Sep 2023 20:21:20 -0500 Subject: [PATCH 6/7] fix: remove gradient from default teal toggleswitch theme --- src/components/ToggleSwitch/theme.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ToggleSwitch/theme.ts b/src/components/ToggleSwitch/theme.ts index 3ade9e277..f781a42f9 100644 --- a/src/components/ToggleSwitch/theme.ts +++ b/src/components/ToggleSwitch/theme.ts @@ -29,7 +29,7 @@ export const toggleSwitchTheme: FlowbiteToggleSwitchTheme = { cyan: 'bg-cyan-500 border-cyan-500', lime: 'bg-lime-400 border-lime-400', indigo: 'bg-indigo-400 border-indigo-400', - teal: 'bg-gradient-to-r from-teal-400 via-teal-500 to-teal-600 hover:bg-gradient-to-br focus:ring-4', + teal: 'bg-teal-600 border-teal-600', info: 'bg-cyan-600 border-cyan-600', pink: 'bg-pink-600 border-pink-600', orange: 'bg-orange-500 border-orange-500', From 8bf04c186a8881cc69e16aa624ff8b901d23f30c Mon Sep 17 00:00:00 2001 From: Mateo Wartelle Date: Sat, 30 Sep 2023 20:35:21 -0500 Subject: [PATCH 7/7] fix: kDB -> KBD --- app/docs/layout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/docs/layout.tsx b/app/docs/layout.tsx index 456bab689..84d1bad79 100644 --- a/app/docs/layout.tsx +++ b/app/docs/layout.tsx @@ -280,7 +280,7 @@ const DocsSidebar: FC = ({ isCollapsed, setCollapsed }) => { Forms - KDB{' '} + KBD{' '} New