fix(frontend): important buttons (#2613)

# Description

Please include a summary of the changes and the related issue. Please
also include relevant motivation and context.

## Checklist before requesting a review

Please delete options that are not relevant.

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented hard-to-understand areas
- [ ] I have ideally added tests that prove my fix is effective or that
my feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged

## Screenshots (if appropriate):

frontend/lib/components/AddBrainModal/components/BrainMainInfosStep/BrainMainInfosStep.tsx

@@ -80,6 +80,7 @@ export const BrainMainInfosStep = (): JSX.Element => {
           onClick={() => next()}
           iconName="chevronRight"
           disabled={isDisabled}
+          important={true}
         />
       </div>
     </div>

frontend/lib/components/AddBrainModal/components/CreateBrainStep/CreateBrainStep.tsx

@@ -134,6 +134,7 @@ export const CreateBrainStep = (): JSX.Element => {
               knowledgeToFeed.length === 0 && !userIdentityData?.onboarded
             }
             isLoading={creating}
+            important={true}
           />
         ) : (
           <QuivrButton
@@ -142,6 +143,7 @@ export const CreateBrainStep = (): JSX.Element => {
             iconName="add"
             onClick={() => setCreateBrainStepIndex(1)}
             isLoading={creating}
+            important={true}
           />
         )}
       </div>

frontend/lib/components/UploadDocumentModal/UploadDocumentModal.tsx

@@ -51,6 +51,7 @@ export const UploadDocumentModal = (): JSX.Element => {
             onClick={handleFeedBrain}
             disabled={knowledgeToFeed.length === 0 || !currentBrain}
             isLoading={feeding}
+            important={true}
           />
         </div>
       </div>

frontend/lib/components/ui/QuivrButton/QuivrButton.module.scss

@@ -19,56 +19,60 @@
     display: none;
   }
 
-  &.primary {
-    border-color: var(--primary-0);
-    color: var(--primary-0);
-
-    &:hover {
-      background-color: var(--primary-0);
-      color: var(--text-0);
-    }
-  }
-
-  &.dangerous {
-    border-color: var(--dangerous);
-    color: var(--dangerous);
-
-    &:hover {
-      background-color: var(--dangerous);
-      color: var(--text-0);
-    }
-  }
-
-  &.gold {
-    border-color: var(--gold);
-    color: var(--gold);
-
-    &:hover {
-      background-color: var(--gold);
-      color: var(--text-0);
-    }
-  }
-
   &.disabled {
     border-color: var(--border-2);
     pointer-events: none;
     color: var(--text-1);
+    background-color: var(--background-0);
 
     &.dark {
       opacity: 0.2;
     }
   }
-}
 
-.icon_label {
+  &.primary:not(.disabled) {
-  display: flex;
+    border-color: var(--primary-0);
-  flex-direction: row;
+    color: var(--primary-0);
-  gap: Spacings.$spacing02;
-  align-items: center;
 
-  @media (max-width: ScreenSizes.$small) {
+    &:hover,
-    .label {
+    &.important {
-      display: none;
+      background-color: var(--primary-0);
+      color: var(--text-0);
+    }
+  }
+
+  &.dangerous:not(.disabled) {
+    border-color: var(--dangerous);
+    color: var(--dangerous);
+
+    &:hover,
+    &.important {
+      background-color: var(--dangerous);
+      color: var(--text-0);
+    }
+  }
+
+  &.gold:not(.disabled) {
+    border-color: var(--gold);
+    color: var(--gold);
+
+    &:hover,
+    &.important {
+      background-color: var(--gold);
+      color: var(--text-0);
+    }
+  }
+
+  .icon_label {
+    display: flex;
+    flex-direction: row;
+    gap: Spacings.$spacing02;
+    align-items: center;
+
+    @media (max-width: ScreenSizes.$small) {
+      .label {
+        display: none;
+      }
     }
   }
 }

frontend/lib/components/ui/QuivrButton/QuivrButton.tsx

@@ -16,35 +16,60 @@ export const QuivrButton = ({
   iconName,
   disabled,
   hidden,
+  important,
 }: ButtonType): JSX.Element => {
   const [hovered, setHovered] = useState<boolean>(false);
   const { isDarkMode } = useUserSettingsContext();
 
+  const handleClick = () => {
+    if (onClick) {
+      void onClick();
+    }
+  };
+
+  const handleMouseEnter = () => {
+    setHovered(true);
+  };
+
+  const handleMouseLeave = () => {
+    setHovered(false);
+  };
+
+  const getIconColor = () => {
+    if (hovered || (important && !disabled)) {
+      return "white";
+    } else if (disabled) {
+      return "grey";
+    } else {
+      return color;
+    }
+  };
+
   return (
     <div
       className={`
       ${styles.button_wrapper} 
       ${styles[color]} 
-      ${disabled ? styles.disabled : ""}
       ${isDarkMode ? styles.dark : ""}
       ${hidden ? styles.hidden : ""}
+      ${important ? styles.important : ""}
+      ${disabled ? styles.disabled : ""}
       `}
-      // eslint-disable-next-line @typescript-eslint/no-misused-promises
+      onClick={handleClick}
-      onClick={() => onClick?.()}
+      onMouseEnter={handleMouseEnter}
-      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={handleMouseLeave}
-      onMouseLeave={() => setHovered(false)}
     >
       <div className={styles.icon_label}>
         {!isLoading ? (
           <Icon
             name={iconName}
             size="normal"
-            color={hovered ? "white" : disabled ? "grey" : color}
+            color={getIconColor()}
             handleHover={false}
           />
         ) : (
           <LoaderIcon
-            color={hovered ? "white" : disabled ? "grey" : color}
+            color={hovered || important ? "white" : disabled ? "grey" : color}
             size="small"
           />
         )}

frontend/lib/types/QuivrButton.ts

@@ -10,4 +10,5 @@ export interface ButtonType {
   onClick?: () => void | Promise<void>;
   disabled?: boolean;
   hidden?: boolean;
+  important?: boolean;
 }