feat(frontend): better UI for big modals

frontend/app/chat/[chatId]/components/ActionsBar/components/KnowledgeToFeed/components/FromDocuments/FromDocuments.module.scss

@@ -10,12 +10,17 @@
   cursor: pointer;
   height: 100%;
   overflow: scroll;
+  transition: border-color 0.3s ease 0.2s, border-width 0.1s ease 0.1s;
 
   &.dragging {
     border: 3px dashed var(--accent);
     background-color: var(--background-3);
   }
 
+  &:hover {
+    border: 3px dashed var(--accent);
+  }
+
   .box_content {
     padding: Spacings.$spacing05;
     display: flex;
@@ -39,4 +44,4 @@
       }
     }
   }
-}
+}

frontend/lib/components/AddBrainModal/AddBrainModal.module.scss

@@ -2,21 +2,19 @@
 
 .add_brain_modal_container {
   display: flex;
-  padding-block: Spacings.$spacing05;
+  padding-top: Spacings.$spacing06;
   flex-direction: column;
   width: 100%;
-  max-height: 90%;
-  min-height: 90%;
+  flex-grow: 1;
   overflow: hidden;
   gap: Spacings.$spacing05;
 
   .stepper_container {
     width: 100%;
-    padding-inline: Spacings.$spacing08;
   }
 
   .content_wrapper {
     flex-grow: 1;
     overflow: auto;
   }
-}
+}

frontend/lib/components/AddBrainModal/components/BrainMainInfosStep/BrainMainInfosStep.module.scss

@@ -7,11 +7,10 @@
   flex-direction: column;
   justify-content: space-between;
   height: 100%;
-  padding-inline: Spacings.$spacing08;
-  gap: Spacings.$spacing03;
+  gap: Spacings.$spacing05;
 
   .title {
-    @include Typography.H2;
+    @include Typography.H3;
   }
 
   .inputs_wrapper {
@@ -35,4 +34,4 @@
     display: flex;
     justify-content: flex-end;
   }
-}
+}

frontend/lib/components/AddBrainModal/components/FeedBrainStep/FeedBrainStep.module.scss

@@ -5,7 +5,6 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  padding-inline: Spacings.$spacing08;
   height: 100%;
 
   .tutorial {
@@ -19,7 +18,7 @@
     height: 100%;
 
     .title {
-      @include Typography.H2;
+      @include Typography.H3;
     }
   }
 
@@ -40,4 +39,4 @@
     display: flex;
     justify-content: space-between;
   }
-}
+}

frontend/lib/components/AddBrainModal/components/Stepper/Stepper.module.scss

@@ -6,6 +6,7 @@
   display: flex;
   width: 100%;
   justify-content: space-between;
+  overflow: visible;
 
   .step {
     display: flex;
@@ -32,6 +33,20 @@
       }
     }
 
+    .step_info {
+      margin-top: Spacings.$spacing03;
+      display: flex;
+      flex-direction: column;
+      font-size: Typography.$tiny;
+      width: 1.75rem;
+      align-items: center;
+
+      .step_index {
+        white-space: nowrap;
+        color: var(--text-1);
+      }
+    }
+
     &.done_step {
       .circle {
         background-color: var(--success);
@@ -75,16 +90,15 @@
       }
     }
 
-    .step_info {
-      margin-top: Spacings.$spacing03;
-      display: flex;
-      flex-direction: column;
-      font-size: Typography.$tiny;
-      width: 1.75rem;
+    &:first-child {
+      .step_info {
+        align-items: start;
+      }
+    }
 
-      .step_index {
-        white-space: nowrap;
-        color: var(--text-1);
+    &:last-child {
+      .step_info {
+        align-items: end;
       }
     }
   }
@@ -101,4 +115,4 @@
       background-color: var(--success);
     }
   }
-}
+}

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

@@ -1,14 +1,15 @@
 @use "styles/Colors.module.scss";
 @use "styles/Spacings.module.scss";
