From 76c9341223b9fb0b9ff7d58fa936f7665e492fc8 Mon Sep 17 00:00:00 2001
From: Nitin Koche <nitinkoche03@gmail.com>
Date: Thu, 29 Aug 2024 17:09:07 +0530
Subject: [PATCH] used existing TextInput

---
 .../ui/input/components/SearchInput.tsx       | 59 -------------------
 .../data-model/SettingsObjectFieldTable.tsx   | 11 +++-
 .../settings/data-model/SettingsObjects.tsx   | 17 ++++--
 3 files changed, 21 insertions(+), 66 deletions(-)
 delete mode 100644 packages/twenty-front/src/modules/ui/input/components/SearchInput.tsx

diff --git a/packages/twenty-front/src/modules/ui/input/components/SearchInput.tsx b/packages/twenty-front/src/modules/ui/input/components/SearchInput.tsx
deleted file mode 100644
index 004fb2be8fbf..000000000000
--- a/packages/twenty-front/src/modules/ui/input/components/SearchInput.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
-import { IconSearch } from 'twenty-ui';
-
-const StyledSearchInputContainer = styled.div`
-  margin-bottom: ${({ theme }) => theme.spacing(2)};
-  position: relative;
-  width: 100%;
-`;
-
-const StyledSearchInput = styled.input`
-  width: 100%;
-  border: 1px solid ${({ theme }) => theme.border.color.medium};
-  border-radius: ${({ theme }) => theme.border.radius.sm};
-  background: ${({ theme }) => theme.background.transparent.lighter};
-  color: ${({ theme }) => theme.font.color.primary};
-  font-size: ${({ theme }) => theme.font.size.md};
-  outline: none;
-  height: 32px;
-  padding: 0 ${({ theme }) => theme.spacing(2)} 0
-    ${({ theme }) => theme.spacing(7)};
-  box-sizing: border-box;
-  &::placeholder {
-    color: ${({ theme }) => theme.font.color.light};
-    font-weight: ${({ theme }) => theme.font.weight.medium};
-  }
-`;
-
-const StyledSearchIcon = styled(IconSearch)`
-  position: absolute;
-  left: ${({ theme }) => theme.spacing(2)};
-  top: 50%;
-  transform: translateY(-50%);
-  color: ${({ theme }) => theme.font.color.light};
-`;
-
-interface SearchInputProps {
-  placeholder: string;
-  value: string;
-  onChange: (value: string) => void;
-}
-
-export const SearchInput = ({
-  placeholder,
-  value,
-  onChange,
-}: SearchInputProps) => {
-  const theme = useTheme();
-  return (
-    <StyledSearchInputContainer>
-      <StyledSearchIcon size={theme.icon.size.md} />
-      <StyledSearchInput
-        placeholder={placeholder}
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-      />
-    </StyledSearchInputContainer>
-  );
-};
diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldTable.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldTable.tsx
index 1833551ab9e4..5830df05c91b 100644
--- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldTable.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldTable.tsx
@@ -4,17 +4,18 @@ import {
   StyledObjectFieldTableRow,
 } from '@/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow';
 import { settingsObjectFieldsFamilyState } from '@/settings/data-model/object-details/states/settingsObjectFieldsFamilyState';
-import { SearchInput } from '@/ui/input/components/SearchInput';
+import { TextInput } from '@/ui/input/components/TextInput';
 import { SortableTableHeader } from '@/ui/layout/table/components/SortableTableHeader';
 import { Table } from '@/ui/layout/table/components/Table';
 import { TableHeader } from '@/ui/layout/table/components/TableHeader';
 import { TableSection } from '@/ui/layout/table/components/TableSection';
 import { useSortedArray } from '@/ui/layout/table/hooks/useSortedArray';
 import { TableMetadata } from '@/ui/layout/table/types/TableMetadata';
+import styled from '@emotion/styled';
 import { isNonEmptyArray } from '@sniptt/guards';
-
 import { useEffect, useMemo, useState } from 'react';
 import { useRecoilState } from 'recoil';
+import { IconSearch } from 'twenty-ui';
 import { useMapFieldMetadataItemToSettingsObjectDetailTableItem } from '~/pages/settings/data-model/hooks/useMapFieldMetadataItemToSettingsObjectDetailTableItem';
 import { SettingsObjectDetailTableItem } from '~/pages/settings/data-model/types/SettingsObjectDetailTableItem';
 
@@ -76,6 +77,9 @@ const SETTINGS_OBJECT_DETAIL_TABLE_METADATA_CUSTOM: TableMetadata<SettingsObject
     },
   };
 
+const StyledSearchInput = styled(TextInput)`
+  width: 100%;
+`;
 export type SettingsObjectFieldTableProps = {
   objectMetadataItem: ObjectMetadataItem;
   mode: 'view' | 'new-field';
@@ -169,7 +173,8 @@ export const SettingsObjectFieldTable = ({
 
   return (
     <>
-      <SearchInput
+      <StyledSearchInput
+        LeftIcon={IconSearch}
         placeholder="Search a field..."
         value={searchTerm}
         onChange={setSearchTerm}
diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjects.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjects.tsx
index 3f5e841db8b9..3c13d55167db 100644
--- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjects.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjects.tsx
@@ -1,6 +1,12 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { H2Title, IconChevronRight, IconHierarchy2, IconPlus } from 'twenty-ui';
+import {
+  H2Title,
+  IconChevronRight,
+  IconHierarchy2,
+  IconPlus,
+  IconSearch,
+} from 'twenty-ui';
 
 import { useDeleteOneObjectMetadataItem } from '@/object-metadata/hooks/useDeleteOneObjectMetadataItem';
 import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
@@ -18,7 +24,7 @@ import { getObjectTypeLabel } from '@/settings/data-model/utils/getObjectTypeLab
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { Button } from '@/ui/input/button/components/Button';
-import { SearchInput } from '@/ui/input/components/SearchInput';
+import { TextInput } from '@/ui/input/components/TextInput';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
 import { SortableTableHeader } from '@/ui/layout/table/components/SortableTableHeader';
@@ -35,7 +41,9 @@ import { SettingsObjectTableItem } from '~/pages/settings/data-model/types/Setti
 const StyledIconChevronRight = styled(IconChevronRight)`
   color: ${({ theme }) => theme.font.color.tertiary};
 `;
-
+const StyledSearchInput = styled(TextInput)`
+  width: 100%;
+`;
 export const SettingsObjects = () => {
   const theme = useTheme();
   const [searchTerm, setSearchTerm] = useState('');
@@ -143,7 +151,8 @@ export const SettingsObjects = () => {
           <Section>
             <H2Title title="Existing objects" />
 
-            <SearchInput
+            <StyledSearchInput
+              LeftIcon={IconSearch}
               placeholder="Search an object..."
               value={searchTerm}
               onChange={setSearchTerm}