Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(banner): update blue colors to cyan & fix button paddings #957

Merged
merged 2 commits into from
Sep 13, 2023
Merged

docs(banner): update blue colors to cyan & fix button paddings #957

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
074a19f
docs(banner): update `blue` colors to `cyan`
zoltanszogyenyi Sep 13, 2023
639980e
docs(banner): fix `class` attribute errors
zoltanszogyenyi Sep 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 33 additions & 33 deletions app/docs/components/banner/banner.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ import { MdAnnouncement } from 'react-icons/md';"
<div className="flex items-center mx-auto">
<p className="flex items-center text-sm font-normal text-gray-500 dark:text-gray-400">
<MdAnnouncement />
<span>New brand identity has been launched for the <a href="https://flowbite.com" className="inline font-medium text-blue-600 underline dark:text-blue-500 underline-offset-2 decoration-600 dark:decoration-500 decoration-solid hover:no-underline">Flowbite Library</a></span>
<span>New brand identity has been launched for the <a href="https://flowbite.com" className="inline font-medium text-cyan-600 underline dark:text-cyan-500 underline-offset-2 decoration-600 dark:decoration-500 decoration-solid hover:no-underline">Flowbite Library</a></span>
</p>
</div>
<Banner.CollapseButton color="gray" className="border-0 bg-transparent px-0">
Expand All @@ -49,7 +49,7 @@ import { MdAnnouncement } from 'react-icons/md';"
New brand identity has been launched for the&nbsp;
<a
href="https://flowbite.com"
className="decoration-600 dark:decoration-500 inline font-medium text-blue-600 underline decoration-solid underline-offset-2 hover:no-underline dark:text-blue-500"
className="decoration-600 dark:decoration-500 inline font-medium text-cyan-600 underline decoration-solid underline-offset-2 hover:no-underline dark:text-cyan-500"
>
Flowbite Library
</a>
Expand Down Expand Up @@ -80,7 +80,7 @@ import { MdPercent } from 'react-icons/md';"
</span>
<span>
Get 5% commision per sale&nbsp;
<a href="https://flowbite.com" className="flex items-center ml-0 text-sm font-medium text-blue-600 md:ml-1 md:inline-flex dark:text-blue-500 hover:underline">
<a href="https://flowbite.com" className="flex items-center ml-0 text-sm font-medium text-cyan-600 md:ml-1 md:inline-flex dark:text-cyan-500 hover:underline">
Become a partner
<HiArrowRight className="ml-2" />
</a>
Expand All @@ -104,7 +104,7 @@ import { MdPercent } from 'react-icons/md';"
Get 5% commision per sale&nbsp;
<a
href="https://flowbite.com"
className="ml-0 flex items-center text-sm font-medium text-blue-600 hover:underline dark:text-blue-500 md:ml-1 md:inline-flex"
className="ml-0 flex items-center text-sm font-medium text-cyan-600 hover:underline dark:text-cyan-500 md:ml-1 md:inline-flex"
>
Become a partner
<HiArrowRight className="ml-2" />
Expand All @@ -129,20 +129,20 @@ Use this free example to show a text message for announcement with a CTA link, a
title="Marketing CTA banner"
code={`<Banner>
<div className="fixed left-1/2 top-6 z-50 flex w-[calc(100%-2rem)] -translate-x-1/2 flex-col justify-between rounded-lg border border-gray-100 bg-white p-4 shadow-sm dark:border-gray-600 dark:bg-gray-700 md:flex-row lg:max-w-7xl">
<div class="mb-3 mr-4 flex flex-col items-start md:mb-0 md:flex-row md:items-center">
<div className="mb-3 mr-4 flex flex-col items-start md:mb-0 md:flex-row md:items-center">
<a
href="https://flowbite.com/"
class="mb-2 flex items-center border-gray-200 dark:border-gray-600 md:mb-0 md:mr-4 md:border-r md:pr-4"
className="mb-2 flex items-center border-gray-200 dark:border-gray-600 md:mb-0 md:mr-4 md:border-r md:pr-4"
>
<img src="https://flowbite.com/docs/images/logo.svg" class="mr-2 h-6" alt="Flowbite Logo" />
<span class="self-center whitespace-nowrap text-lg font-semibold dark:text-white">Flowbite</span>
<img src="https://flowbite.com/docs/images/logo.svg" className="mr-2 h-6" alt="Flowbite Logo" />
<span className="self-center whitespace-nowrap text-lg font-semibold dark:text-white">Flowbite</span>
</a>
<p class="flex items-center text-sm font-normal text-gray-500 dark:text-gray-400">
<p className="flex items-center text-sm font-normal text-gray-500 dark:text-gray-400">
Build websites even faster with components on top of Tailwind CSS
</p>
</div>
<div class="flex flex-shrink-0 items-center">
<Button href="#">Sign up</Button>
<div className="flex flex-shrink-0 items-center">
<Button href="#" size="sm">Sign up</Button>
<Banner.CollapseButton color="gray" className="border-0 bg-transparent text-gray-500 dark:text-gray-400">
<HiX className="h-4 w-4" />
</Banner.CollapseButton>
Expand All @@ -152,19 +152,19 @@ Use this free example to show a text message for announcement with a CTA link, a
>
<Banner>
<div className="flex w-[calc(100%-2rem)] flex-col justify-between rounded-lg border border-gray-100 bg-white p-4 shadow-sm dark:border-gray-600 dark:bg-gray-700 md:flex-row lg:max-w-7xl">
<div class="mb-3 mr-4 flex flex-col items-start md:mb-0 md:flex-row md:items-center">
<div className="mb-3 mr-4 flex flex-col items-start md:mb-0 md:flex-row md:items-center">
<a
href="https://flowbite.com/"
class="mb-2 flex items-center border-gray-200 dark:border-gray-600 md:mb-0 md:mr-4 md:border-r md:pr-4"
className="mb-2 flex items-center border-gray-200 dark:border-gray-600 md:mb-0 md:mr-4 md:border-r md:pr-4"
>
<img src="https://flowbite.com/docs/images/logo.svg" class="mr-2 h-6" alt="Flowbite Logo" />
<span class="self-center whitespace-nowrap text-lg font-semibold dark:text-white md:pr-6">Flowbite</span>
<img src="https://flowbite.com/docs/images/logo.svg" className="mr-2 h-6" alt="Flowbite Logo" />
<span className="self-center whitespace-nowrap text-lg font-semibold dark:text-white md:pr-6">Flowbite</span>
</a>
<p class="flex items-center text-sm font-normal text-gray-500 dark:text-gray-400">
<p className="flex items-center text-sm font-normal text-gray-500 dark:text-gray-400">
Build websites even faster with components on top of Tailwind CSS
</p>
</div>
<div class="flex flex-shrink-0 items-center">
<div className="flex flex-shrink-0 items-center">
<Button href="#">Sign up</Button>
<Banner.CollapseButton color="gray" className="border-0 bg-transparent text-gray-500 dark:text-gray-400">
<HiX className="h-4 w-4" />
Expand All @@ -184,8 +184,8 @@ This example can be used to encourage your website visitors to sign up to your e
title="Newsletter sign-up banner"
code={`<Banner>
<div className="fixed top-0 left-0 z-50 flex w-full items-center justify-between border-b border-gray-200 bg-gray-50 p-4 dark:border-gray-600 dark:bg-gray-700">
<div class="mx-auto flex w-full flex-shrink-0 items-center sm:w-auto">
<form action="#" class="flex w-full flex-col items-center md:flex-row md:gap-x-3">
<div className="mx-auto flex w-full flex-shrink-0 items-center sm:w-auto">
<form action="#" className="flex w-full flex-col items-center md:flex-row md:gap-x-3">
<Label
htmlFor="email"
className="mb-2 mr-auto flex-shrink-0 text-sm font-medium text-gray-500 dark:text-gray-400 md:m-0 md:mb-0"
Expand All @@ -204,8 +204,8 @@ This example can be used to encourage your website visitors to sign up to your e
>
<Banner>
<div className="flex w-full items-center justify-between border-b border-gray-200 bg-gray-50 p-4 dark:border-gray-600 dark:bg-gray-700">
<div class="mx-auto flex w-full flex-shrink-0 items-center sm:w-auto">
<form action="#" class="flex w-full flex-col items-center md:flex-row md:gap-x-3">
<div className="mx-auto flex w-full flex-shrink-0 items-center sm:w-auto">
<form action="#" className="flex w-full flex-col items-center md:flex-row md:gap-x-3">
<Label
htmlFor="email"
className="mb-2 mr-auto flex-shrink-0 text-sm font-medium text-gray-500 dark:text-gray-400 md:m-0 md:mb-0"
Expand Down Expand Up @@ -233,24 +233,24 @@ import { HiArrowRight, HiX } from 'react-icons/hi';"
title="Informational banner"
code={`<Banner>
<div className="fixed left-0 top-0 z-50 flex w-full flex-col justify-between border-b border-gray-200 bg-gray-50 p-4 dark:border-gray-600 dark:bg-gray-700 md:flex-row">
<div class="mb-4 md:mb-0 md:mr-4">
<h2 class="mb-1 text-base font-semibold text-gray-900 dark:text-white">Integration is the key</h2>
<p class="flex items-center text-sm font-normal text-gray-500 dark:text-gray-400">
<div className="mb-4 md:mb-0 md:mr-4">
<h2 className="mb-1 text-base font-semibold text-gray-900 dark:text-white">Integration is the key</h2>
<p className="flex items-center text-sm font-normal text-gray-500 dark:text-gray-400">
You can integrate Flowbite with many tools to make your work even more efficient and lightning fast based on
Tailwind CSS.
</p>
</div>
<div class="flex flex-shrink-0 items-center">
<div className="flex flex-shrink-0 items-center">
<a
href="#"
class="mr-3 inline-flex items-center justify-center rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
className="mr-3 inline-flex items-center justify-center rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-medium text-gray-900 hover:bg-gray-100 hover:text-cyan-700 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
>
<FaBookOpen />
Learn more
</a>
<a
href="#"
class="mr-2 inline-flex items-center justify-center rounded-lg bg-blue-700 px-3 py-2 text-xs font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
className="mr-2 inline-flex items-center justify-center rounded-lg bg-cyan-700 px-3 py-2 text-xs font-medium text-white hover:bg-cyan-800 focus:outline-none focus:ring-4 focus:ring-cyan-300 dark:bg-cyan-600 dark:hover:bg-cyan-700 dark:focus:ring-cyan-800"
>
Get started
<HiArrowRight />
Expand All @@ -264,24 +264,24 @@ import { HiArrowRight, HiX } from 'react-icons/hi';"
>
<Banner>
<div className="flex w-full flex-col justify-between border-b border-gray-200 bg-gray-50 p-4 dark:border-gray-600 dark:bg-gray-700 md:flex-row">
<div class="mb-4 md:mb-0 md:mr-4">
<h2 class="mb-1 text-base font-semibold text-gray-900 dark:text-white">Integration is the key</h2>
<p class="flex items-center text-sm font-normal text-gray-500 dark:text-gray-400">
<div className="mb-4 md:mb-0 md:mr-4">
<h2 className="mb-1 text-base font-semibold text-gray-900 dark:text-white">Integration is the key</h2>
<p className="flex items-center text-sm font-normal text-gray-500 dark:text-gray-400">
You can integrate Flowbite with many tools to make your work even more efficient and lightning fast based on
Tailwind CSS.
</p>
</div>
<div class="flex flex-shrink-0 items-center">
<div className="flex flex-shrink-0 items-center">
<a
href="#"
class="mr-3 inline-flex items-center justify-center rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
className="mr-3 inline-flex items-center justify-center rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-medium text-gray-900 hover:bg-gray-100 hover:text-cyan-700 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
>
<FaBookOpen className="mr-2 h-4 w-4" />
Learn more
</a>
<a
href="#"
class="mr-2 inline-flex items-center justify-center rounded-lg bg-blue-700 px-3 py-2 text-xs font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
className="mr-2 inline-flex items-center justify-center rounded-lg bg-cyan-700 px-3 py-2 text-xs font-medium text-white hover:bg-cyan-800 focus:outline-none focus:ring-4 focus:ring-cyan-300 dark:bg-cyan-600 dark:hover:bg-cyan-700 dark:focus:ring-cyan-800"
>
Get started
<HiArrowRight className="ml-2 h-4 w-4" />
Expand Down