+@use "styles/Typography.module.scss";
 
 .field_header_wrapper {
   display: flex;
   gap: Spacings.$spacing03;
-  font-weight: 500;
   align-items: center;
   padding-bottom: Spacings.$spacing02;
+  font-size: Typography.$small;
 
   .mandatory {
     color: Colors.$dangerous;
   }
-}
+}

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

@@ -2,6 +2,7 @@
 @use "styles/Radius.module.scss";
 @use "styles/ScreenSizes.module.scss";
 @use "styles/Spacings.module.scss";
+@use "styles/Typography.module.scss";
 @use "styles/ZIndexes.module.scss";
 
 .modal_container {
@@ -19,14 +20,23 @@
     flex-direction: column;
     border-radius: Radius.$big;
     background-color: var(--background-0);
-    padding: Spacings.$spacing05;
+    padding-inline: Spacings.$spacing08;
+    padding-block: Spacings.$spacing06;
     cursor: auto;
     box-shadow: BoxShadow.$medium;
     max-width: 90vw;
     width: 35vw;
     height: 80vh;
     overflow: auto;
 
+    .title {
+      @include Typography.H1;
+    }
+
+    .subtitle {
+      font-size: Typography.$small;
+    }
+
     &.auto {
       height: auto;
     }
@@ -50,9 +60,10 @@
       position: absolute;
       top: 0;
       right: 0;
-      padding: Spacings.$spacing05;
+      padding: Spacings.$spacing06;
+      padding-inline: Spacings.$spacing08;
       border-radius: 50;
       outline: none;
     }
   }
-}
+}

frontend/lib/components/ui/Modal/Modal.tsx

@@ -5,11 +5,11 @@ import * as Dialog from "@radix-ui/react-dialog";
 import { AnimatePresence, motion } from "framer-motion";
 import { ReactNode, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { MdClose } from "react-icons/md";
 
 import styles from "./Modal.module.scss";
 
 import Button from "../Button";
+import Icon from "../Icon/Icon";
 
 type CommonModalProps = {
   title?: string;
@@ -98,16 +98,10 @@ export const Modal = ({
                   <motion.div
                     {...handleModalContentAnimation(size, !!unforceWhite)}
                   >
-                    <Dialog.Title
-                      className="m-0 text-2xl font-bold"
-                      data-testid="modal-title"
-                    >
+                    <Dialog.Title className={styles.title}>
                       {title}
                     </Dialog.Title>
-                    <Dialog.Description
-                      className="opacity-50"
-                      data-testid="modal-description"
-                    >
+                    <Dialog.Description className={styles.subtitle}>
                       {desc}
                     </Dialog.Description>
                     {children}
@@ -126,7 +120,12 @@ export const Modal = ({
                           className={styles.close_button_wrapper}
                           aria-label="Close"
                         >
-                          <MdClose />
+                          <Icon
+                            name="close"
+                            color="black"
+                            size="normal"
+                            handleHover={true}
+                          />
                         </button>
                       </Dialog.Close>
                     )}

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

@@ -16,6 +16,10 @@
   background-color: var(--background-0);
   height: fit-content;
 
+  &.important {
+    text-transform: uppercase;
+  }
+
   &.hidden {
     display: none;
   }

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

@@ -5,8 +5,8 @@
 .text_input_container {
   display: flex;
   border: 1px solid var(--border-2);
-  gap: Spacings.$spacing03;
-  padding-block: Spacings.$spacing02;
+  gap: Spacings.$spacing02;
+  padding-block: Spacings.$spacing01;
   padding-inline: Spacings.$spacing03;
   border-radius: Radius.$big;
   align-items: center;
@@ -43,6 +43,7 @@
     border: none;
     flex: 1;
     background-color: transparent;
+    padding: Spacings.$spacing03;
 
     &:focus {
       box-shadow: none;