From 10bc945564a2bd21091082cef16a93ee7ed9e9f1 Mon Sep 17 00:00:00 2001
From: Antoine Dewez <44063631+Zewed@users.noreply.github.com>
Date: Mon, 8 Jul 2024 09:58:14 +0200
Subject: [PATCH] feat(frontend): add small property to textInput (#2798)

# 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):
---
 .../components/ManageBrains/BrainSearchBar.tsx       |  1 +
 .../KnowledgeTab/KnowledgeTable/KnowledgeTable.tsx   |  1 +
 .../components/ui/TextInput/TextInput.module.scss    | 12 +++++++++++-
 frontend/lib/components/ui/TextInput/TextInput.tsx   |  5 ++++-
 4 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/frontend/app/studio/BrainsTabs/components/ManageBrains/BrainSearchBar.tsx b/frontend/app/studio/BrainsTabs/components/ManageBrains/BrainSearchBar.tsx
index 68ebd90db90..a735891338f 100644
--- a/frontend/app/studio/BrainsTabs/components/ManageBrains/BrainSearchBar.tsx
+++ b/frontend/app/studio/BrainsTabs/components/ManageBrains/BrainSearchBar.tsx
@@ -19,6 +19,7 @@ export const BrainSearchBar = ({
       label={t("searchBrain")}
       inputValue={searchQuery}
       setInputValue={setSearchQuery}
+      small={true}
     />
   );
 };
diff --git a/frontend/app/studio/[brainId]/BrainManagementTabs/components/KnowledgeTab/KnowledgeTable/KnowledgeTable.tsx b/frontend/app/studio/[brainId]/BrainManagementTabs/components/KnowledgeTab/KnowledgeTable/KnowledgeTable.tsx
index 158d2ee1ce1..46adc9c59b2 100644
--- a/frontend/app/studio/[brainId]/BrainManagementTabs/components/KnowledgeTab/KnowledgeTable/KnowledgeTable.tsx
+++ b/frontend/app/studio/[brainId]/BrainManagementTabs/components/KnowledgeTab/KnowledgeTable/KnowledgeTable.tsx
@@ -97,6 +97,7 @@ const KnowledgeTable = React.forwardRef<HTMLDivElement, KnowledgeTableProps>(
               label="Search"
               inputValue={searchQuery}
               setInputValue={setSearchQuery}
+              small={true}
             />
           </div>
           <QuivrButton
diff --git a/frontend/lib/components/ui/TextInput/TextInput.module.scss b/frontend/lib/components/ui/TextInput/TextInput.module.scss
index f602ee23903..2742537d3ef 100644
--- a/frontend/lib/components/ui/TextInput/TextInput.module.scss
+++ b/frontend/lib/components/ui/TextInput/TextInput.module.scss
@@ -1,5 +1,6 @@
 @use "styles/Radius.module.scss";
 @use "styles/Spacings.module.scss";
+@use "styles/Typography.module.scss";
 
 .text_input_container {
   display: flex;
@@ -22,6 +23,15 @@
     }
   }
 
+  &.small {
+    padding-block: 0;
+
+    .text_input {
+      font-size: Typography.$small;
+      padding: Spacings.$spacing02;
+    }
+  }
+
   &.disabled {
     cursor: not-allowed;
     opacity: 0.5;
@@ -38,4 +48,4 @@
       box-shadow: none;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/lib/components/ui/TextInput/TextInput.tsx b/frontend/lib/components/ui/TextInput/TextInput.tsx
index ecc704eb8a1..e0527b84773 100644
--- a/frontend/lib/components/ui/TextInput/TextInput.tsx
+++ b/frontend/lib/components/ui/TextInput/TextInput.tsx
@@ -12,6 +12,7 @@ type TextInputProps = {
   disabled?: boolean;
   crypted?: boolean;
   onKeyDown?: (event: React.KeyboardEvent) => void;
+  small?: boolean;
 };
 
 export const TextInput = ({
@@ -24,6 +25,7 @@ export const TextInput = ({
   disabled,
   crypted,
   onKeyDown,
+  small,
 }: TextInputProps): JSX.Element => {
   return (
     <div
@@ -31,6 +33,7 @@ export const TextInput = ({
       ${styles.text_input_container} 
       ${simple ? styles.simple : ""}
       ${disabled ? styles.disabled : ""}
+      ${small ? styles.small : ""}
       `}
     >
       <input
@@ -49,7 +52,7 @@ export const TextInput = ({
       {!simple && iconName && (
         <Icon
           name={iconName}
-          size="normal"
+          size={small ? "small" : "normal"}
           color={onSubmit ? (inputValue ? "accent" : "grey") : "black"}
           onClick={onSubmit}
         />