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):

frontend/app/studio/BrainsTabs/components/ManageBrains/BrainSearchBar.tsx

@@ -19,6 +19,7 @@ export const BrainSearchBar = ({
       label={t("searchBrain")}
       inputValue={searchQuery}
       setInputValue={setSearchQuery}
+      small={true}
     />
   );
 };

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

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;
     }
   }
-}
+}

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,13 +25,15 @@ export const TextInput = ({
   disabled,
   crypted,
   onKeyDown,
+  small,
 }: TextInputProps): JSX.Element => {
   return (
     <div
       className={`
       ${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}
         />