From a6f7d4fb1214c5cbc75773dbf7696e86c1e7738d Mon Sep 17 00:00:00 2001
From: maieulchevalier <maieul.chevalier@gmail.com>
Date: Fri, 8 Dec 2023 22:58:07 +0100
Subject: [PATCH] refactor(notes): change the Note system to reflect what notes
 are usually used for

---
 apps/website/src/components/note/note.tsx     | 62 ++++++-------------
 .../routes/docs/headless/accordion/index.mdx  |  2 +-
 .../docs/headless/introduction/index.mdx      |  2 +-
 3 files changed, 20 insertions(+), 46 deletions(-)

diff --git a/apps/website/src/components/note/note.tsx b/apps/website/src/components/note/note.tsx
index 5a3a7a9c3..258ce2d0d 100644
--- a/apps/website/src/components/note/note.tsx
+++ b/apps/website/src/components/note/note.tsx
@@ -1,9 +1,8 @@
 import { component$, Slot, QwikIntrinsicElements } from '@builder.io/qwik';
 
 export enum NoteStatus {
-  Info = 'info',
-  Warning = 'warning',
-  Success = 'success',
+  Important = 'important',
+  FunFact = 'fun fact',
   Caution = 'caution',
 }
 
@@ -13,31 +12,27 @@ export interface NoteProps {
 
 function getIconByStatus(status?: NoteStatus) {
   switch (status) {
-    case NoteStatus.Info:
-      return <InfoIcon class="text-qwikui-purple-500 dark:text-qwikui-blue-700" />;
-    case NoteStatus.Warning:
-      return <WarningIcon class="text-yellow-500" />;
-    case NoteStatus.Success:
-      return <SuccessIcon class="text-green-500 dark:text-green-600" />;
+    case NoteStatus.Important:
+      return <InfoIcon class="text-secondary" />;
+    case NoteStatus.FunFact:
+      return <SuccessIcon class="text-primary" />;
     case NoteStatus.Caution:
-      return <CautionIcon class="text-red-600 dark:text-red-700" />;
+      return <CautionIcon class="text-destructive" />;
     default:
-      return <InfoIcon class="text-qwikui-purple-500 dark:text-qwikui-blue-700" />;
+      return <InfoIcon class="text-primary" />;
   }
 }
 
 function getBackgroundByStatus(status?: NoteStatus) {
   switch (status) {
-    case NoteStatus.Info:
-      return 'bg-[#ECDDFD] border-qwikui-purple-500 dark:bg-[#0C2944] border-l-2 dark:border-qwikui-blue-700 mb-4 rounded-lg block';
-    case NoteStatus.Warning:
-      return 'bg-[#FBF0CD] dark:bg-[#3B3623] border-yellow-500 border-l-2 dark:border-yellow-500 mb-4 rounded-lg block';
-    case NoteStatus.Success:
-      return 'dark:bg-[#103331] bg-[#D2F4DF] border-green-500 border-l-2 dark:border-green-600 mb-4 rounded-lg block';
+    case NoteStatus.Important:
+      return 'bg-secondary/20 border-secondary border-l-2 mb-4 rounded-lg block';
+    case NoteStatus.FunFact:
+      return 'bg-primary/20 border-primary border-l-2 mb-4 rounded-lg block';
     case NoteStatus.Caution:
-      return 'bg-[#F8D3D3] border-red-600 dark:bg-[#311727] border-l-2 dark:border-red-700 mb-4 rounded-lg block';
+      return 'bg-destructive/20 border-destructive border-l-2 mb-4 rounded-lg block';
     default:
-      return 'dark:bg-[#0C2944] border-l-2 dark:border-qwikui-blue-700 mb-4 rounded-lg block';
+      return 'bg-secondary/20 border-secondary border-l-2 mb-4 rounded-lg block';
   }
 }
 
@@ -45,12 +40,12 @@ export const Note = component$<NoteProps>(({ status, ...props }) => {
   return (
     <aside
       class={`${getBackgroundByStatus(
-        status ?? NoteStatus.Info,
+        status ?? NoteStatus.Important,
       )} note-link relative mx-[-24px] px-5 py-4 lg:mx-[-32px] lg:px-8 lg:pt-6`}
     >
       <div class="absolute left-[-17.5px] top-[-17.5px] hidden h-8 w-8 rounded-full bg-white dark:bg-slate-900 lg:block">
-        <div class="flex h-8 w-8 items-center justify-center ">
-          {getIconByStatus(status ?? NoteStatus.Info)}
+        <div class="flex h-8 w-8 items-center justify-center">
+          {getIconByStatus(status ?? NoteStatus.Important)}
         </div>
       </div>
       <blockquote {...props}>
@@ -78,7 +73,7 @@ export function InfoIcon(props: QwikIntrinsicElements['svg'], key: string) {
   );
 }
 
-export function WarningIcon(props: QwikIntrinsicElements['svg'], key: string) {
+export function CautionIcon(props: QwikIntrinsicElements['svg'], key: string) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -113,24 +108,3 @@ export function SuccessIcon(props: QwikIntrinsicElements['svg'], key: string) {
     </svg>
   );
 }
-
-export function CautionIcon(props: QwikIntrinsicElements['svg'], key: string) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="32"
-      height="32"
-      viewBox="0 0 256 256"
-      {...props}
-      key={key}
-    >
-      <g fill="currentColor">
-        <path
-          d="M195.88 195.88a96 96 0 0 1-135.76 0L195.88 60.12a96 96 0 0 1 0 135.76Z"
-          opacity=".2"
-        ></path>
-        <path d="M201.54 54.46A104 104 0 0 0 54.46 201.54A104 104 0 0 0 201.54 54.46ZM65.78 65.77a88.08 88.08 0 0 1 118.52-5.38L60.38 184.31a88 88 0 0 1 5.4-118.54Zm124.44 124.46a88.1 88.1 0 0 1-118.52 5.38L195.62 71.69a88 88 0 0 1-5.4 118.54Z"></path>
-      </g>
-    </svg>
-  );
-}
diff --git a/apps/website/src/routes/docs/headless/accordion/index.mdx b/apps/website/src/routes/docs/headless/accordion/index.mdx
index 302b53cb5..82d9f6ae7 100644
--- a/apps/website/src/routes/docs/headless/accordion/index.mdx
+++ b/apps/website/src/routes/docs/headless/accordion/index.mdx
@@ -101,7 +101,7 @@ Any disabled elements will be skipped over when using tab or the `Up Arrow` and
 
 You can make the accordion items uncontrolled by adding the **defaultValue** prop on the items. This will open an accordion item without user interaction, and can be used on both type single and multi accordions.
 
-<Note status="warning">
+<Note status="caution">
 **Don't try to open multiple items with single mode!**
 
 If you're using `behavior="single"` with multiple defaultValue accordion items, the last item will be the one that opens. You may experience flickering behavior as well.
diff --git a/apps/website/src/routes/docs/headless/introduction/index.mdx b/apps/website/src/routes/docs/headless/introduction/index.mdx
index 855b6cbb6..a7f28a784 100644
--- a/apps/website/src/routes/docs/headless/introduction/index.mdx
+++ b/apps/website/src/routes/docs/headless/introduction/index.mdx
@@ -25,7 +25,7 @@ Qwik UI Headless Kit provides a complete set of totally customizable components
 
 It gives you, the developer, more time to focus on what matters most, building your awesome app! Apply your favorite styling technology, CSS-in-JS, Tailwind CSS, or whatever floats your boat. Add just a few _ad hoc_ styles or implement a full-on design system, Qwik UI Headless makes it easy.
 
-<Note status="warning">
+<Note status="caution">
   Qwik UI is in its **beta** phase - it's like a roller coaster, thrilling and full of
   surprises! Expect new features and some breaking changes until we reach version 1.0. So,
   buckle up and enjoy the ride. 🏍️