Merge pull request #170 from qwikerx/feat/figma-2

Feat/figma 2
qwikerx · Aug 12, 2024 · c3af59e · c3af59e
2 parents f06fe3e + d55b03d
commit c3af59e
Show file tree

Hide file tree

Showing 106 changed files with 630 additions and 568 deletions.
diff --git a/README.md b/README.md
@@ -140,238 +140,238 @@ export default component$(() => {
     <tr>
       <td>
         <a href="https://flowbite-qwik.com/docs/components/accordion">
-          <img alt="Qwik Accordion" src="https://flowbite-qwik.com/thumbnails/website/accordion.svg" />
+          <img alt="Qwik Accordion" src="https://flowbite-qwik.com/thumbnails/website/accordion-light.svg" />
         </a>
       </td>
       <td>
         <a href="https://flowbite-qwik.com/docs/components/alert">
-          <img alt="Qwik Alert" src="https://flowbite-qwik.com/thumbnails/website/alerts.svg" />
+          <img alt="Qwik Alert" src="https://flowbite-qwik.com/thumbnails/website/alerts-light.svg" />
         </a>
       </td>
       <td>
         <a href="https://flowbite-qwik.com/docs/components/avatar">
-          <img alt="Qwik Avatar" src="https://flowbite-qwik.com/thumbnails/website/avatar.svg" />
+          <img alt="Qwik Avatar" src="https://flowbite-qwik.com/thumbnails/website/avatar-light.svg" />
         </a>
       </td>
     </tr>
     <tr>
       <td>
         <a href="https://flowbite-qwik.com/docs/components/badge">
-          <img alt="Qwik Badge" src="https://flowbite-qwik.com/thumbnails/website/badges.svg" />
+          <img alt="Qwik Badge" src="https://flowbite-qwik.com/thumbnails/website/badges-light.svg" />
         </a>
       </td>
       <td>
         <a href="https://flowbite-qwik.com/docs/components/banner">
-          <img alt="Qwik Banner" src="https://flowbite-qwik.com/thumbnails/website/banner.svg" />
+          <img alt="Qwik Banner" src="https://flowbite-qwik.com/thumbnails/website/banner-light.svg" />
         </a>
       </td>
       <td>
         <a href="https://flowbite-qwik.com/docs/typography/blockquote">
-          <img alt="Qwik Blockquote" src="https://flowbite-qwik.com/thumbnails/website/blockquote.svg" />
+          <img alt="Qwik Blockquote" src="https://flowbite-qwik.com/thumbnails/website/blockquote-light.svg" />
         </a>
       </td>
     </tr>
     <tr>
       <td>
         <a href="https://flowbite-qwik.com/docs/components/breadcrumb">
-          <img alt="Qwik Breadcrumb" src="https://flowbite-qwik.com/thumbnails/website/breadcrumbs.svg" />
+          <img alt="Qwik Breadcrumb" src="https://flowbite-qwik.com/thumbnails/website/breadcrumbs-light.svg" />
         </a>
       </td>
       <td>
         <a href="https://flowbite-qwik.com/docs/components/button">
-          <img alt="Qwik Button" src="https://flowbite-qwik.com/thumbnails/website/buttons.svg" />
+          <img alt="Qwik Button" src="https://flowbite-qwik.com/thumbnails/website/buttons-light.svg" />
         </a>
       </td>
       <td>
         <a href="https://flowbite-qwik.com/docs/components/button-group">
-          <img alt="Qwik ButtonGroup" src="https://flowbite-qwik.com/thumbnails/website/button-group.svg" />
+          <img alt="Qwik ButtonGroup" src="https://flowbite-qwik.com/thumbnails/website/button-group-light.svg" />
         </a>
       </td>
     </tr>
     <tr>
       <td>
         <a href="https://flowbite-qwik.com/docs/components/card">
-          <img alt="Qwik Card" src="https://flowbite-qwik.com/thumbnails/website/cards.svg" />
+          <img alt="Qwik Card" src="https://flowbite-qwik.com/thumbnails/website/cards-light.svg" />
         </a>
       </td>
       <td>
         <a href="https://flowbite-qwik.com/docs/components/carousel">
-          <img alt="Qwik Carousel" src="https://flowbite-qwik.com/thumbnails/website/carousel.svg" />
+          <img alt="Qwik Carousel" src="https://flowbite-qwik.com/thumbnails/website/carousel-light.svg" />
         </a>
       </td>
       <td>
         <a href="https://flowbite-qwik.com/docs/forms/checkbox">
-          <img alt="Qwik Checkbox" src="https://flowbite-qwik.com/thumbnails/website/checkbox.svg" />
+          <img alt="Qwik Checkbox" src="https://flowbite-qwik.com/thumbnails/website/checkbox-light.svg" />
         </a>
       </td>
     </tr>
     <tr>
       <td>
         <a href="https://flowbite-qwik.com/docs/components/clipboard">
-          <img alt="Qwik Clipboard" src="https://flowbite-qwik.com/thumbnails/website/clipboard.svg" />
+          <img alt="Qwik Clipboard" src="https://flowbite-qwik.com/thumbnails/website/clipboard-light.svg" />
         </a>
       </td>
       <td>
         <a href="https://flowbite-qwik.com/docs/components/date-picker">
-          <img alt="Qwik DatePicker" src="https://flowbite-qwik.com/thumbnails/website/datepicker.svg" />
+          <img alt="Qwik DatePicker" src="https://flowbite-qwik.com/thumbnails/website/datepicker-light.svg" />
         </a>
       </td>
       <td>
         <a href="https://flowbite-qwik.com/docs/components/drawer">
-          <img alt="Qwik Drawer" src="https://flowbite-qwik.com/thumbnails/website/drawer.svg" />
+          <img alt="Qwik Drawer" src="https://flowbite-qwik.com/thumbnails/website/drawer-light.svg" />
         </a>
       </td>
     </tr>
     <tr>
       <td>
         <a href="https://flowbite-qwik.com/docs/components/dropdown">
-          <img alt="Qwik Dropdown" src="https://flowbite-qwik.com/thumbnails/website/dropdown.svg" />
+          <img alt="Qwik Dropdown" src="https://flowbite-qwik.com/thumbnails/website/dropdown-light.svg" />
         </a>
       </td>
       <td>
         <a href="https://flowbite-qwik.com/docs/components/footer">
-          <img alt="Qwik Footer" src="https://flowbite-qwik.com/thumbnails/website/footer.svg" />
+          <img alt="Qwik Footer" src="https://flowbite-qwik.com/thumbnails/website/footer-light.svg" />
         </a>
       </td>
       <td>
         <a href="https://flowbite-qwik.com/docs/typography/hr">
-          <img alt="Qwik HR" src="https://flowbite-qwik.com/thumbnails/website/horizontal-rule.svg" />
+          <img alt="Qwik HR" src="https://flowbite-qwik.com/thumbnails/website/horizontal-rule-light.svg" />
         </a>
       </td>
     </tr>
     <tr>
       <td>
         <a href="https://flowbite-qwik.com/docs/typography/heading">
-          <img alt="Qwik Heading" src="https://flowbite-qwik.com/thumbnails/website/headings.svg" />
+          <img alt="Qwik Heading" src="https://flowbite-qwik.com/thumbnails/website/headings-light.svg" />
         </a>
       </td>
       <td>
         <a href="https://flowbite-qwik.com/docs/forms/input">
-          <img alt="Qwik Input" src="https://flowbite-qwik.com/thumbnails/website/input-field.svg" />
+          <img alt="Qwik Input" src="https://flowbite-qwik.com/thumbnails/website/input-field-light.svg" />
         </a>
       </td>
       <td>
         <a href="https://flowbite-qwik.com/docs/components/jumbotron">
-          <img alt="Qwik Jumbotron" src="https://flowbite-qwik.com/thumbnails/website/jumbotron.svg" />
+          <img alt="Qwik Jumbotron" src="https://flowbite-qwik.com/thumbnails/website/jumbotron-light.svg" />
         </a>
       </td>
     </tr>
     <tr>
       <td>
         <a href="https://flowbite-qwik.com/docs/components/kbd">
-          <img alt="Qwik Kbd" src="https://flowbite-qwik.com/thumbnails/website/kbd.svg" />
+          <img alt="Qwik Kbd" src="https://flowbite-qwik.com/thumbnails/website/kbd-light.svg" />
         </a>
       </td>
       <td>
         <a href="https://flowbite-qwik.com/docs/typography/link">
-          <img alt="Qwik Link" src="https://flowbite-qwik.com/thumbnails/website/link.svg" />
+          <img alt="Qwik Link" src="https://flowbite-qwik.com/thumbnails/website/link-light.svg" />
         </a>
       </td>
       <td>
         <a href="https://flowbite-qwik.com/docs/typography/list">
-          <img alt="Qwik List" src="https://flowbite-qwik.com/thumbnails/website/list.svg" />
+          <img alt="Qwik List" src="https://flowbite-qwik.com/thumbnails/website/list-light.svg" />
         </a>
       </td>
     </tr>
     <tr>
       <td>
         <a href="https://flowbite-qwik.com/docs/components/list-group">
-          <img alt="Qwik ListGroup" src="https://flowbite-qwik.com/thumbnails/website/list-group.svg" />
+          <img alt="Qwik ListGroup" src="https://flowbite-qwik.com/thumbnails/website/list-group-light.svg" />
         </a>
       </td>
       <td>
         <a href="https://flowbite-qwik.com/docs/components/modal">
-          <img alt="Qwik Modal" src="https://flowbite-qwik.com/thumbnails/website/modal.svg" />
+          <img alt="Qwik Modal" src="https://flowbite-qwik.com/thumbnails/website/modal-light.svg" />
         </a>
       </td>
       <td>
         <a href="https://flowbite-qwik.com/docs/components/navbar">
-          <img alt="Qwik Navbar" src="https://flowbite-qwik.com/thumbnails/website/navbar.svg" />
+          <img alt="Qwik Navbar" src="https://flowbite-qwik.com/thumbnails/website/navbar-light.svg" />
         </a>
       </td>
     </tr>
     <tr>
       <td>
         <a href="https://flowbite-qwik.com/docs/components/pagination">
-          <img alt="Qwik Pagination" src="https://flowbite-qwik.com/thumbnails/website/pagination.svg" />
+          <img alt="Qwik Pagination" src="https://flowbite-qwik.com/thumbnails/website/pagination-light.svg" />
         </a>
       </td>
       <td>
         <a href="https://flowbite-qwik.com/docs/components/progress-bar">
-          <img alt="Qwik ProgressBar" src="https://flowbite-qwik.com/thumbnails/website/progress.svg" />
+          <img alt="Qwik ProgressBar" src="https://flowbite-qwik.com/thumbnails/website/progress-light.svg" />
         </a>
       </td>
       <td>
         <a href="https://flowbite-qwik.com/docs/forms/radio">
-          <img alt="Qwik Radio" src="https://flowbite-qwik.com/thumbnails/website/radio.svg" />
+          <img alt="Qwik Radio" src="https://flowbite-qwik.com/thumbnails/website/radio-light.svg" />
         </a>
       </td>
     </tr>
     <tr>
       <td>
         <a href="https://flowbite-qwik.com/docs/forms/range">
-          <img alt="Qwik Range" src="https://flowbite-qwik.com/thumbnails/website/range-slider.svg" />
+          <img alt="Qwik Range" src="https://flowbite-qwik.com/thumbnails/website/range-slider-light.svg" />
         </a>
       </td>
       <td>
         <a href="https://flowbite-qwik.com/docs/components/rating">
-          <img alt="Qwik Rating" src="https://flowbite-qwik.com/thumbnails/website/rating.svg" />
+          <img alt="Qwik Rating" src="https://flowbite-qwik.com/thumbnails/website/rating-light.svg" />
         </a>
       </td>
       <td>
         <a href="https://flowbite-qwik.com/docs/forms/select">
-          <img alt="Qwik Select" src="https://flowbite-qwik.com/thumbnails/website/select.svg" />
+          <img alt="Qwik Select" src="https://flowbite-qwik.com/thumbnails/website/select-light.svg" />
         </a>
       </td>
     </tr>
     <tr>
       <td>
         <a href="https://flowbite-qwik.com/docs/components/sidebar">
-          <img alt="Qwik Sidebar" src="https://flowbite-qwik.com/thumbnails/website/sidebar.svg" />
+          <img alt="Qwik Sidebar" src="https://flowbite-qwik.com/thumbnails/website/sidebar-light.svg" />
         </a>
       </td>
       <td>
         <a href="https://flowbite-qwik.com/docs/components/spinner">
-          <img alt="Qwik Spinner" src="https://flowbite-qwik.com/thumbnails/website/spinner.svg" />
+          <img alt="Qwik Spinner" src="https://flowbite-qwik.com/thumbnails/website/spinner-light.svg" />
         </a>
       </td>
       <td>
         <a href="https://flowbite-qwik.com/docs/components/table">
-          <img alt="Qwik Table" src="https://flowbite-qwik.com/thumbnails/website/table.svg" />
+          <img alt="Qwik Table" src="https://flowbite-qwik.com/thumbnails/website/table-light.svg" />
         </a>
       </td>
     </tr>
     <tr>
       <td>
         <a href="https://flowbite-qwik.com/docs/components/tabs">
-          <img alt="Qwik Tabs" src="https://flowbite-qwik.com/thumbnails/website/tabs.svg" />
+          <img alt="Qwik Tabs" src="https://flowbite-qwik.com/thumbnails/website/tabs-light.svg" />
         </a>
       </td>
       <td>
         <a href="https://flowbite-qwik.com/docs/forms/textarea">
-          <img alt="Qwik Textarea" src="https://flowbite-qwik.com/thumbnails/website/textarea.svg" />
+          <img alt="Qwik Textarea" src="https://flowbite-qwik.com/thumbnails/website/textarea-light.svg" />
         </a>
       </td>
       <td>
         <a href="https://flowbite-qwik.com/docs/components/timeline">
-          <img alt="Qwik Timeline" src="https://flowbite-qwik.com/thumbnails/website/timeline.svg" />
+          <img alt="Qwik Timeline" src="https://flowbite-qwik.com/thumbnails/website/timeline-light.svg" />
         </a>
       </td>
     </tr>
     <tr>
       <td>
         <a href="https://flowbite-qwik.com/docs/components/toast">
-          <img alt="Qwik ToastList" src="https://flowbite-qwik.com/thumbnails/website/toasts.svg" />
+          <img alt="Qwik ToastList" src="https://flowbite-qwik.com/thumbnails/website/toasts-light.svg" />
         </a>
       </td>
       <td>
         <a href="https://flowbite-qwik.com/docs/forms/toggle">
-          <img alt="Qwik Toggle" src="https://flowbite-qwik.com/thumbnails/website/toggle.svg" />
+          <img alt="Qwik Toggle" src="https://flowbite-qwik.com/thumbnails/website/toggle-light.svg" />
         </a>
       </td>
       <td>
         <a href="https://flowbite-qwik.com/docs/components/tooltip">
-          <img alt="Qwik Tooltip" src="https://flowbite-qwik.com/thumbnails/website/tooltips.svg" />
+          <img alt="Qwik Tooltip" src="https://flowbite-qwik.com/thumbnails/website/tooltips-light.svg" />
         </a>
       </td>
     </tr>

diff --git a/apps/web/src/components/CodeBlock/CodeBlock.tsx b/apps/web/src/components/CodeBlock/CodeBlock.tsx
@@ -60,7 +60,7 @@ export const CodeBlock = component$<CodeBlockProps>(({ content, language, expand
               onClick$={copy$}
               color="light"
               size="xs"
-              class="rounded-l-none rounded-r-none border-b-0 border-r-0 border-t-0"
+              class="rounded-l-none rounded-r-none border-b-0 border-r-0 border-t-0 hover:text-purple-600"
               prefix={IconCopySolid}
               title="Copy to clipboard"
             >
@@ -78,7 +78,7 @@ export const CodeBlock = component$<CodeBlockProps>(({ content, language, expand
           color="light"
           size="md"
           full
-          class="rounded-t-none border-t border-gray-200 bg-gray-100 text-gray-800 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
+          class="rounded-t-none border-t border-gray-200 bg-gray-100 text-gray-800 hover:text-purple-600 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
           onClick$={toggle$}
         >
           {isCollapsed.value ? 'Expand code' : 'Collapse code'}

diff --git a/apps/web/src/components/ComponentDocPage/ComponentDocPage.tsx b/apps/web/src/components/ComponentDocPage/ComponentDocPage.tsx
@@ -53,31 +53,33 @@ export const ComponentDocPage = component$<Item>(({ name }) => {
     <>
       {previewItems.value ? (
         <div class="flex" ref={previewElements}>
-          <div class="mx-auto flex min-w-0 max-w-4xl flex-col px-4 pb-12 pt-6 lg:px-8 lg:pb-16 lg:pt-8 xl:pb-24">
-            <section class="flex flex-col gap-8">
-              <Heading tag="h1" class="capitalize">
+          <div class="mx-auto flex min-w-0 max-w-3xl flex-col px-4 pb-12 pt-6 lg:px-8 lg:pb-16 lg:pt-8 xl:pb-24">
+            <section class="flex flex-col">
+              <Heading tag="h1" class="mb-2 text-3xl font-extrabold capitalize">
                 Qwik {name} - Flowbite
               </Heading>
 
-              <div class="mb-4 text-gray-600 dark:text-gray-400">
+              <div class="mb-8 text-gray-600 dark:text-gray-400">
                 <Slot name="description" />
               </div>
 
-              {previewItems.value?.map((item, i) => (
-                <Preview
-                  key={i + item.title}
-                  title={item.title}
-                  url={item.url}
-                  description={item.description}
-                  codeContent={item.content}
-                  height={item.height}
-                  data-preview={item.title}
-                />
-              ))}
+              <div class="flex flex-col gap-8">
+                {previewItems.value?.map((item, i) => (
+                  <Preview
+                    key={i + item.title}
+                    title={item.title}
+                    url={item.url}
+                    description={item.description}
+                    codeContent={item.content}
+                    height={item.height}
+                    data-preview={item.title}
+                  />
+                ))}
+              </div>
             </section>
           </div>
 
-          <div class="right-0 hidden w-64 flex-none pl-8 pt-2 xl:block xl:text-sm">
+          <div class="right-0 hidden w-64 flex-none pl-4 pt-2 xl:block xl:text-sm">
             <TableOfContents items={tableOfContentItems.value} activeElement={activeElement.value} />
           </div>
         </div>

diff --git a/apps/web/src/components/DocumentPage/DocumentPage.css b/apps/web/src/components/DocumentPage/DocumentPage.css
@@ -1,35 +1,35 @@
 .doc-page h1 {
-  @apply mb-2;
+  @apply mb-2 text-3xl font-extrabold;
 }
 
 .doc-page h2 {
-  @apply mt-8 mb-2 scroll-m-16;
+  @apply mb-2 mt-8 scroll-m-16 text-2xl font-bold;
 }
 
 .doc-page h3 {
-  @apply mt-8 mb-2;
+  @apply mb-2 mt-8 text-xl;
 }
 
 .doc-page h4 {
-  @apply mt-8 mb-2;
+  @apply mb-2 mt-8 text-lg;
 }
 
 .doc-page p {
   @apply my-4 text-base text-gray-600 dark:text-gray-400;
 }
 
 .doc-page ul {
-  @apply mt-4 list-disc list-inside;
+  @apply mt-4 list-inside list-disc;
 }
 
 .doc-page ol {
-  @apply mt-4 list-decimal list-inside;
+  @apply mt-4 list-inside list-decimal;
 }
 
 .doc-page hr {
   @apply my-8 border-t border-gray-200 dark:border-gray-800;
 }
 
 .doc-page em {
-  @apply text-purple-700 dark:text-purple-300 not-italic;
+  @apply not-italic text-purple-700 dark:text-purple-300;
 }